Google Chrome扩展程序的相对路径

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

有任何想法吗？

发表一个例子。 这通常有效。
这是一个示例：background-image：url(sprites.png)
错误：无法加载资源：服务器响应状态为404(未找到)
sprites.png如果使用绝对路径，例如chrome-extensions： // pfionnbgiepoddidhifofhiijoojachg / images，它可以找到没有问题的图像。

　　

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

 

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

上面的应该工作，每个人都使用它。但是，如果将其用于内容脚本，并且可以对任何CSS执行相同的操作，则需要使用预定义的消息，例如：

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

如果要以编程方式进行设置，则可以使用chrome.extension.getURL语法，如下所示：

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

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

另外，如本答案所述，如果将图像资产放置在目录中，则这些文件将无法自动在网页DOM中访问。开发人员应使用manifest.json文件中的" web_accessible_resources"设置指定可以加载页面的资源：

让我看看是否可以理解，我只能在背景，弹出窗口，信息栏和其他类似页面中使用相对路径。 如果我在内容脚本或CSS中引用图像，则必须使用预定义的消息，如上所述。 那是对的吗？
注意：目前，此技术不适用于Content脚本CSS文件，因为它们不能使用预定义的消息，例如@@ extension_id。 有关详细信息，请参见错误39899(crbug.com/39899)
@@ exension_id，其他自定义预定义消息，您不能/
我看到了：它的ms-browser-extension：// [[id]] / path
仅供参考：从Chrome v58开始，不推荐使用chrome.extension.getURL()，而将其替换为chrome.runtime.getURL()。

@mohamed的答案对我有用，但是花了我一段时间才把它们放在一起。我已经在其他地方回答了这个问题，但这是对我有用的解决方案。

我的解决方案。

使用Menifest v2，您需要将web_accessible_resources添加到文件中，然后在CSS文件中使用chrome-extension://__MSG_@@extension_id__/images/pattern.png作为url。

CSS：

#selector {
      background: #fff url('chrome-extension://__MSG_@@extension_id__/images/pattern.png');
 }