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 - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.
Читайте также:
Программы на заказ
Отзывы
Контакты