Question

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

有什么想法吗？

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');

这些是您可以引用特定网址/图片的方式。

此外，作为mentioned in this answer，如果将图像资源放在目录中，则无法在网页DOM中自动访问这些文件。开发人员应使用manifest.json文件中的“web_accessible_resources”设置指定可以加载页面的资源：

Answer 2

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

我的解决方案。

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

<强> CSS：

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

<强>的manifest.json

{
  "manifest_version": 2,

  "name": "My Extension Name",
  "description": "My Description",
  "version": "1.0",

  "content_scripts": [
      {
        "matches": ["https://mydomain.com/*"],
        "css": ["style.css"]
      }
    ],

  "permissions": [
    "https://mydomain.com/"
  ],
  "browser_action": {
      "default_icon": {                    
            "19": "images/icon19.png",           
            "38": "images/icon38.png"          
       },
       "default_title": "My Extension Name"  
   },
   "web_accessible_resources": [
       "images/pattern.png"
     ]
}

P.S。您的manifest.json可能看起来与此不同。

Answer 3

在某些情况下，您甚至可以使用图像的内联base64编码。例如，

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB..." />

同样可以申请CSS。您可以在网络上找到图像编码器。

Google Chrome扩展程序相对路径

3 个答案: