Делаем своё расширение для браузера за 10 минут

В кон­це 2020 года мы дела­ли про­ект со сне­жин­ка­ми — писа­ли спе­ци­аль­ный скрипт, кото­рый запус­кал пада­ю­щий снег на сай­тах. Если бы мы хоте­ли сде­лать такой снег на любом сво­ём сай­те, это не соста­ви­ло бы тру­да: добав­ля­ешь скрипт в код стра­ни­цы, и готово.

А вот на чужих сай­тах была про­бле­ма. Скрипт нуж­но было встав­лять через кон­соль. А если на сай­те была настро­е­на поли­ти­ка без­опас­но­сти, кото­рая запре­ща­ет запуск внеш­них скрип­тов, то магия не срабатывала. 

Сего­дня мы это испра­вим — сде­ла­ем рас­ши­ре­ние для бра­у­зе­ра, кото­рое может запус­кать любой скрипт на любой стра­ни­це. Мы охва­тим прин­цип, на осно­ве кото­ро­го вы смо­же­те сде­лать соб­ствен­ные рас­ши­ре­ния, в том чис­ле намно­го более сложные. 

👉 Что такое расширение

Рас­ши­ре­ние для Chrome — это неболь­шая про­грам­ма, кото­рая выпол­ня­ет­ся внут­ри бра­у­зе­ра и помо­га­ет рас­ши­рить воз­мож­но­сти сай­тов. Сила рас­ши­ре­ния в том, что оно может выпол­нять­ся пря­мо из меню бра­у­зе­ра и не зави­сит от поли­тик безопасности. 

При­ме­ры того, что может сде­лать расширение: 

  • Сохра­нить ваши паро­ли и дру­гие лич­ные данные,
  • Выдрать из стра­ни­цы скры­тые дан­ные (напри­мер, ссыл­ку на ска­чи­ва­ние музыки).
  • Менять что-то на стра­ни­це, напри­мер, отклю­чать рекла­му, пере­во­дить текст, уда­лять ненужное.
  • Соби­рать ста­ти­сти­ку вашей рабо­ты в интернете.
  • Под­клю­чать­ся к дру­гим сер­ви­сам (почте, чатам, фай­ло­об­мен­ни­кам) и вза­и­мо­дей­ство­вать с ними из браузера.

В этой статье

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

Манифест

В каж­дом рас­ши­ре­нии для бра­у­зе­ра дол­жен быть мани­фест — доку­мент, в кото­ром написано:

  • как назы­ва­ет­ся расширение;
  • к чему рас­ши­ре­ние может полу­чить доступ;
  • какие скрип­ты будут рабо­тать в фоне;
  • как долж­на выгля­деть икон­ка расширения;
  • что пока­зать или что выпол­нить, когда поль­зо­ва­тель нажмёт на икон­ку расширения.

Мани­фест зада­ёт общие пра­ви­ла для все­го рас­ши­ре­ния, поэто­му мани­фест — един­ствен­ный обя­за­тель­ный ком­по­нент. Мож­но обой­тись без ико­нок и скрип­тов, но мани­фест обя­за­тель­но дол­жен быть.Каждый мани­фест хра­нит­ся в фай­ле manifest.json — созда­дим пустой файл с таким име­нем и напи­шем внут­ри такое:

{

  "name": "Запускаем снежинки на любом сайте",

  "description": "Проект журнала Код",

  "version": "1.0",

  "manifest_version": 3

}

Пер­вые две строч­ки — это назва­ние и подроб­ное опи­са­ние рас­ши­ре­ния. Тре­тья отве­ча­ет за номер вер­сии рас­ши­ре­ния, а послед­няя гово­рит бра­у­зе­ру, какая вер­сия мани­фе­ста исполь­зу­ет­ся в опи­са­нии. На момент выхо­да ста­тьи в фев­ра­ле 2021 года исполь­зу­ет­ся тре­тья версия.

Сохра­ня­ем файл и всё, рас­ши­ре­ние гото­во. Оно ниче­го не уме­ет, ниче­го не дела­ет, зато мы уже можем доба­вить его в бра­у­зер. Для это­го запус­ка­ем Хром и в адрес­ной стро­ке пишем:

chrome://extensions/

Мы попа­да­ем на стра­ни­цу, кото­рая нам пока­жет все уста­нов­лен­ные расширения:

Делаем своё расширение для браузера за 10 минут

Что­бы доба­вить своё рас­ши­ре­ние, в пра­вом верх­нем углу вклю­ча­ем режим раз­ра­бот­чи­ка, а затем нажи­ма­ем «Загру­зить рас­па­ко­ван­ное расширение»:

Делаем своё расширение для браузера за 10 минут

Теперь выби­ра­ем пап­ку, в кото­рой лежит наш манифест:

Делаем своё расширение для браузера за 10 минут

Отлич­но, мы толь­ко что доба­ви­ли в бра­у­зер новое расширение:

Делаем своё расширение для браузера за 10 минут

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

Что­бы было про­ще рабо­тать и тести­ро­вать рас­ши­ре­ние, закре­пим его на пане­ли браузера:

Делаем своё расширение для браузера за 10 минут

Иконки

У рас­ши­ре­ния есть две икон­ки, кото­ры­ми мы можем управлять: 

  1. Кар­тин­ка в кар­точ­ке рас­ши­ре­ния на стра­ни­це настроек.
  2. Икон­ка на пане­ли браузера.

Что­бы не рисо­вать всё с нуля, ска­ча­ем пап­ку с икон­ка­ми из того же руко­вод­ства Google и поло­жим её в ту же пап­ку, что и манифест:

Теперь доба­вим икон­ки в мани­фест. За кар­тин­ку в кар­точ­ке отве­ча­ет блок icon, а за икон­ку на пане­ли — блок action. Раз­ные раз­ме­ры кар­тин­ки нуж­ны для того, что­бы на раз­ных мони­то­рах с любой плот­но­стью пик­се­лей икон­ки выгля­де­ли хорошо:

{
  "name": "Запускаем снежинки на любом сайте",
  "description": "Проект журнала Код",
  "version": "1.0",
  "manifest_version": 3,

  "action": {
    "default_icon": {
      "16": "/images/get_started16.png",
      "32": "/images/get_started32.png",
      "48": "/images/get_started48.png",
      "128": "/images/get_started128.png"
    }
  },
  "icons": {
    "16": "/images/get_started16.png",
    "32": "/images/get_started32.png",
    "48": "/images/get_started48.png",
    "128": "/images/get_started128.png"
  }
}

Сохра­ня­ем мани­фест, обнов­ля­ем рас­ши­ре­ние на стра­ни­це настро­ек и смот­рим результат:

Добавляем иконки в манифест

Настраиваем разрешения

Раз­ре­ше­ния — это то, что бра­у­зер поз­во­ля­ет делать рас­ши­ре­нию со стра­ни­ца­ми и с их содер­жи­мым. Для запус­ка сне­жи­нок нам нуж­но сде­лать две вещи:

  1. Понять, какая вклад­ка сей­час актив­ная, что­бы запу­стить сне­жин­ки имен­но на ней.
  2. Запу­стить наш скрипт со снежинками.

Что­бы полу­чить доступ к актив­ной вклад­ке и к запус­ку скрип­тов, доба­вим в мани­фест такую строку:

"permissions": ["activeTab", "scripting"],

Показываем меню

Если мы сей­час нажмём на икон­ку рас­ши­ре­ния на пане­ли бра­у­зе­ра, то ниче­го не при­зой­дёт, пото­му что мы ниче­го не запро­грам­ми­ро­ва­ли. Испра­вим это — сде­ла­ем так, что­бы при нажа­тии рас­ши­ре­ние пока­зы­ва­ло кноп­ку запус­ка. Когда рас­ши­ре­ние будет уметь боль­ше, вме­сто одной кноп­ки мож­но будет пока­зать целое меню.

Что­бы сде­лать всплы­ва­ю­щее меню, доба­вим в мани­фест в раз­дел action такую строку:

    "default_popup": "popup.html",

Она озна­ча­ет, что при нажа­тии на икон­ку мы уви­дим рядом с ней мини-страничку, на кото­рой что-то будет.Создадим в той же пап­ке рас­ши­ре­ния файл popup.html и доба­вим в него такой код:

<!DOCTYPE html>
<html lang="ru">
  <head>
  	<meta charset="UTF-8">
    <style type="text/css">

    	/* задаём размеры кнопки и размер текста на кнопке  */
    	button {
	      font-size: 12px;
		  height: 40px;
		  width: 80px;
		}
    </style>
  </head>
  <body>
  	<!-- создаём кнопку на странице -->
    <button id="snow">Запустить снежинки</button>
    <!-- подключаем скрипт, который обработает нажатие на эту кнопку -->
    <script src="popup.js"></script>
  </body>
</html>

Что­бы бра­у­зер не ругал­ся, что у нас нет фай­ла popup.js, созда­дим пустой файл с таким назва­ни­ем и поло­жим его в ту же папку:

Показываем меню расширения

Сохра­ня­ем мани­фест, обнов­ля­ем его на стра­ни­це настро­ек и видим, что у наше­го рас­ши­ре­ния появи­лось меню с кнопкой:

Показываем меню расширения

Запускаем снежинки

Вся магия будет про­ис­хо­дить в фай­ле popup.js — откро­ем его и доба­вим такой код:

// получаем доступ к кнопке
let snow = document.getElementById("snow");
// когда кнопка нажата — находим активную вкладку и запускаем нужную функцию
snow.addEventListener("click", async () => {
  // получаем доступ к активной вкладке
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  // выполняем скрипт
  chrome.scripting.executeScript({
  	// скрипт будет выполняться во вкладке, которую нашли на предыдущем этапе
    target: { tabId: tab.id },
    // вызываем функцию, в которой лежит запуск снежинок
    function: snowFall,
  });
});

// запускаем снег
function snowFall() {
}

Послед­нее, что нам оста­лось сде­лать, — поло­жить в функ­цию snowFall() пол­ный код скрип­та из про­ек­та со сне­жин­ка­ми и сохра­нить файл.

Проверка

В про­шлый раз мы не смог­ли запу­стить скрипт на любой стра­ни­це Яндек­са — меша­ла поли­ти­ка без­опас­но­сти. Теперь всё работает:

Проверяем расширение

Ска­чать упа­ко­ван­ное рас­ши­ре­ние. Перед уста­нов­кой его нуж­но рас­па­ко­вать в любую папку.

Текст:

Миха­ил Полянин

Редак­ту­ра:

Мак­сим Ильяхов

Худож­ник:

Даня Бер­ков­ский

Кор­рек­тор:

Ири­на Михеева

Вёрст­ка:

Мария Дро­но­ва

Соц­се­ти:

Олег Веш­кур­цев