我有一个简单的 Chrome 扩展程序，它使用内容脚本功能来修改网站。更具体地说，该网站的background-image。
由于某种原因，我似乎无法使用本地图片，即使它们已打包在扩展程序中。
body {
background: #000 url('image.jpg') !important;
background-repeat: repeat !important;
}
就是这样，最简单的 CSS……但它不起作用。浏览器不加载图片。
【问题讨论】：
标签： css google-chrome-extension background-image
澄清一下，根据documentation，扩展中的每个文件也可以通过绝对 URL 访问，如下所示：
chrome-extension://
<extensionID>/<pathToFile>
注意<extensionID> 是扩展系统为每个扩展生成的唯一标识符。您可以通过访问 URL chrome://extensions 查看所有已加载扩展程序的 ID。 <pathToFile> 是扩展顶部文件夹下文件的位置；它与相对 URL 相同。
...
在 CSS 中更改背景图片：
#id{ 背景图片： 网址（“chrome-extension://<extensionID>/<pathToFile>”）； }
通过 JavaScript 在 CSS 中更改背景图片：
document.getElementById('
id').style.backgroundImage = "url('chrome-extension://<extensionID>/<pathToFile>')");
通过 jQuery 在 CSS 中更改背景图片：
$("
#id").css("背景图片", "url('chrome-extension://<extensionID>/<pathToFile>')");
【讨论】：
这个问题有很多旧的答案和解决方案。
截至 2015 年 8 月（使用 Chrome 45 和 Manifest 版本 2），当前在 Chrome Extensions 中链接到本地图像的“最佳做法”是以下方法。
1) 使用 relative path 将 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 对 match patterns 的支持将给定目录中的所有文件列入白名单：
{
"name": "Example Chrome Extension",
"version": "0.1",
"manifest_version": 2,
...
"web_accessible_resources": [
"images/*"
]
}
使用这种方法，您可以使用本机支持的方法快速轻松地使用 Chrome 扩展程序的 CSS 文件中的图像。
【讨论】：
要提一提的是，在 web_accessible_resources 中您可以使用通配符。所以不是
“图像/pattern.png”
你可以使用
“图片/*”
【讨论】：
您的图片网址应类似于chrome-extension://<EXTENSION_ID>/image.jpg
您最好通过 javascript 替换 css。来自docs：
//Code for displaying <extensionDir>/images/myimage.png:
var imgURL = chrome.extension.getURL("images/myimage.png");
document.getElementById("someImage").src = imgURL;
【讨论】：
Chrome 有 i18n support，它提供了在 CSS 中引用您的扩展程序的能力。我将图像保存在扩展程序的图像文件夹中，因此在 CSS 中引用资产，如下所示：
background-image:url('chrome-extension://__MSG_@@extension_id__/images/main.png');
【讨论】：
我的解决方案。
使用 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"
]
}
附言您的 manifest.json 可能与这个不同。
【讨论】：
一种选择是将convert您的图像转换为base64：
然后将数据直接放入您的 css 中，例如：
body { background-image: url(data:image/png;base64,iVB...); }
虽然这是might not be an approach you would want to use when regularly developing a webpage，但由于构建 Chrome 扩展程序的一些限制，它是一个不错的选择。
【讨论】：
此 CSS 版本仅适用于扩展环境（应用页面、弹出页面、背景页面、选项页面）以及 content_scripts CSS 文件。
在.less文件中，我总是在开头设置一个变量：
@extensionId : ~"__MSG_@@extension_id__";
然后，如果您想引用类似图像的扩展本地资源，请使用：
.close{
background-image: url("chrome-extension://@{extensionId}/images/close.png");
}
【讨论】：