Создание расширения для Chrome. Часть II – Добавление js файлов.

И так, теперь Вас можно поздравить с первым работоспособным плагином, пусть и бесполезным. Сейчас мы научим его делать что-нибудь «нужное».

А для этого необходимо добавить в наш файл манифеста еще одну секцию content_scripts и создать еще один файлик java script c более-менее осмысленным кодом. Файл манифеста будет выглядеть следующим образом:

{
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["first.js"],
"run_at":"document_end"
}
],
"description": "Мой первый плагин для Chrome",
"name": "My Plagin",
"version": "0.1.2"
}

 

Секция content_script является массивом объектов, на это указывают квадратные скобки после названия секции. Каждый объект в этом массиве заключен в фигурные скобки и они разделены между собой запятыми. В нашем примере этого не видно, так как массив секции содержит всего один объект. Каждый объект содержит три стандартных опции, две из которых также являются массивами. В общем случае секция будет иметь такой вид:

"content_scripts": [
{
"matches": ["…","…",…,"…"],
"js": ["…","…",…,"…"],
"run_at":"…"
},
{
"matches": ["…","…",…,"…"],
"js": ["…","…",…,"…"],
"run_at":"…"
},
…,
{
"matches": ["…","…",…,"…"],
"js": ["…","…",…,"…"],
"run_at":"…"
}
]

Первая опция имеет название matches, и она содержит перечень особых (и это важно) регулярных выражений, которые указывают на страницах с какими адресами необходимо активировать скрипты плагина. Вторая опция js содержит список файлов java script из директории плагина. Они будут выполняться на указанных в matches страницах. И наконец, секция run_at, единственная опция не массив. В ней указано, когда нужно выполнить скрипты из секции js – перед загрузкой контента страницы, во время или после. Значение document_end этой опции указывает на то, что скрипты будут выполнены после окончания загрузки страницы.

В развитие темы опции run_at могу сказать, что это мощный инструмент в увеличении производительности плагина. Каждый файл Вашего плагина, будь то скрипт или файл стилей, должен подгружаться в нужное время. Так, например, скрипты работающие с готовым документом не могут быть загружены раньше контента, так как это приведет в лучшем случае к бездействию кода, в худшем – к ошибкам и блокированию страницы. А файлы js-движков (подобные jQuery) и файлы стилей лучше загружать до контента страницы, что увеличивает производительность и позволяет избавиться от лишних конструкций в основных js-файлах.

Но вернемся к нашему плагину. Файл манифеста готов, но не хватает указанного в нем файла first.js. Создайте его в этой же директории, где лежит ваш файл манифеста. Код его будет довольно прост [2], он приведен ниже. Главное не забывайте про кодировку файла.


var tit = document.title;
var c = 0;
//
function writetitle() {
document.title = tit.substring(0,c);
if(c==tit.length) {
c = 0;setTimeout("writetitle()", 3000)
} else {
c++;
setTimeout("writetitle()", 200)
}
}
writetitle()

 

После того, как сохраните файл, вернитесь в браузер и откройте вкладку с расширениями. Слева от иконки Вашего плагина будет серенький треугольник. Нажмите его, чтобы увидеть дополнительные возможности по работе с плагином (рис. 3). Нажмите ссылку Перезагрузить и откройте какой-либо знакомый вам сайт. При открытии сайта обратите внимание на заголовок вкладки сайта.

Рисунок 3 – Дополнительные возможности по работе с плагинами в режиме разработчика

Теперь плагин выполняет «полезную» работу и можно подумать об эстетичности…

Продолжение следует…

Список источников:

2 — http://htmlweb.ru/java/example/modify_title.php