Google Chrome扩展程序 – 无法使用CSS加载本地图片
我有一个简单的Chrome扩展，使用内容脚本function来修改网站。 更具体地说，是所述网站的background-image 。
出于某种原因，我似乎无法使用本地图像，即使它们被打包在扩展名中。
body { background: #000 url('image.jpg') !important; background-repeat: repeat !important; }
就是这样，最简单的CSS，但它不会工作。 浏览器不加载图像。
您的图片url应该像chrome-extension://<EXTENSION_ID>/image.jpg
你会更好更换通过javascript的CSS。 从文档 ：
//Code for displaying <extensionDir>http://img.dovov.commyimage.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__http://img.dovov.commain.png');
一种select是将您的图像转换为base64：
然后把这些数据放到你的css中，例如：
body { background-image: url(data:image/png;base64,iVB...); }
虽然这可能不是您定期开发网页时想要使用的方法 ，但由于构buildChrome扩展的一些限制，这是一个不错的select。
这个问题有很多旧的答案和解决scheme。
截至2015年8月（使用Chrome 45和Manifest版本2），目前用于在Chrome扩展程序中链接到本地图片的“最佳做法”是以下方法。
1）使用您的扩展程序的images文件夹的相对path链接到CSS中的资源：
.selector { background: url('chrome-extension://__MSG_@@extension_id__http://img.dovov.comfile.png'); }
2）将单个资产添加到您的扩展程序的manifest.json文件的web_accessible_resources部分：
"web_accessible_resources": [ "images/file.png" ]
注意：此方法适用于less数文件，但不能很好地扩展许多文件。
相反，更好的方法是利用Chrome对匹配模式的支持，将给定目录中的所有文件列入白名单：
{ "name": "Example Chrome Extension", "version": "0.1", "manifest_version": 2, ... "web_accessible_resources": [ "images/*" ] }
使用这种方法，您可以使用原生支持的方法，快速轻松地在Chrome扩展程序的CSS文件中使用图片。
我的解决scheme
使用Menifest v2，您需要将web_accessible_resources添加到文件中，然后在您的css文件中使用chrome-extension://__MSG_@@extension_id__http://img.dovov.compattern.png作为url。
CSS：
#selector { background: #fff url('chrome-extension://__MSG_@@extension_id__http://img.dovov.compattern.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版本仅适用于扩展环境（应用程序页面，popup页面，背景页面，选项页面）以及content_scripts CSS文件。
在.less文件中，我总是在开头设置一个variables：
@extensionId : ~"__MSG_@@extension_id__";
然后，如果你想引用扩展本地资源，如图像，使用：
.close{ background-image: url("chrome-extension://@{extensionId}http://img.dovov.comclose.png"); }
有一点要提到的是，在web_accessible_resources中可以使用通配符。 所以，而不是
“图像/ pattern.png”
您可以使用
“图片/*”
只是为了澄清，根据文档 ，扩展中的每个文件也可以像这样的绝对URL访问：
chrome-extension：//
<extensionID>/<pathToFile>
请注意， <extensionID>是扩展系统为每个扩展生成的唯一标识符。 您可以通过访问URL chrome：// extensions来查看所有已加载的扩展程序的ID。 <pathToFile>是扩展名顶部文件夹下文件的位置; 它与相对URL相同。
…
在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>'）”）;
如果你想在现场testing本地图像，你可以运行本地networking服务器，并使用DevTools设置url，如http://127.0.0.1:8123/img.jpg
有不同的方法来运行一个Web服务器：
-
浏览器扩展名为“Web服务器的Chrome”与定义的文件夹https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb
-
如果你有python，然后在选定的文件夹中运行embedded式http服务器
python3 -m http.server 8123＃python 3 version
python -m SimpleHTTPServer 8123＃python 2版本 -
使用生产就绪服务器，如nginx ， Apache
此外，我尝试铬启动标志 – 允许文件从文件访问，但它不适用于我的版本52.0.2743.116，它是危险的和不安全的。 源自任何地方，本地或networking的文档，默认情况下不应该有权访问本地文件：///资源。
;){kind=link}