Question

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

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

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

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

Answer 1

Chrome已i18n support，可以在CSS中引用您的扩展程序。我将图像保存在扩展中的图像文件夹中，因此CSS中的引用资源如下：

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

Answer 2

您的图片网址应如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;

Answer 3

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

截至2015年8月（使用Chrome 45和Manifest版本2），目前的最佳做法＆＃34;用于链接到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文件中使用图像。

Answer 4

一个选项是将您的图片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扩展程序的一些限制，这是一个很好的选择。

Answer 5

我的解决方案。

使用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 6

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

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

@extensionId : ~"__MSG_@@extension_id__";

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

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

Answer 7

有一点需要注意的是，在web_accessible_resources中，您可以使用通配符。而不是

“图像/ pattern.png”

您可以使用

“图像/ *”

Answer 8

请注意，根据documentation，扩展程序中的每个文件也可以通过以下绝对网址访问：

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

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

...

更改CSS中的背景图片：


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

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


document.getElementById（'id'）。style.backgroundImage =   “URL（ '铬扩展：// <extensionID> / <pathToFile>'）”）;

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


$（ “#id”）。CSS（ “背景图像”，   “URL（ '铬扩展：// <extensionID> / <pathToFile>'）”）;

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

8 个答案: