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

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

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

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

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

chrome.pageAction.onClicked.addListener(doSomething);

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

Ответ 1

Спецификация "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
}

Ответ 2

Я не знаю, является ли это идеальным способом, но я смог заставить его работать с помощью этого вопроса: расширения 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);

Ответ 3

Я понимаю, что нет необходимости использовать 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, поэтому ваш eventHandler будет выглядеть так:

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

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

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

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

Ответ 4

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

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

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