В большинстве случаев расширение Хрома, являясь также продолжением идеи пользовательских скриптов, ориентировано на анализ контента страницы и его редактирование. Популярный движок jQuery предоставляет для этого массу удобных инструментов. Давайте расширим наш плагин, снабдив его дополнительными возможностями. Как и прежде, я буду экспериментировать над собственным сайтом и допишу в конец каждой страницы фразу «Тут был Серёга». Ваш код, конечно, будет более полезным.
Во-первых, нам нужно добавить еще две части в секцию content_scripts. Первая будет подгружать файл jquery.js на все страницы сайта до того, как загрузиться контент. Вторя, будет подгружать и выполнять файл second.js после загрузки контента. Сам файл second.js будет оставлять подпись на странице. Файл манифеста измениться, и будет выглядеть следующим образом:
{
"content_scripts": [
{
"matches": ["http://*.macrodmin.ru/?p=*"],
"js": ["first.js"],
"run_at":"document_end"
},
{
"matches": ["http://*.macrodmin.ru/*"],
"js": ["jquery.js"],
"run_at":"document_start"
},
{
"matches": ["http://*.macrodmin.ru/*"],
"js": ["second.js"],
"run_at":"document_end"
}
],
"icons": {
"128": "i128.png",
"48":"i48.png"
},
"description": "Мой первый плагин для Chrome",
"name": "My Plagin",
"version": "2.0.6",
"update_url": "http://macrodmin.ru/download/myplagin_update.xml"
}
Файл jquery.js вам следует скачать с официального сайта [3] и переименовать в соответствии с тем, как вы назвали его в файле манифеста. Положите этот файл в папку плагина. Также создайте в паке файл second.js (помним про кодировку) и вписываем в него такую строку:
$('body').append('<div id="myplagindiv">Тут был Серёга</div>')
Перезагружаем распакованный плагин в браузере и смотрим результат. Коварная надпись появилась в самом низу слева. Она на столько не приметна, что у меня появилось желание ее немного выделить. Для этого я добавлю в папку плагина файл стилей css с таким содержимым:
#myplagindiv{
color:white;
text-align: center;
font-weight: bold;
}
А в манифест добавлю опцию css в ту часть секции content_scripts, которая подгружает движок jQuery до загрузки контента:
{
"content_scripts": [
{
"matches": ["http://*.macrodmin.ru/?p=*"],
"js": ["first.js"],
"run_at":"document_end"
},
{
"matches": ["http://*.macrodmin.ru/*"],
"js": ["jquery.js"],
"css": ["second.css"],
"run_at":"document_start"
},
{
"matches": ["http://*.macrodmin.ru/*"],
"js": ["second.js"],
"run_at":"document_end"
}
],
"icons": {
"128": "i128.png",
"48":"i48.png"
},
"description": "Мой первый плагин для Chrome",
"name": "My Plagin",
"version": "2.0.7",
"update_url": "http://macrodmin.ru/download/myplagin_update.xml"
}
Перезагружаем распакованный плагин и проверяем его работу. Если все устраивает, можно упаковывать новую версию плагина. Как – Вы уже знаете.
Список источников:
3 – http://jquery.com/
2 комментария к “Создание расширения для Chrome. Часть VI — Внедрение в контент страницы. Использование движка jQuery.”
Василий - 17 июля, 2018
здравствуйте,
каким способом можно с вами связаться?
admin - 29 июля, 2018
Здравствуйте, через форму связи с администратором домена — https://whois.atex.ru/?c=macrodmin.ru