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

Question

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

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

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

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

Answer 1

Chrome具有i18n支持 ,可以在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),目前用于链接到Chrome扩展程序中的本地图像的"最佳做法" 是以下方法.

1)使用扩展程序图像文件夹的相对路径链接到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文件中使用图像.

Answer 4

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

然后将数据放入你的css中:

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

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

Answer 5

我的解决方案

使用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可能看起来与这个不同.

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"

您可以使用

"图片/*"