Это вторая часть серии «Создание расширений Chrome с нуля». В этой части мы продолжим с того места, на котором остановились в предыдущей части.
В качестве краткого резюме, в части 1 мы рассмотрели
- Файл дескриптора расширения — manifest.json
- Как определить значок по умолчанию для расширения Chrome, которое появляется на панели инструментов браузера.
- Как установить расширение Chrome с локального жесткого диска.
У нашего расширения, которого мы назвали Mr0, только что было имя и лицо. Мы использовали файл manifest.json, чтобы определить значок, который будет использоваться в качестве значка по умолчанию на панели инструментов браузера. Но вы, возможно, помните, что есть один важный компонент, о котором я говорил в предыдущем посте, но не обсуждал — фоновая страница расширения.
Краткое введение
Если файл manifest.json является сердцем расширения, тогда фоновую страницу можно метко назвать мозгом расширения. Это как Дон, который сидит на заднем плане и контролирует своих миньонов. Причина, по которой я не обсуждал это в предыдущем посте, заключалась в том, что, несмотря на его критическую роль в расширении, расширение не обязательно должно иметь фоновую страницу. Расширения — довольно простые существа. Им не нужно много думать, чтобы жить. Следовательно, прежде чем мы продолжим разговор и поговорим о фоновой странице расширения, давайте рассмотрим еще один аспект пользовательского интерфейса расширения — всплывающее окно, которое появляется при нажатии на расширение.
Всплывающая страница
Большинство расширений отображаются всплывающими при нажатии на их значок на панели инструментов браузера. Продолжая нашу аналогию, мы можем с уверенностью предположить, что всплывающее окно, которое появляется при нажатии на значок расширения, является телом расширения. Неудивительно, что всплывающее окно — не что иное, как очередная обычная HTML-страница. И так же, как и другие HTML-страницы, вы можете написать обычный CSS, разметку и JavaScript. Например, если вам нужно использовать jQuery, все, что вам нужно сделать, это сохранить файл jquery.js в вашей папке расширений и внутри вашего всплывающего окна, вы можете ссылаться на этот файл относительно.
Чтобы использовать всплывающую страницу, т. Е. Как страницу, которая появляется, когда пользователь нажимает на значок расширения на панели инструментов broswer, необходимо указать имя этой html-страницы в файле manifest.json. Я собираюсь создать очень простой html-файл с именем popup.html, в котором будет привет мир. Ниже вы можете увидеть файл манифеста.
{
"name": "Mr0",
"version": "1.0",
"browser_action": {
"default_icon": "images/icon19.jpg",
"default_popup": "popup.html"
}
}
Файл manifest.json не сильно изменился. Единственное новое дополнение — это список свойств browser_action. Мы добавили свойство с именем default_popup и указали страницу, которую мы хотели загрузить, когда пользователь нажимает на значок расширения.
Ниже приведен код нашей всплывающей страницы. Как видите, я использовал библиотеку jquery таким же старомодным способом.
<script src="jquery.js" type="text/javascript"> </script> Hello World
Сохраните эти изменения. Как только вы закончите, нажмите на значок браузера, и вы увидите аккуратное маленькое всплывающее окно рядом с расширением, которое говорит привет мир. Если всплывающее окно не появляется, это может быть потому, что браузер не принял изменения. Вы можете попробовать щелкнуть еще раз, как только вы перезагрузите расширение из меню расширений.
Счетчик ошибочных кликов
Разве это не сладко! И разве это не было удивительно просто? Но мы все знаем, что веб-страницы никогда не станут по-настоящему крутыми, если мы не введем в них немного javascript. Скажем так, мы хотим создать какой-то счетчик. Тот, который сообщает нам, сколько раз вы нажимали на кнопку внутри расширения.
Вот что ты напишешь (сначала)
<script src="jquery.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function(){
var counter = 0;
$('button.count').bind('click',function(){
$('.counter-status').html(counter++);
});
});
</script>
<button class="count">Show Count</button>
<div class="counter-status">
</div>
Теперь, если вы нажмете на значок браузера, всплывающее окно покажет вам кнопку, которая при нажатии увеличивает значение счетчика. Теперь щелкните где-нибудь еще на экране, чтобы всплывающее окно исчезло, а затем снова щелкните значок. Теперь вы видите то же самое всплывающее окно, но обратите внимание, что счетчик снова начинает считать с 0. Но разве мы не увеличивали coutner, когда мы нажимали на кнопку ранее?
Да, конечно, мы сделали. Однако, как оказалось, всякий раз, когда вы нажимаете на значок расширения, всплывающее окно перезагружается. Это означает, что счетчик устанавливается в 0 каждый раз, когда мы нажимаем на значок браузера, потому что мы объявляем переменный счетчик при загрузке страницы.
Итак, что мы делаем, чтобы поддерживать счетчик кликов? Нам нужно найти способ поддерживать состояние несколькими щелчками на значке расширения. Нам нужно хранить наши переменные в месте, которое имеет более длительный срок службы по сравнению со всплывающей страницей. Это напоминает вам о http сессии? Что ж, если вы догадались, что мы собираемся сохранить значение счетчика в сеансе http, вы совершенно не правы. Это потому, что у нас нет сервера! Но тогда вот, где справочные страницы приходят на помощь.
Фоновые страницы
расширений Фоновая страница расширений, как я кратко обсуждал ранее, похожа на Дона, который сидит на заднем плане и может отслеживать своих миньонов. Она больше похожа на страницу области видимости браузера, т.е. она жива в фоновом режиме до тех пор, пока расширение активно в браузере. Однако вы должны создавать фоновые страницы для расширений только тогда, когда это необходимо, поскольку фоновая страница — это не что иное, как страница, она увеличивает объем памяти браузера.
Возвращаясь к созданию нашего расширения, чтобы сохранить состояние счетчика при выходе пользователя из всплывающего окна, вам нужно будет сохранить текущее состояние переменной внутри фоновой страницы. Здесь вступают в игру API расширения Chrome. Когда вы находитесь на страницах, которые являются частью расширения Chrome, у вас есть доступ к набору функций JavaScript, которые позволяют вам делать много интересных вещей. Одним из них является возможность общения между разными страницами одного и того же расширения. В нашем случае нам нужен канал связи между всплывающей страницей и фоновой страницей.
Вот что я хочу сделать. Когда пользователь нажимает на значок расширения
Проверьте, имеет ли фоновая страница предопределенное значение для счетчика. Если да, сохраните значение счетчика на всплывающей странице. Каждый раз, когда пользователь увеличивает счетчик, сохраняйте его значение на фоновой странице.
Передача дополнительного сообщения
Чтобы отправлять и получать сообщения в асинхронном режиме между страницами и сценариями, а также между фоновыми страницами и другими сценариями, Chrome имеет предопределенный набор функций.
Отправить сообщение на вкладку
chrome.tabs.sendRequest(tab.id, requestJSON, function(response) {
//console.log(response);
});
Отправить сообщение на фоновую страницу
chrome.extension.sendRequest(requestJSON, function(response) {
//console.log(response');
});
Получить сообщение с вкладки или фоновой страницы
chrome.extension.onRequest.addListener(
function(request, sender, sendResponse) {
//console.log(sender.tab ?"from a content script:" + sender.tab.url :"from the extension");
//console.log(request.sender?'Request from : ' + request.sender:'unknown');
//sendResponse(responseJSON);
});
Как видите, есть три функции. Первый используется для отправки запроса из любого скрипта расширения (мы скоро поговорим об этом подробнее), например, с одной всплывающей страницы на другой скрипт расширения на вкладке.
Второй позволяет любому сценарию расширения отправлять запрос на фоновую страницу, которая фактически является главной страницей для расширения.
Следующая функция — только слушатель запроса. Синтаксис один и тот же, независимо от того, поступает ли запрос от сценария на вкладке или от расширения.
Как вы можете ясно увидеть в комментариях, написанных внутри каждой из этих функций, вы можете отправить ответ вызывающей стороне через параметр функции sendRespose и передать любую информацию, которая могла быть запрошена вызывающей стороной.
В нашем примере мы собираемся использовать эти функции для хранения значения переменной на фоновой странице, а затем извлекать сохраненное значение всякий раз, когда пользователь нажимает на значок браузера расширения, прежде чем мы увеличиваем его локально.
Счетчик правильных кликов
Прежде чем мы начнем писать код, нам сначала нужно создать фоновую страницу и сохранить ее в папке расширений. И затем нам нужно указать эту страницу для использования в качестве фоновой страницы в файле manifest.json.
Я создал страницу с именем background.html и поместил ее в папку chrome_ext. Вот как выглядит мой файл manifest.json.
manifest.json
{
"name": "Mr0",
"version": "1.0",
"background_page": "background.html",
"browser_action": {
"default_icon": "images/icon19.jpg",
"default_popup": "popup.html"
}
}
Затем я изменил код JavaScript в popup.html, чтобы он выглядел следующим образом.
popup.html
$(function(){
chrome.extension.sendRequest({action:'getCounter'}, function(response) {
var counter = response.counterValue?response.counterValue:0;
$('button.count').bind('click',function(){
$('.counter-status').html(counter++);
chrome.extension.sendRequest({action:'setCounter', counterValue:counter}, function(response) {
console.log('response');
});
});
});
});
Затем на странице background.html следующий код сделает эту работу за вас.
background.html
<script type="text/javascript">
var clickCounter = 0;
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
if(request.action=='getCounter'){
sendResponse({counterValue:clickCounter});
}
else{
if (request.action=='setCounter'){
clickCounter = request.counterValue;
sendResponse({});
}
}
});
</script>
Обратите внимание, что я поместил скрипт фоновой страницы внутри тега script. Это потому, что, как я сказал ранее, фоновая страница также похожа на обычную HTML-страницу, за исключением того факта, что она живет до тех пор, пока расширение активно и активно в браузере.
Now, all you need to do is to reload your browser and when you click on the icon and click the counter, and repeat the same, the counter value will continue from the point where you previously left off.
In the next part of the series, we will take things a step further and try to make an extension that does more than just count clicks. Stay Tuned!
From http://mycodefixes.blogspot.com/2012/02/building-chrome-extensions-from-scratch_27.html