将图片嵌入到Chrome扩展程序中 [英] Embedding images into a Chrome extension

问题描述

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

是否有可能在扩展中打包图像并从浏览器的任何位置引用它们？如何？

感谢您的帮助。 您可以使用 chrome.extension.getURL（）（ docs ）获取内部扩展文件夹URL。

例如，如果您有一个名为images的文件夹，并且图像名为 profile.jpg中，无论是在扩展文件夹中，都可以通过以下方式将其注入到页面主体中：

  var image = document.createElement（img）; 
 image.src = chrome.extension.getURL（images / profile.jpg）; 
 document.getElementsByTagName（body）[0] .appendChild（image）; 
  

另外，请查看 web_accessible_resources 清单属性记录在这里 - 您可能需要声明自己的资源以供他们使用此方法。

I'm building a Google Chrome extension, which injects HTML into a real web page. The injection contains also images and now I wonder how to refer to images within the extension. So far I was able to only refer them on a server using http://example.com/myimage.png. But this takes a noticeable while until they load.

Is it possible to pack images within the extension and refer them from anywhere in the browser? How?

Thanks for any help.

解决方案

You could use chrome.extension.getURL() (docs) to get the internal extension folder URL. Pass it the image relative path and you'll get the full URL for it.

For example, if you have a folder named "images", and an image named "profile.jpg" in it, both in the extension folder, you could inject it into the body of the page by doing:

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

Also, check out the web_accessible_resources manifest property documented here - you might need to declare your resources for them to available in this method.

这篇关于将图片嵌入到Chrome扩展程序中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！