Внедрить jQuery в текущую вкладку - расширение Chrome

Question

Я новичок в расширениях 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');

script.js

console.log('script.js');

otherscript.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: //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');

Answer 1

Это действительно странно.Вы, наверное, проверили, находится ли файл jquery.js в корневой папке и с таким именем, верно?

Ну, в моем случае я хотел добавить jQuery на все страницы, которые совпадают в content_scripts > matches, поэтому я просто сделалчто-то вроде этого:

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

Таким образом, я могу использовать jQuery в contentscript.js файле.

Answer 2

Если вы хотите внедрить jQuery в фоновую страницу расширений, сделайте внутри manifest.json примерно так:

Пример:

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

Примечание : убедитесь, что jQuery находится первым в массиве, поэтому он загружается до фактического background.js

---

Но, в вашем случае вы не выполняете этот код вфон, и вы ничего не добавляете в него, поскольку вы ошибочно принимаете скрипт контента для фоновой страницы, которой у вас нет .

Я рекомендую вам сначала прочитать официальную документацию относительно Архитектура расширений Chrome прежде всего.

---

Вы также можете написать такой код в своем content.js, который будет вставлен непосредственно в DOM из вашего скрипта контента, чтобы вы могли избежать использования нескольких ненужных.js файлов с вашим расширением.

Content.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
}

Подробнее об этом можно прочитать здесь .