javascript - 将图像嵌入到 Chrome 扩展程序中

标签 javascript google-chrome google-chrome-extension

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

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

感谢您的帮助。

最佳答案

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

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

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

此外,检查 web_accessible_resources list 属性 documented here - 您可能需要声明您的资源,以便它们在此方法中可用。

关于javascript - 将图像嵌入到 Chrome 扩展程序中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10865789/

相关文章:

javascript - 使属性不可枚举有什么好处?

javascript - 在javascript中用正则表达式解析html文本?

CSS 转换有时会在 Chrome 中被跳过

android - Xamarin.Auth (Android) - Chrome 自定义选项卡不会在重定向时关闭

javascript - 未捕获的语法错误 : Unexpected token else

javascript - Chrome 扩展程序可检查链接并重定向到另一个网站

javascript - 为什么 Input.dispatchMouseEvent 不调度事件?

javascript - 如何从 Angular 构建中排除文件类型?

javascript - 制作一个替换 css 和 js 元素的 chrome 扩展

javascript - ng-repeat 需要太多时间来呈现数据