1

我有将 jquery-1.8.3.min.js 和 jquery-ui.js 和 jquery-ui-base64.css 加载到内容脚本中的 Chrome 扩展程序。
我在内容脚本而不是后台脚本中使用它们。
我设置了配置（我认为）正确但是当我在控制台中看到我收到错误时，我可以在窗口中看到图标很好，但我仍然在 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.

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

4

1 回答 1

1

编辑 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
}

popup.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');
}

让我知道它是否仍然失败

在此处输入图像描述

编辑 2)

通过内容注入图像

解决方案一）

使用此转换器，您可以将图像转换为 base64 字符串，并且可以将它们用作

{ 背景图像：url（数据：图像/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 并添加了背景 Image 属性

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

注入另一个用于精炼注入的 div 的 css

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

输出

注入后从谷歌页面截取的屏幕截图

在此处输入图像描述

让我知道您是否需要更多信息或它是否失败。

于 2012-12-05T08:48:55.717 回答