发表新帖
发表新帖

Chrome Ext and JQuery Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension

后端 未结
关注
1 1850
南笙
南笙 2021-01-23 23:43

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

相关标签:
1条回答
  • 误落风尘
    2021-01-24 00:15

    EDIT 1)

    The following code works for all background\extension related DOM and css

    manifest.json

    Simple 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.html

    Linked style sheet for Browser action Popup

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

    styles.css

    used url() for image path

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

    Let me know if it still fails

    enter image description here

    EDIT 2)

    For Injecting Images through content stuff

    Solution 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.json

    Simple 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.js

    As a trivial use case prepared a div and added background Image property

    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

    injected another css for refining injected div

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

    OUTPUT

    Screen shot taken from Google Page after injection

    enter image description here

    Let me know if you need more information or if it fails.

    0 讨论(0)
 看不清?
提交回复
热议问题