我有 Chrome 扩展，可将 jquery-1.8.3.min.js 和 jquery-ui.js 和 jquery-ui-base64.css 加载到内容脚本中。
我在内容脚本中使用它们NOT后台脚本。
我设置了配置（我认为）正确，但是当我在控制台中看到错误时
我可以很好地看到窗口中的图标，但我仍然在 Chrome 窗口中收到错误。
这是使用版本 23.0.1271.95 m 的 chrome 中的错误吗？
这是清单：
{
"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 中，我将所有图像 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.
图像位于图像目录中，我可以在我创建的 JQuery 对话框中看到图标。
EDIT 1)
以下代码适用于所有与背景\扩展相关的 DOM 和 css
清单.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
}
弹出窗口.html
浏览器操作弹出窗口的链接样式表
<html>
<head>
<link rel="stylesheet" href="styles.css"></link>
</head>
<body>
</body>
</html>
样式.css
使用 url() 作为图像路径
body{
width : 500px;
height: 500px;
background-image: url('img/icon.jpg');
}
如果仍然失败请告诉我
EDIT 2)
用于通过内容注入图像
解决方案一）
Using 这个转换器，您将图像转换为 base64 字符串，然后可以将它们用作
{ 背景图像: url(数据:image/png;base64,iVBORw ........ };
解决方案b)
以下代码将不起作用，因为
{
background-image:url(chrome.extension.getURL('img/icon.jpg'));
}
chrome.extension.getURL()对于 css 来说是未定义的。
所以，我使用js来注入背景图像\任何图像URL（因为它们有动态URL）
清单.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
}
内容.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') + ")";
样式.css
注入另一个 css 来精炼注入的 div
#moot450{
position:absolute;
width:500px;
height:500px;
/*background-image:url(chrome-extension://faaligkhohdchiijdkcokpefpancidoo/img/icon.jpg);*/
}
OUTPUT
注入后从 Google Page 截取的屏幕截图
如果您需要更多信息或者失败，请告诉我。