Google Chrome扩展程序-无法使用CSS加载本地图像

我有一个简单的Chrome扩展程序，该扩展程序使用内容脚本功能来修改网站。更具体地说，background-image所述网站。

由于某些原因，即使扩展中打包了本地图像，我似乎也无法使用它。

body {
    background: #000 url('image.jpg') !important;
    background-repeat: repeat !important;
}

就是这样，最简单的CSS ...但是它不起作用。浏览器不会加载图像。

您的图片网址应类似于 chrome-extension://<EXTENSION_ID>/image.jpg

您最好通过JavaScript替换CSS。从文档：

//Code for displaying <extensionDir>/images/myimage.png:
var imgURL = chrome.extension.getURL("images/myimage.png");
document.getElementById("someImage").src = imgURL;

Chrome具有i18n支持 ，可在CSS中引用您的扩展程序。我将图片保存在扩展程序的图片文件夹中，因此请在CSS中引用资源，如下所示：

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

这个问题有很多较旧的答案和解决方案。

从2015年8月开始（使用Chrome 45和Manifest版本2），当前的“最佳做法” 是通过以下方法链接到Chrome扩展程序中的本地图片。

1）使用扩展程序的images文件夹的相对路径链接到CSS中的资产：

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

2）将单个资产添加到扩展程序的manifest.json文件的web_accessible_resources部分：

"web_accessible_resources": [
  "images/file.png"
]

注意：此方法适用于少量文件，但不适用于许多文件。

相反，一种更好的方法是利用Chrome对匹配模式的支持，将给定目录中的所有文件列入白名单：

{
    "name": "Example Chrome Extension",
    "version": "0.1",
    "manifest_version": 2,
    ...    
    "web_accessible_resources": [
      "images/*"
    ]
}

使用此方法，您可以使用本机支持的方法快速轻松地使用Chrome扩展程序CSS文件中的图像。

一种选择是将图像转换为base64：

然后将数据放入您的CSS中，例如：

body { background-image: url(data:image/png;base64,iVB...); }

虽然这可能不是您在定期开发网页时想要使用的方法，但由于构建Chrome扩展程序存在一些限制，因此这是一个不错的选择。

我的解决方案。

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

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"
     ]
}

ps您的manifest.json可能与此不同。

仅限于CSS版本可在扩展环境（应用页面，弹出页面，背景页面，选项页面）以及content_scripts CSS文件中使用。

在.less文件中，我总是在开头设置一个变量：

@extensionId : ~"__MSG_@@extension_id__";

然后，如果您想引用扩展本地资源（如图像），请使用：

.close{
    background-image: url("chrome-extension://@{extensionId}/images/close.png");
}

要提及的一件事是，您可以在web_accessible_resources中使用通配符。所以代替

“ images / pattern.png”

您可以使用

“图片/*”

根据文档说明，扩展名中的每个文件都可以通过绝对URL进行访问，如下所示：

chrome-extension：// <extensionID>/<pathToFile>

请注意，<extensionID>是扩展系统为每个扩展生成的唯一标识符。您可以转到URL chrome：// extensions来查看所有已加载扩展的ID 。该<pathToFile>是扩展的顶层文件夹下的文件的位置; 与相对网址相同。

...

在CSS中更改背景图片：

#id{background-image：url（“ chrome-extension://<extensionID>/<pathToFile>”）; }

通过JavaScript更改CSS中的背景图片：

document.getElementById（' id'）.style.backgroundImage =“ url（'chrome-extension：// <extensionID>/ <pathToFile>'）”）;

通过jQuery在CSS中更改背景图片：

$（“ #id”）.css（“ background-image”，“ url（'chrome-extension：// <extensionID>/ <pathToFile>'）”）;