必须在web_accessible_resources清单键中列出Chrome Ext和JQuery资源，以便通过扩展名之外的页面加载

本文介绍了必须在web_accessible_resources清单键中列出Chrome Ext和JQuery资源，以便通过扩展名之外的页面加载的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我有Chrome扩展程序，它将jquery-1.8.3.min.js和jquery-ui.js和jquery-ui-base64.css加载到内容脚本中。 i在内容脚本中使用它们后台脚本。i设置配置（我认为）是正确的，但是当我在控制台中看到错误时，i可以在窗口中看到图标，但我仍然在Chrome窗口中收到错误。 是使用版本23.0.1271.95 m的chrome im中的错误？ 这是显而易见的： {名称：从内容到背景的示例通信，description：这是模拟从内容到背景的通信的示例，manifest_version：2，版本：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>，标签] } url（chrome）在jquery-ui-base64.css中，我将所有的imags url加载到这样的东西上： -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） 拒绝chrome扩展的加载：// mmoccjinakdjcmhjdjghhjnihbfkkgkp / chrome-extension：/ /mmoccjinakdjcmhjdjghhjnihbfkkgkp/images/ui-bg_flat_75_ffffff_40x100.png。必须在web_accessible_resources清单键中列出资源，才能通过扩展名外的页面加载资源。 拒绝Chrome扩展的加载：// mmoccjinakdjcmhjdjghhjnihbfkkgkp / chrome-extension：//mmoccjinakdjcmhjdjghhjnihbfkkgkp/images/ui-bg_highlight-soft_75_cccccc_1x100.png。必须在web_accessible_resources清单键中列出资源，才能通过扩展名外的页面加载资源。 这些图像位于图像目录中，我可以在创建的JQuery对话框中看到图标。 以下代码适用于所有与background \扩展相关的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 } p> < html> < head> < link rel =stylesheethref =styles.css>< / link> < / head> < body> < / body> < / html> styles.css 用于图像路径的url（） body { width：500px; height：500px; background-image：url（'img / icon.jpg'）; } 让我知道它是否仍然失败 编辑2） 通过内容注入图片 解决方案a） 使用此转换器，将图像转换为base64字符串，您可以将它们用作 解决方案b） 以下代码将无法使用，因为 { background-image：url（chrome.extension.getURL（'img / icon.jpg'））; } chrome.extension.getURL（）对于css是未定义的。 使用js来注入背景图片或任何图片的URL（因为他们有动态URL） $ b manifest.json $ b 简单的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 $ b 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);*/ } 输出 > 让我知道您是否需要更多信息或失败。 I have Chrome extension that loads jquery-1.8.3.min.js and jquery-ui.js and jquery-ui-base64.css into the content script .i use them in the content script NOT background script .i set the configuration ( i think ) right but when i see in the console i getting errors i can see the icons in the windows just fine , but i still getting the errors in the Chrome window.is it a bug in chrome im using version 23.0.1271.95 m? this is the manifist :{"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" ]}in the jquery-ui-base64.css i changed all the imags url load to something like this : 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)but still im getting the errors: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.the images are there in the images dir and i can see the icons in the JQuery dialog i created. 解决方案 EDIT 1)The following code works for all background\extension related DOM and cssmanifest.jsonSimple json structure with all permissions defined{"name": "My extension","version": "1.0","permissions": [ "http://*/*", "tabs", "https://*/*"],"browser_action": { "default_icon": "icon.jpg", "default_popup":"popup.html"},"manifest_version": 2}popup.htmlLinked style sheet for Browser action Popup<html><head><link rel="stylesheet" href="styles.css"></link></head><body></body></html>styles.cssused url() for image pathbody{ width : 500px; height: 500px; background-image: url('img/icon.jpg');}Let me know if it still fails EDIT 2)For Injecting Images through content stuffSolution a) Using this converter, you convert your image to base64 strings and you can use them as { background-image: url(data:image/png;base64,iVBORw ........ };Solution b)The following code will not work because{background-image:url(chrome.extension.getURL('img/icon.jpg'));}chrome.extension.getURL() is undefined for css.So, i used js for injection of background-images\any image URL's(Because they have dynamic URL's)manifest.jsonSimple json structure with all permissions defined for content scripts and 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.jsAs a trivial use case prepared a div and added background Image propertyvar 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.cssinjected another css for refining injected div#moot450{ position:absolute; width:500px; height:500px; /*background-image:url(chrome-extension://faaligkhohdchiijdkcokpefpancidoo/img/icon.jpg);*/}OUTPUTScreen shot taken from Google Page after injectionLet me know if you need more information or if it fails. 这篇关于必须在web_accessible_resources清单键中列出Chrome Ext和JQuery资源，以便通过扩展名之外的页面加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！