Раніше я вже додавав в Chrome «Hello World» -розширення створене з цього офіційного мануалу. але воно не підходило як приклад маніпуляцій з DOM. Тому довелося ще пошукати і знайти цю, ще одну офіційну сторінку прикладів різних розширень. із застосуванням всіх можливостей API для Chrome Extensions.
Нижче буде приклад реалізації задуманого розширення у вигляді всього двох файлів.
Як приклад було взято ось це простеньке розширення. яке при кліці по значку розширення в панелі інструментів хрому, змінює колір фону сторінки відображеної у вкладці на червоний.
Відповідно привожу код вже оновлених файлів розширення, background.js:
Відповідно, суть коду проста: при кліці на православну іконку розширення, спрацьовує лістнер, в коді якого Chrome виконує скрипт для поточної вкладки. Скрипт просто шукає якийсь елемент з класом «search-item», і, якщо знаходить хоча б один, змінює йому значення стильового атрибуту resize на vertical.
І вміст файлу manifest.json, без якого не вийде встановити розпаковане розширення в Chrome на сторінці chrome: // extensions / по кнопці «Завантажити розпаковане розширення»:
Що виходить в результаті після кліка на кнопку нашого розширення, зліва направо: