google-chrome - Google Chrome 扩展程序相对路径

Question

我正在开发 google chrome 扩展程序，但遇到了相对路径问题。
如果我给出图像的相对路径并在某个页面中打开插件，它将在网站的路径而不是扩展程序的路径中查找该图像。

有任何想法吗？

Answer 1

如果您在扩展页面(背景、弹出窗口、信息栏等)中使用 CSS，那么您可以使用带斜杠的相对路径( / ):

background-image:url("/sprites.png");

以上应该有效，每个人都使用它。但是，如果您将它用于内容脚本并且您可以对任何 css 执行相同的操作，则您需要使用 predefined message喜欢:

background-image:url('chrome-extension://__MSG_@@extension_id__/sprites.png');

如果你想以编程方式设置它，你可以使用 chrome.extension.getURL语法如下:

var url = chrome.extension.getURL('sprites.png');

这些是您可以引用特定 url/图像的方式。

此外，如 mentioned in this answer , 如果您将图像资源放在一个目录中，这些文件将无法在网页 DOM 中自动访问。开发者应该使用 manifest.json 文件中的“web_accessible_resources”设置来指定可以加载页面的资源: