Изображение из расширения отображается как неработающая ссылка при ссылке на контент-скрипт

Question

Я написал небольшой контент-скрипт для расширения Chrome, который вставляет изображение в веб-страницу, но когда я смотрю обработанную веб-страницу, изображение появляется, как будто ссылка не работает.

Изображение находится в корне моего расширения Chrome. Я использую функцию getURL из API расширения:

$('<div class="my-image"><img src=' +
    chrome.extension.getURL("icon16.png") +
    ' />This is my image</div>');

Когда я проверяю веб-страницу, я вижу, что URL-адрес:

<img src="chrome-extension://cemgjkpboohlaaccmholgleljodgecod/icon16.png">

Я не могу понять, что я сделал не так. Пожалуйста, помогите мне, я застрял и невежественный.

РЕДАКТИРОВАТЬ: Примечание: ссылка действительно правильная, потому что, когда я нажимаю «Открыть изображение в новой вкладке», значок отображается правильно.

Answer 1

Вы МОЖЕТЕ понизить версию манифеста до устаревшей (используя 1 вместо 2), но способ, которым вы должны делать это в мире v2, заключается в внесении в белый список ресурсов, которые вы намереваетесь встраивать в страницу, используя web_accessible_resources, описано здесь .

Это связано с изменением доступности ресурсов по умолчанию в манифесте v2:

Доступность по умолчанию

Ресурсы внутри пакетов, использующих manifest_version 2 или более поздней версии, по умолчанию заблокированы и должны быть внесены в белый список для использования через это свойство.

Answer 2

Что это за ответ? «используйте старый манифест, и вы готовы идти», конечно, используйте новейшие! Старое есть старое. Это обесценивается.

Прочитать документацию: https://developer.chrome.com/extensions/content_scripts#extension-files

вы можете использовать файлы расширения с манифестом 2.

//Code for displaying <extensionDir>/images/myimage.png:
var imgURL = chrome.extension.getURL("images/myimage.png");
document.getElementById("someImage").src = imgURL;

также вы должны добавить свои изображения в web_accessible_resources, которые вы собираетесь использовать вне расширения, например, скрипт контента вставляет его на сайт какого-то пользователя: https://developer.chrome.com/extensions/manifest/web_accessible_resources

manifest.json:

{
  ...
  "web_accessible_resources": [
    "images/*.png",
    "style/double-rainbow.css",
    "script/double-rainbow.js",
    "script/main.js",
    "templates/*"
  ],
  ...
}

Answer 3

Как и предполагал PAEz, проблема заключалась в том, что у меня в манифесте было "manifest_version" : 2.