Программирование / Заочники / Высокоуровневые методы / JavsScript - Урок 3
.pdfУрок 3: Создание плагинов для Google Chrome
Основная цель урока.
1.Научиться создавать плагины (расширения) для Google Chrome
2.Научиться использовать AJAX-запросы
Учебное задание 3.
Google-плагин, уведомляющий о новых событиях(новостях) на сайте.
Технология выполнения учебного задания 3.
Шаг 1.Скопируйте с сервера папку basic_chrome_plugin, в ней содержатся все необходимые файлы для создания своего плагина. Рассмотрим каждый из них:
Файл |
Назначение |
|
|
manifest.json |
Файл манифеста. Один из самых важных файлов, содержит |
|
общую информацию о всех компонентах плагина, |
|
разрешениях, иконках и.т.д. |
|
|
background.js |
Фоновый скрипт, исполняется в фоновом режиме вне |
|
зависимости от загруженных пользователем страниц. |
|
Скрипт исполняется только 1 раз, для периодического |
|
исполнения скрипта (по таймеру) можно использовать |
|
функцию setTimeout. Ссылка на этот файл должна |
|
содержаться в manifest.json. |
|
|
inject.js |
Скрипт, который будет внедряться на каждую загруженную |
|
пользователем страницу. Может осуществлять подмену |
|
контента. |
|
Ссылка на этот файл должна содержаться в manifest.json. |
|
|
icon.png |
Иконка, которая будет отображаться на панели инструментов |
|
Google Chrome после установки плагина. |
|
Ссылка на этот файл должна содержаться в manifest.json. |
|
|
popup.html |
Окно, которое будет отображаться при щелчке на иконку |
|
плагина. |
|
Ссылка на этот файл должна содержаться в manifest.json. |
|
|
popup.js |
Присоединённый скрипт к popup.html, будет исполняться при |
|
щелчке на иконку плагина. |
|
|
Шаг 2. Установите плагин в Google Chrome. Для этого откройте Google Chrome и
перейдите в Настройки –> Расширения. Поставьте галочку « Режим разработчика»,
если она ещё не поставлена. Нажмите « Установить распакованное расширение» и
укажите папку с файлами расширения.
Проверьте работоспособность расширения.
Шаг 3. Создайте на своём хостинге простой php-скрипт, возвращающий текст некоторой новости при передачи параметра action=get и установки текста новости при передачи параметра action=set&text=Некоторый новый текст.
Т.е. это должно выглядеть следующим образом (для теста можно выполнять в адресной строке браузера).
GET-запрос |
Результат |
|
Пояснение |
|
|
|
|
|
|
|
|
|
|||
http://ваш_домен/news.php?action=get |
“” |
|
Первый вызов. |
Возвращает |
|||
|
|
|
пустую строку, т.к. текст |
||||
|
|
|
новости ещё не установлен. |
||||
|
|
|
|
|
|
||
http://ваш_домен/news.php?action=set&t |
“ОК” |
|
Установка |
текста |
новости. |
||
ext=”В субботу будут дополнительные |
|
|
Переданный |
|
|
текст |
|
пары по микроэкономике с 8-00” |
|
|
сохраняется |
в |
файле |
на |
|
|
|
|
сервере. |
|
|
Результат |
|
|
|
|
выполнения |
– |
сообщение |
о |
|
|
|
|
том, что запись в файл |
||||
|
|
|
прошла успешно. |
|
|
||
|
|
|
|
|
|
||
http://ваш_домен/news.php?action=get |
В субботу |
будут |
Возвращает |
текст |
новости, |
||
|
дополнительные |
сохранённый в файле |
|
||||
|
пары |
по |
|
|
|
|
|
|
микроэкономике с |
|
|
|
|
|
|
|
8-00 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Реализовать максимально просто через запись в файл (т.е. 1 файл – 1 новость и новость может быть только одна).
Шаг 4. Добавим скрипт в файл background.js. Скрипт должен проверять новость на сайте, сохранять текст новости в некоторой переменной и, если новость изменилась,
добавлять к иконке плагина надпись “New” (листинг 1).
// переменная для сохранения новостей window.newsText = "";
function checkNews()
{
// ajax request
var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function()
{
if (xhr.readyState == 4)
{
// если новость обновилась и она не пустая
if (xhr.responseText != newsText && xhr.responseText)
{
// обновляем перменную window.newsText = xhr.responseText;
// устанавливаем надпись на иконке chrome.browserAction.setBadgeText({text: "New"});
}
}
}
xhr.open("GET", "http://ВАШ_ДОМЕН/news.php?action=get", true); xhr.send();
// вызываем функцию раз в 10 сек setTimeout(func, 10000);
}
checkNews();
Листинг 1. Скрипт проверки новостей (background.js).
Шаг 5. Далее, нам нужно создать HTML-страничку, которая будет отображать новость (popup.html) и написать скрипт(popup.js), который будет получать текст новости из переменной newsText и записывать его в один из тегов popup.html.
Создадим простой HTML-файл для отображения новости (листинг 2).
<!DOCTYPE html>
<html>
<head> <title>Popup</title>
<script src="popup.js"></script> </head>
<body>
<div id="textNews" style="width:500px;height:250px" >новость будет тут</div> </body>
</html>
Листинг 2. HTML-код всплывающего окна плагина (popup.html).
Шаг 6. Напишем код в скрипте popup.js, чтобы вместо текста “новость будет тут” отображается текст настоящей новости с сервера (листинг 3). В листинге мы используем обработчик события DOMContentLoaded, т.к. если мы сразу напишем document.getElementById("textNews"), то получим undefined, т.к. такой элемент ещё
не был создан внутри страницы (т.е. мы должны подождать, когда полностью DOM-
структура страницы будет загружена и только после этого выполнять скрипт).
// добавляем обработчик события "DOM-контент страницы загружен" document.addEventListener("DOMContentLoaded", function()
{
var x = document.getElementById("textNews");
//chrome.extension.getBackgroundPage() вернёт объект window фоновой страницы
// именно там мы создали свойство newsText
x.innerHTML = chrome.extension.getBackgroundPage().newsText;
// очищаем текст News с иконки (т.к. новость просмотрена) chrome.browserAction.setBadgeText({text:""});
}, false);
Листинг 3. Скрипт отображения текста новости на popup.html (popup.js).
Шаг 7. Обновите (удалите старый/загрузите новый) плагин. Проверьте работоспособность плагина. Измените новость на сервере через action=set.
Самостоятельное задание 3.
Создать плагин, который блокирует доступ к списку сайтов заданных на сервере.
См. подсказу в файле inject.js.
Доп. задание (+4 балла).
Это задание можно делать вместо основного самостоятельного задания 3.
Создать плагин, который блокирует доступ к сайтам, на которых встречаются ключевые слова, заданные на сервере. При попытке доступа к такому сайту на сервер отправляется уведомление (и сохраняться в текстовом файле).