Изменение цвета фона абзаца с помощью расширения Chrome

В разделе Серия «Как создать расширение для Chrome» мы узнаем, как создать расширение для Chrome с нуля, а также узнать, как добавить к этим расширениям некоторые базовые настройки. ПРИМЕЧАНИЕ. Вы можете перейти к любой главе, нажав на ссылку в конце этого поста.

А пока вот содержание главы 3: Изменение цвета фона абзаца в расширении Chrome.

Содержание

Требования
Рабочий процесс
Инициализация расширения Chrome
Вывод
Сводка

Требования

Чтобы создать простое расширение Chrome, изменяющее цвет фона абзаца, нам потребуются следующие файлы. Если вы хотите узнать больше о типах файлов, упомянутых в этом сообщении, посетите Главу 1: Введение в расширения Chrome в разделе навигации по главам в нижней части этого сообщения.

manifest.json: содержит конфигурации, свойства и информацию о расширении Chrome.
content.js: содержит содержимое, которое необходимо выполнить в Chrome.
background.js: загружается при запуске Chrome.

Шаг 1. Создайте файл manifest.json со следующим кодом.

{
	"manifest_version" : 2,
	"name" : "Chrome-Extension Background Color Change",
	"version" : "0.001",
	"content_scripts" : [
		{
			"matches" : [
				"<all_urls>"
             ]
        }
     ]
}

Шаг 2. Создайте файл content.js со следующим кодом.

chrome.runtime.onMessage.addListener(gotMessage);
function gotMessage(message,sender,sendresponse)
{
	console.log(message.txt);
	let paragraphs = document.getElementsByTagName("p");
	for(elt of paragraphs)
	{
		elt.style['background-color'] = '#00CED1';
	}
}

Вы можете заменить код цвета на любой другой цвет по вашему выбору.

Шаг 3. Создайте файл background.js со следующими кодами.

console.log("Background running");
chrome.browserAction.onClicked.addListener(IconClicked);
function IconClicked(tab)
{
	let msg = {
		txt : "Hello"
	}
	chrome.tabs.sendMessage(tab.id,msg);
}

Шаг 4. Откройте файл manifest.html и добавьте сценарии content.js и сценарии background.js.

{
	"manifest_version" : 2,
	"name" : "Chrome-Extension Background Color Change",
	"version" : "0.001",
	"content_scripts" : [
		{
			"matches" : [
				"<all_urls>"
                 ],
                  "js" : ["content.js"]
        }
    ],
    "background" : {
                  "scripts" : ["background.js"]
    },
    "browser_action" : {
    }
}

Рабочий процесс

При щелчке значка действия браузера фоновый сценарий отправляет сообщение сценарию содержимого.

Сценарий содержимого при получении сообщения из фона выполняет действие по изменению цвета фона абзаца.

Инициализация расширения Chrome

После того, как все файлы для расширения Chrome созданы и заполнены указанными кодами, добавьте расширение Chrome в свой браузер, выполнив следующие действия.

Шаг 1. Перейдите в Google Chrome и введите chrome://extensions в адресной строке.

Шаг 2. Включите параметр Режим разработчика в правом верхнем углу страницы.

Шаг 3. Нажмите кнопку Загрузить распакованное.

Шаг 4. Выберите папку, в которую мы записали код, и нажмите «Открыть».

Теперь расширение Chrome загружено в браузер.

Действие браузера. Используйте действия браузера для размещения значков на главной панели инструментов Google Chrome справа от адресной строки. Помимо значка, расширение может иметь подсказку, значок и всплывающее окно.

Примечание. Даже если вы не укажете значок действия браузера, будет назначен значок по умолчанию с буквой имени вашего расширения (указанного в манифесте).

Выход

Откройте любую веб-страницу, и все абзацы изменятся на указанный цвет из-за нашего расширения Chrome, работающего в фоновом режиме.

Если вы хотите, чтобы фоновый скрипт выполнялся, введите chrome://extensions в адресной строке. Нажмите на страницу Проверка представлений фона, чтобы увидеть работающий фоновый скрипт.

Резюме

В этой главе мы смогли создать расширение для Chrome, которое может изменить цвет фона любого абзаца, выполнив несколько простых шагов.

Надеюсь, мы смогли заинтересовать вас в создании одного расширения для Chrome для себя.

В следующей главе мы узнаем, как заменить текст в абзацах на любой веб-странице пользовательским текстом с помощью расширения Chrome. Не стесняйтесь обращаться по любым вопросам.