Предпоставки:

  • Основни познания по Javascript
  • Браузър Chrome

Изявление на проблема:

Понякога прекарваме часове, опитвайки се да търсим вIMDB оценки, времетраене и сюжети на различни филми в списък чрез ръчно търсене в Гугъл.
И това е сериозен проблем, когато

  • Вече е неделя, 23 часа.
  • Имаш само 2 златни часа, преди да се тръшнеш в леглото си.

Трябва да сте абсолютно сигурни, че не си губите времето в гледане на някой куц филм.

Та какво правиш? Инсталирайте разширението IMDb Ratings on hover.

Как работи разширението?

  1. При навигиране до която и да е уеб страница фоновият скрипт слуша събитие за щракване върху разширението.
  2. След щракване фоновият скрипт изпраща съобщение до скрипта за съдържание.
  3. След това скриптът за съдържание слуша събитието при задържане.
  4. Когато потребителят постави мишката за 250 ms (пример) върху произволен текст, след това вземете текста на това място и направете извикване на API.
  5. При получаване на успешен отговор, формирайте шаблон (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 тук.