Предпоставки:
- Основни познания по Javascript
- Браузър Chrome
Изявление на проблема:
Понякога прекарваме часове, опитвайки се да търсим вIMDB оценки, времетраене и сюжети на различни филми в списък чрез ръчно търсене в Гугъл.
И това е сериозен проблем, когато
- Вече е неделя, 23 часа.
- Имаш само 2 златни часа, преди да се тръшнеш в леглото си.
Трябва да сте абсолютно сигурни, че не си губите времето в гледане на някой куц филм.
Та какво правиш? Инсталирайте разширението IMDb Ratings on hover.
Как работи разширението?
- При навигиране до която и да е уеб страница фоновият скрипт слуша събитие за щракване върху разширението.
- След щракване фоновият скрипт изпраща съобщение до скрипта за съдържание.
- След това скриптът за съдържание слуша събитието при задържане.
- Когато потребителят постави мишката за 250 ms (пример) върху произволен текст, след това вземете текста на това място и направете извикване на API.
- При получаване на успешен отговор, формирайте шаблон (HTML) от него и го попълнете в потребителския интерфейс.
Е, това е твърде много информация. Знам! Нека да го разбием и да го видим в действие. Това ще бъде серия от 2 части.
ЧАСТ-I
Нека да започнем с внедряването.
Стъпка 1: Конструиране на manifest.json
Имоти, на които да обърнете внимание:
- content_scripts:Изпълнява скриптовете, посочени в това свойство, когато URL адресът на браузъра съвпадне с URL адреси, посочени под „съвпадения“ [ред 7]. Тъй като имам нужда това да е налично за всички URL адреси, използвам ‹all_urls› като стойност.
- web_accessible_resources:За зареждане на всяко съдържание чрез скрипта.
- фон:Скрипт, който се изпълнява във фонов режим на браузъра при всяко отваряне на браузъра.
Стъпка 2: Конструиране на background.js за слушане на щракване върху разширението.
Запомнете: фоновите скриптове нямат достъп до DOM, така че трябва да помолите content_scriptsза помощ.
Не искаме нашия скрипт content.js да е активен във всички раздели, до които потребителят навигира. Така че ще изчакаме потребителят да посочи, че иска нашето разширение да е активно. Ние правим това, като слушаме събитие за щракване в background.js. Всеки път, когато потребителят щракне върху разширението, ние изпращаме съобщение до скрипта за съдържание, че потребителят е щракнал върху него.
Прислушвателят на щракване тук приема обратно извикване (buttonClicked) с аргумент (tab), който дава свойствата на текущия раздел. Изпращаме обратно съобщение към content.js чрез sendMessageAPI [ред 8] и предаваме идентификатора и съобщението на раздела. Съобщението има тип, което помага да се идентифицира типа на съобщението.
Запомнете: content.js няма достъп до щраквания в браузъра или щраквания върху раздели, а до DOM.
Стъпка 3: Слушайте действието на потребителя (HOVER) чрез content.js
Добавете слушател в content.js за съобщението от background.js
Получаваме съобщение от background.js, когато потребителят кликне върху разширението. Намерете типа, който сте получили от съобщението. Ако типът е ‘clickResponse’тогава започваме да слушаме събитието при задържане в DOMчрез ‘listentoMouseover’.
Можете да го console.log(), за да видите дали можете да получите това съобщение.
Наслаждавате се досега??? Можеш да пляскаш :P
Ако успеете, моля, преминете към част II тук.