Как использовать jquery в действии страницы расширения google chrome background.js?

Я разрабатываю расширение Google Chrome «действие страницы». Мой манифест имеет:

...
"background": { "scripts": ["background.js"] },
...

В моем файле background.js у меня есть:

function doSomething() {
     alert("I was clicked!");
}

chrome.pageAction.onClicked.addListener(doSomething);

Это работает. Теперь в моей функции doSomething я хочу прочитать некоторые данные на текущей странице. Мне будет намного проще использовать jquery для чтения данных, чтобы я мог легко настроить точные данные, которые мне нужны. Как я могу включить jquery (предпочтительно из CDN Google), чтобы он был доступен для моей функции doSomething?


jquery google-chrome-extension content-script
person User    schedule 25.10.2012    source источник

Ответы (4)


arrow_upward
69
arrow_downward

Спецификация "background" в manifest.json должна указывать jquery.js, чтобы она загружалась до background.js:

...
"background": { "scripts": ["jquery.js","background.js"] },
...

Это должно сработать.
Помните, что файлы js загружаются в том порядке, в котором они указаны.

проверьте, загружен ли jquery.

в background.js

if (jQuery) {  
    // jQuery loaded
} else {
    // jQuery not loaded
}
person Jaydeep Solanki    schedule 02.01.2013
comment
stackoverflow.com/ вопросов/27542186/ Подскажите, пожалуйста, что я делаю не так? - person Deadcow; 18.12.2014
comment
это говорит вам, как загрузить JQuery с вашим фоновым скриптом, но обратите внимание на другие ответы... вы не можете получить доступ к DOM активной веб-страницы. Вы можете получить доступ к $(document), но это фоновая HTML-страница. - person PMorganCA; 15.04.2016
comment
Когда я использовал ваш тест в своем content_script (не в фоне), я получил бы исключение, говорящее, что jQuery не определен. Мне пришлось перейти на if (typeof jQuery !== 'undefined'), чтобы проверить, был ли определен jQuery. - person Chip Thien; 28.12.2016
comment
почему твой ответ не в топе? - person Anwar Hossain; 10.08.2019
comment
забавно то, что я также использовал jquery внутри background.js, но кажется, что $.get() не работает так, как ожидалось, как content.js - person gumuruh; 17.09.2019
comment
@gumuruh, конечно, их расположение отличается, фон генерируется в Chrome локально, а контент выполняется на текущей веб-странице. - person Taufik Nur Rahmanda; 25.07.2020

arrow_upward
10
arrow_downward

Я не знаю, идеальный ли это способ, но мне удалось заставить его работать с помощью этого вопроса: Расширения Google Chrome: как включить jQuery в программно внедренный сценарий контента?.

По-видимому, «фоновая» страница javascript не может получить доступ к DOM веб-страницы в браузере, поэтому загрузка jquery не имеет смысла в фоновом сценарии. Вместо этого у меня есть фоновый скрипт, который программно внедряет библиотеку jQuery, а затем контентный скрипт на текущую веб-страницу. Сценарий содержимого (в отличие от фонового сценария) может получать доступ к информации на веб-странице.

background.js:

function handleClick(tab) {
    chrome.tabs.executeScript(null, { file: "jquery-1.8.2.min.js" }, function() {
        chrome.tabs.executeScript(null, { file: "content.js" });
    });
}

chrome.pageAction.onClicked.addListener(handleClick);

content.js

var text = jQuery('h1').text();
alert('inside content! ' + text);
person User    schedule 25.10.2012
comment
вы по-прежнему можете использовать JQuery для выполнения вызовов Ajax и т. д. Нет необходимости использовать JQuery на background.js - person nullwriter; 07.05.2015

arrow_upward
1
arrow_downward

Насколько я понимаю, нет необходимости использовать background.js. Вместо этого вы можете иметь свой код в popup.js. Поэтому вам также не нужно будет ничего включать в файл манифеста.

Я бы предложил включить jQuery JS и ваш popup.js в ваш popup.html:

<script src="/js/jquery-1.8.1.min.js"></script>
<script src="/js/popup.js"></script>

Затем в popup.js вы сможете получить доступ к jQuery, поэтому ваш обработчик событий будет выглядеть так:

$(document).ready(function(){
 $('#anyelement').on('click', doSomething);

 function doSomething(){
   alert ('do something');
 };
})

Я не думаю, зачем вам CDN для jQuery, все файлы будут размещаться на компьютере пользователя.

Надеюсь, это поможет, Роб.

person robertp    schedule 25.10.2012
comment
хороший момент о том, что не нужен CDN. Что такое popup.html? Я не знаю, что это такое. Чтобы уточнить, onclick срабатывает, когда пользователь щелкает значок действия страницы. - person User; 25.10.2012
comment
popup.html — это html-контент, который «выскакивает» при нажатии на значок расширения в Chrome. - person robertp; 25.10.2012
comment
Хорошо, тогда попробуйте решение @Archer, приведенное выше, оно может оказаться для вас лучшим. - person robertp; 25.10.2012
comment
Это не разрешено в расширении Chrome. - person Shiva; 14.07.2021

arrow_upward
0
arrow_downward

В файле манифеста убедитесь, что вы ссылаетесь на свой локальный файл jquery.js (как бы он ни назывался) в блоке content_scripts:

"content_scripts": [{
    "js": ["jquery.js"]
}]

Это гарантирует, что он будет встроен в файл crx и будет доступен для других ваших сценариев.

person Reinstate Monica Cellio    schedule 25.10.2012