Manifest v3 и пример расширения для браузеров на основе Chromium

Изредка у меня бывают заказы на расширения для браузеров. О них я писал уже например тут. Однако прогресс идет вперед, и уже манифест второй версии является устаревшим – надо делать с третьим. А тут есть некоторые отличия. В статье я расскажу о Manifest v3 и некоторых особенностях работы внутри; фактически набросаю скелет расширения, части которого смогут взаимодействовать друг с другом.

Краткое устройство расширения

Как и для многих программ, для расширений на основе хромиума (то есть это не только Chrome, но также и современные версии Edge, Firefox, Opera и даже Safari) необходим для работы файл манифеста. Последняя версия его – 3. Пример файла манифест:

{
  "manifest_version": 3,
  "name": "upreadV3",
  "version": "1.0",
  
  "icons": {
    "28": "1.png"
  },
  "content_scripts": [
    {
      "matches": [ "https://upread.ru/*" ],
      "js": [  "content.js" ]
    }
  ],
  "permissions": [
    "activeTab",
	  "storage",
	  "tabs",
    "webRequest"
  ],
  "host_permissions": [
    "https://upread.ru/*"
  ],
  "optional_host_permissions":[
    "https://*/*",
    "http://*/*"
  ],
  "action": {
        "default_title": " upreadV3",
        "default_icon": "1.png",
        "default_popup": "popup.html"
    }
    ,"background": {
      "service_worker": "background.js",
      "mode": "module"
    }
}

Разбирать файл построчно не буду – тут все по-английски, всё должно быть понятно. Основное, что надо знать – это основной и обязательный файл, через него подключается уже все остальное. Это все остальное можно условно (ну или не очень условно) поделить на три части.

Контент

Файл "content.js". Это то, что взаимодействует с веб страницей. С html. Может читать, менять, отправлять запросы к другим сайтам – то есть все основное. Например, вот такой запрос к стороннему сайту отправим

var xhr = new XMLHttpRequest();
xhr.responseType = 'document';
xhr.open("POST", "https://upread.ru/api.php? ", true);	
var data = new FormData();
data.append('name', 'up7');  
xhr.onreadystatechange = function() {
	if (this.readyState == 4 && this.status == 200) {
		var html = this.response.body.innerHTML;
		//ну и тут дальше что-то делаем с ответом
	}
}

Всплывающее окно

Это уже исключительно вотчина расширения. Файл popup.html, в нем сразу пишем JS или же подключаем popup.js. Например, такое окно

<!doctype html>
<html style="height: 420px;">
  <head>
  <meta charset="UTF-8">
    <title>Пример от upread.ru </title>
  </head>
<body style="height: 420px;">
<input type ="text" id="name" /><br>
<button id="save">Отправить</button>
  <script src="popup.js"></script>
</body>
</html>
Скрипт всплывашки:
document.body.onload = function() {
  chrome.storage.local.get("name", function(items) {
    if (!chrome.runtime.error) {
      if (items.name != undefined){
        document.getElementById("name").value = items.name;
      }
      
    }
  });


  chrome.runtime.sendMessage({
    action: 'updateBadgeText',
    value: 'up'
  });
}

Здесь мы достаем из локального хранилища некоторое значение и вставляем его в текстовое поле. Во второй же части мы отправляем некое событие в фоновую часть расширения. Здесь стоит запомнить один факт – всплывающее окно живет только пока оно видно, пока открыто. Поэтому все действия с ним надо производить при открытом, либо асинхронно (в данном случае мы используем локальное хранилище для передачи внутрь всплывающего окна). А загружать значения можно как в примере – при событии body.onload (вообще говоря у расширений есть свои события, но можно и так пока для демонстрации).

Работа в фоне

И самый короткий файл в примере – это background.js. Здесь мы просто слушаем и меняем текст значка всплывашки (обычно там числа ставят разработчики расширений):

chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
	if (msg.action === " updateBadgeText ") {
		chrome.action.setBadgeText({text: msg.value });
  	}
});

Итог

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

Автор этого материала - я - Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.

заметки, javascript, расширения

Читайте также:

Расширения для браузера Chrome: быстро и просто

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

Программирование up

Мои услуги