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

Google Chrome Extensions - Can't load local images with CSS

提问by Bjarki Jonasson

I have a simple Chrome extension that uses the content script feature to modify a website. More specifically, the background-imageof said website.

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

For some reason I can't seem to be able to use local images, even though they are packed in the extension.

出于某种原因，我似乎无法使用本地图像，即使它们被打包在扩展中。

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

That's it, the simplest CSS... but it won't work. The browser doesn't load the image.

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

采纳答案by serg

Your image URL should look like chrome-extension://<EXTENSION_ID>/image.jpg

您的图片网址应如下所示 chrome-extension://<EXTENSION_ID>/image.jpg

You would be better off replacing css through javascript. From docs:

您最好通过 javascript 替换 css。从文档：

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

回答by David Lemphers

Chrome has i18n supportthat provides the ability to reference your extension in your CSS. I keep my images in an image folder in the extension, so reference assets in the CSS like so:

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

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

回答by rjb

There are a lot of older answers and solutions to this question.

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

As of August 2015 (using Chrome 45 and Manifest version 2), the current "best practice" for linking to local images within Chrome Extensionsis the following approach.

截至 2015 年 8 月（使用 Chrome 45 和清单版本 2），当前在Chrome 扩展程序中链接到本地​​图像的“最佳实践”是以下方法。

1) Link to the asset in your CSS using a relative pathto your extension's images folder:

1) 使用扩展的图像文件夹的相对路径链接到 CSS 中的资产：

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

2) Add the individual asset to to the web_accessible_resourcessection of your extension's manifest.jsonfile:

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

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

Note: This method is suitable for a few files, but doesn't scale well with many files.

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

Instead, a better method is to leverage Chrome's support for match patternsto whitelist all files within a given directory:

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

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

Using this approach will allow you to quickly and effortlessly use images in your Chrome Extension's CSS file using natively supported methods.

使用这种方法将允许您使用本机支持的方法快速轻松地使用 Chrome 扩展的 CSS 文件中的图像。

回答by Brian Sloane

One option would be to convertyour image to base64:

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

and then put the data right into your css like:

然后将数据直接放入您的 css 中，例如：

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

While this might not be an approach you would want to use when regularly developing a webpage, it is a great option due to some of the constraints of building a Chrome Extension.

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

回答by Foxinni

My solution.

我的解决方案。

With Menifest v2 you need to add web_accessible_resourcesto the file and then use chrome-extension://__MSG_@@extension_id__/images/pattern.pngas the url in your css file.

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

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. Your manifest.json might look different to this one.

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

回答by Thach Lockevn

This CSS-version-only works in extension environment (app page, popup page, background page, option page)as well as content_scripts CSS file.

此 CSS 版本仅适用于扩展环境（应用程序页面、弹出页面、背景页面、选项页面）以及content_scripts CSS 文件。

In .less file, I always set a variable at the beginning:

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

@extensionId : ~"__MSG_@@extension_id__";

Then later, if you want to refer to extension-local-resource like images, use:

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

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

回答by patrick_hogan

One thing to mention is that in the web_accessible_resources you can use wildcards. So instead of

值得一提的是，在 web_accessible_resources 中，您可以使用通配符。所以代替

"images/pattern.png"

“图像/图案.png”

You can use

您可以使用

"images/*"

“图片/*”

回答by quackkkk

Just to clarify, according to the documentation, every file in an extension is also accessible by an absolute URL like this:

只是为了澄清，根据文档，扩展名中的每个文件也可以通过这样的绝对 URL 访问：

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

镀铬的扩展：// <extensionID>/<pathToFile>

Note the <extensionID>is a unique identifier that the extension system generates for each extension. You can see the IDs for all your loaded extensions by going to the URL chrome://extensions. The <pathToFile>is the location of the file under the extension's top folder; it's the same as the relative URL.

请注意，这<extensionID>是扩展系统为每个扩展生成的唯一标识符。您可以通过访问 URL chrome://extensions来查看所有已加载扩展程序的 ID 。该<pathToFile>是扩展的顶层文件夹下的文件的位置; 它与相对 URL 相同。

...

...

Changing background image in CSS:

在 CSS 中更改背景图像：

#id{ background-image: url("chrome-extension://<extensionID>/<pathToFile>"); }

#id{ 背景图片：网址（“ chrome-extension://<extensionID>/<pathToFile>”）；}

Changing background image in CSS through JavaScript:

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

document.getElementById('id').style.backgroundImage = "url('chrome-extension://<extensionID>/<pathToFile>')");

document.getElementById(' id').style.backgroundImage = "url('chrome-extension:// <extensionID>/ <pathToFile>')");

Changing background image in CSS through jQuery:

通过 jQuery 更改 CSS 中的背景图像：

$("#id").css("background-image", "url('chrome-extension://<extensionID>/<pathToFile>')");

$(" #id").css("background-image", "url('chrome-extension:// <extensionID>/ <pathToFile>')");