Question

我有Chrome扩展程序，可以将jquery-1.8.3.min.js和jquery-ui.js以及jquery-ui-base64.css加载到内容脚本中。
我在内容脚本 NOT 后台脚本中使用它们我设置配置（我认为）正确，但当我在控制台中看到我收到错误我可以看到窗口中的图标很好，但我仍然在Chrome窗口中看到错误这是使用版本23.0.1271.95 m的chrome im中的错误吗？

这是表现者：

{
"name":"Sample communication from content to background",
"description":"This is a sample for Simulating communication from content to background",
"manifest_version":2,
"version":"2",
"background":{
    "scripts":["background.js"]
},
"content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["jquery-1.8.3.min.js","jquery-ui.js","client.js"],
      "run_at":"document_end",
      "all_frames": true,
      "css":["jquery-ui-base64.css"]
    }
  ],
"web_accessible_resources": [
    "client.js","jquery-1.8.3.min.js","jquery-ui.js","jquery-ui-base64.css",
    "images/ui-bg_flat_0_aaaaaa_40x100.png",
    "images/ui-bg_flat_75_ffffff_40x100.png",
    "images/ui-bg_glass_55_fbf9ee_1x400.png",
    "images/ui-bg_glass_65_ffffff_1x400.png",
    "images/ui-bg_glass_75_dadada_1x400.png",
    "images/ui-bg_glass_75_e6e6e6_1x400.png",
    "images/ui-bg_glass_95_fef1ec_1x400.png",
    "images/ui-bg_highlight-soft_75_cccccc_1x100.png",
    "images/ui-icons_222222_256x240.png",
    "images/ui-icons_2e83ff_256x240.png",
    "images/ui-icons_454545_256x240.png",
    "images/ui-icons_888888_256x240.png",
    "images/ui-icons_cd0a0a_256x240.png"
  ],
"permissions": [ 
        "unlimitedStorage",
        "http://*/",
        "<all_urls>",
        "tabs"
   ]
}

在jquery-ui-base64.css中我把所有的imags url加载到这样的东西：

 url(chrome-extension://__MSG_@@extension_id__/chrome-extension://__MSG_@@extension_id__/images/ui-bg_flat_75_ffffff_40x100.png) 
url(chrome-extension://__MSG_@@extension_id__/chrome-extension://__MSG_@@extension_id__/images/ui-bg_highlight-soft_75_cccccc_1x100.png)

但我仍然得到错误：

Denying load of chrome-extension://mmoccjinakdjcmhjdjghhjnihbfkkgkp/chrome-extension://mmoccjinakdjcmhjdjghhjnihbfkkgkp/images/ui-bg_flat_75_ffffff_40x100.png. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
Denying load of chrome-extension://mmoccjinakdjcmhjdjghhjnihbfkkgkp/chrome-extension://mmoccjinakdjcmhjdjghhjnihbfkkgkp/images/ui-bg_highlight-soft_75_cccccc_1x100.png. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

图像在图像dir中，我可以在我创建的JQuery对话框中看到图标。

Answer 1

编辑1）

以下代码适用于所有与background \ extension相关的DOM和css

<强> 的manifest.json

简单的json结构，其中定义了所有权限

{
"name": "My extension",
"version": "1.0",
"permissions": [
    "http://*/*", "tabs", "https://*/*"
],
"browser_action": {
    "default_icon": "icon.jpg",
    "default_popup":"popup.html"
},
"manifest_version": 2
}

<强> popup.html

浏览器操作弹出式链接样式表

<html>
<head>
<link rel="stylesheet" href="styles.css"></link>
</head>
<body>
</body>
</html>

<强> styles.css的

使用url（）获取图片路径

body{
    width : 500px;
    height: 500px;
    background-image: url('img/icon.jpg');
}

让我知道它是否仍然失败

enter image description here

编辑2）

通过内容填充图像

解决方案a）

使用this converter，您可以将图片转换为base64字符串，然后将其用作

{background-image：url（data：image / png; base64，iVBORw ........};

解决方案b）

以下代码无效，因为

{
background-image:url(chrome.extension.getURL('img/icon.jpg'));
}

chrome.extension.getURL()未定义为css。

所以，我使用js注入背景图像\任何图像URL（因为它们有动态URL）

<强> 的manifest.json

简单的json结构，具有为内容脚本和css

定义的所有权限

{
"name": "My extension",
"version": "1.0",
"permissions": [
    "http://*/*", "tabs", "https://*/*"
],
 "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js":["content.js"],
      "css": ["styles.css"]
    }
  ],
"web_accessible_resources": [
    "img/icon.jpg"
],  
"manifest_version": 2
}

<强> content.js

作为一个简单的用例准备了一个div并添加了背景图像属性

var newdiv = document.createElement('div');
newdiv.setAttribute("id", "moot450");
document.body.appendChild(newdiv);
document.getElementById('moot450').style.backgroundImage = "url(" + chrome.extension.getURL('img/icon.jpg') + ")";

<强> styles.css的

注入另一个css来精炼注入的div

#moot450{
    position:absolute; 
    width:500px;
    height:500px;
    /*background-image:url(chrome-extension://faaligkhohdchiijdkcokpefpancidoo/img/icon.jpg);*/
}

<强>输出

注入后从Google Page获取的屏幕截图

enter image description here

如果您需要更多信息或失败，请告诉我。

Chrome Ext和JQuery资源必须列在web_accessible_resources清单密钥中，以便通过扩展程序以外的页面加载

1 个答案: