时间戳

首页 > 解决方案 > 将 jQuery 注入当前标签页 - chrome 扩展

google-chrome-extension - 将 jQuery 注入当前标签页 - chrome 扩展

问题描述

我是 chrome 扩展的新手，所以我可能使用了错误的术语。

我创建了一个扩展

清单.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"
}

内容脚本.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');

脚本.js

console.log('script.js');

其他脚本.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>

如果我将 chrome-extension://abdiolbenneaffeaedmfeeanlephlnoo/jquery.js 放入 URL 中，我可以访问它。

- 编辑

如果我在外部加载 jquery，它将加载，所以我想我可以这样做。例如

function injectExternalScript(script) {
    var s = document.createElement('script');
    s.src = script;
    (document.head || document.documentElement).appendChild(s);
}

injectExternalScript('https://code.jquery.com/jquery-3.3.1.min.js');

标签： google-chrome-extension

解决方案

这真的很奇怪。您可能检查了jquery.js文件是否在根文件夹中并使用此名称，对吗？

好吧，就我而言，我想在所有匹配的页面中添加 jQuery，content_scripts > matches所以我只是做了这样的事情：

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

所以通过这种方式我可以在contentscript.js文件中使用 jQuery。

推荐阅读