Question

我正在构建一个Google Chrome扩展程序，它将HTML注入真实网页。注入还包含图像，现在我想知道如何引用扩展中的图像。到目前为止，我只能使用http://example.com/myimage.png在服务器上引用它们。但这需要一段时间才能加载。

是否可以在扩展程序中打包图像并从浏览器的任何位置引用它们？怎么样？

感谢您的帮助。

Answer 1

您可以使用chrome.runtime.getURL()（docs）获取内部扩展文件夹网址。将它传递给图像相对路径，您将获得它的完整URL。

例如，如果您在扩展文件夹中有一个名为“images”的文件夹和名为“profile.jpg”的图像，则可以通过执行以下操作将其注入页面正文：

var image = document.createElement("img");
image.src = chrome.runtime.getURL("images/profile.jpg");
document.getElementsByTagName("body")[0].appendChild(image);

另外，请查看web_accessible_resources清单属性documented here - 您可能需要声明此资源可供此方法使用。

Answer 2

将其保留在此处，以使人们不必阅读所有注释。

manifest.json中的

包括以下内容：

pathView.findAllRichPaths()

，然后，如果要在网页上使用此图像或文件，请使用

"web_accessible_resources": ["RELATIVE_PATH_TO_RESOURCE.EXTENTION"] // can be more than one

将图片嵌入Chrome扩展程序

2 个答案: