Создание расширения для Chrome. Часть VI — Внедрение в контент страницы. Использование движка jQuery.

В большинстве случаев расширение Хрома, являясь также продолжением идеи пользовательских скриптов, ориентировано на анализ контента страницы и его редактирование.  Популярный движок 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/

admin

2 комментария к “Создание расширения для Chrome. Часть VI — Внедрение в контент страницы. Использование движка jQuery.”

Вы можетеоставить отзыв или Обратную ссылку эта запись.
  1. Василий - 17 июля, 2018

    здравствуйте,
    каким способом можно с вами связаться?

Нужно войти чтобы оставить комментарий.