Google chrome extension 将jQuery插入当前选项卡页-chrome扩展

我不熟悉chrome扩展，所以我可能使用了错误的术语

我已经创建了一个扩展

manifest.json

{
  "name": "Run code in page",
    "version": "1.1",
    "manifest_version": 2,
    "content_scripts": [{
        "js": ["contentscript.js"],
        "matches": ["https://*/*"]
    }],
    "web_accessible_resources": ["*.js"],
    "default_locale": "en"
}

contentscript.js

function injectScript(script) {
    var s = document.createElement('script');
    s.src = chrome.extension.getURL(script);
    (document.head || document.documentElement).appendChild(s);
}

injectScript('script.js');
injectScript('otherscript.js');

console.log('script.js');

console.log('otherscript.js');

script.js

function injectScript(script) {
    var s = document.createElement('script');
    s.src = chrome.extension.getURL(script);
    (document.head || document.documentElement).appendChild(s);
}

injectScript('script.js');
injectScript('otherscript.js');

console.log('script.js');

console.log('otherscript.js');

otherscript.js

function injectScript(script) {
    var s = document.createElement('script');
    s.src = chrome.extension.getURL(script);
    (document.head || document.documentElement).appendChild(s);
}

injectScript('script.js');
injectScript('otherscript.js');

console.log('script.js');

console.log('otherscript.js');

这是可行的，我在输出中看到：

script.js
otherscript.js

一切都很好，两个脚本都在加载，我需要以相同的方式添加jQuery，以便可以从脚本访问jQuery

所以，我

injectScript('jquery.js');

但是现在我得到了以下错误

Denying load of chrome-extension://abdiolbenneaffeaedmfeeanlephlnoo/jquery.js. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

如果我看DOM，我会看到这个

<script src="chrome-extension://abdiolbenneaffeaedmfeeanlephlnoo/script.js"></script>
<script src="chrome-extension://abdiolbenneaffeaedmfeeanlephlnoo/otherscript.js"></script>
<script src="chrome-extension://abdiolbenneaffeaedmfeeanlephlnoo/jquery.js"></script>

---

如果要将jQuery注入扩展背景页面，请在

manifest.json

中执行以下操作：

示例：

"background": {
    "persistent": true,
    "scripts": ["jquery-3.3.1.min.js", "background.js"]
},

//Injects functions directly into the dom
function inject(fn) {
    var script = document.createElement('script');
    script.setAttribute("type", "application/javascript");
    script.textContent = '(' + fn + ')();';
    document.body.appendChild(script); // run the script
    document.body.removeChild(script); // clean up
}

inject(function(){
    // code that will be executed in the scope of the page
}

注意：确保jQuery是数组中的第一个，以便它在实际的

background.js

---

但是，在您的情况下，您没有在后台执行该代码，也没有向其注入任何内容，因为您将内容脚本误认为是您没有的背景页面

我建议你在做任何其他事情之前先阅读有关的官方文件

---

您还可以在

content.js

中编写类似这样的代码，以便从内容脚本直接注入DOM，从而避免在扩展名中使用多个不必要的

.js

文件

Content.js:

"background": {
    "persistent": true,
    "scripts": ["jquery-3.3.1.min.js", "background.js"]
},

//Injects functions directly into the dom
function inject(fn) {
    var script = document.createElement('script');
    script.setAttribute("type", "application/javascript");
    script.textContent = '(' + fn + ')();';
    document.body.appendChild(script); // run the script
    document.body.removeChild(script); // clean up
}

inject(function(){
    // code that will be executed in the scope of the page
}

---

你可以阅读更多关于这方面的内容。

这真的很奇怪。您可能已经检查了

jquery.js

文件是否在根文件夹中并且具有此名称，对吗

在我的例子中，我想在

content\u scripts>matches

中匹配的所有页面中添加jQuery，所以我做了如下操作：

...
"content_scripts": [
    {
        "matches": [
            "https://*/*"
        ],
        "js": [
            "assets/js/jquery.js",
            "assets/js/contentscript.js"
        ]
    }
],
...

---

因此，通过这种方式，我可以在

contentscript.js
文件中使用jQuery。
谢谢，我做了类似的事情，它对除jQuery之外的所有脚本都有效，但只是告诉它从CDN加载jQuery。我已经进行了三次检查，但我会再次检查。我倾向于通过F2重命名选项复制文件名。而且，如果我按照
无法下载错误
中的链接进行操作，我会得到文件。这太奇怪了！无法想象为什么会发生这种情况。