Question

我为Chrome扩展程序编写了一个小内容脚本，用于在网页中插入图片，但是当我观看已处理的网页时，图片就会显示为链接已损坏。

图片位于Chrome扩展程序的根目录下。我正在使用扩展API中的getURL函数：

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

当我检查网页时，我看到网址是：

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

我无法弄清楚我做错了什么。请帮助我，我陷入困境和无能为力。

编辑：注意：链接确实正确，因为当我点击“在新标签页中打开图像”时，图标会正确显示。

Answer 1

您可以将清单版本降级为弃用版本（使用1而不是2），但是您在v2世界中应该这样做的方式是将您打算嵌入页面的资产列入白名单{ {1}}，描述了here。

这是因为清单v2中资产的默认可用性发生了变化：

默认可用性

默认情况下，使用manifest_version 2或更高版本的软件包内的资源被阻止，并且必须列入白名单才能通过此属性使用。

Answer 2

那是什么答案？＆＃34;使用旧的清单，你很高兴去＃34;当然使用最新的！老了。它已经贬值了。

阅读文档：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。

从内容脚本引用时，扩展中的图像显示为断开的链接

3 个答案:

默认可用性