Разработка на разширения за браузър: Manifest V3 и JavaScript API

Разширенията за браузър са малки софтуерни програми, които персонализират изживяването при сърфиране. Те могат да добавят нови функции, да променят съдържанието на уебсайтове, да блокират реклами и много други. С появата на Manifest V3 начинът, по който се създават и работят разширенията, претърпя значителни промени. Това подробно ръководство ще разгледа разработката на разширения за браузър с помощта на Manifest V3 и JavaScript API, като ви предостави знанията за създаване на мощни и сигурни разширения за модерни браузъри.

Какво представляват разширенията за браузър?

Разширенията за браузър по същество са мини-приложения, които се изпълняват в уеб браузъра. Те разширяват функционалността на браузъра и се интегрират безпроблемно с уеб страниците. Разширенията се пишат с помощта на стандартни уеб технологии като HTML, CSS и JavaScript, което ги прави сравнително достъпни за уеб разработчиците.

Примери за популярни разширения за браузър включват:

• Блокери на реклами: Блокират реклами на уеб страници, подобрявайки скоростта на сърфиране и намалявайки разсейването.
• Мениджъри на пароли: Сигурно съхраняват и управляват пароли, като ги попълват автоматично в уебсайтове.
• Разширения за водене на бележки: Позволяват на потребителите да си водят бележки и да ги запазват директно от уеб страници.
• Инструменти за продуктивност: Подобряват производителността, като предоставят функции като управление на задачи, проследяване на времето и режими за фокусиране.
• Инструменти за езиков превод: Превеждат уеб страници на различни езици с едно кликване. Пример: разширението Google Translate.
• VPN разширения: Проксират интернет трафика, за да заобиколят географски ограничения и да подобрят поверителността.

Значението на Manifest V3

Manifest V3 е най-новата версия на манифестния файл, който е JSON файл, описващ разширението на браузъра. Той очертава името, версията, разрешенията, фоновите скриптове и други съществени метаданни на разширението. Manifest V3 въвежда няколко ключови промени в сравнение с предшественика си, Manifest V2, като се фокусира предимно върху сигурността и производителността.

Ключови промени в Manifest V3:

• Service Workers: Manifest V3 заменя фоновите страници със service workers. Service workers са управлявани от събития скриптове, които се изпълняват във фонов режим, без да изискват постоянна страница. Те са по-ефективни и по-малко ресурсоемки от фоновите страници.
• Declarative Net Request API: Този API позволява на разширенията да променят мрежови заявки, без директно да ги прихващат. Той подобрява сигурността и производителността, като прехвърля логиката за филтриране към браузъра.
• По-строга Content Security Policy (CSP): Manifest V3 налага по-строги правила на CSP, за да предотврати изпълнението на произволен код, което допълнително повишава сигурността.
• API-та, базирани на Promise: Много API-та вече са базирани на Promise, което улеснява управлението на асинхронни операции.

Защо се премина към Manifest V3?

• Подобрена сигурност: Manifest V3 е проектиран да подобри сигурността на разширенията за браузър и да защити потребителите от злонамерен код.
• Подобрена производителност: Service workers и Declarative Net Request API допринасят за по-добра производителност и намалена консумация на ресурси.
• По-голяма поверителност: Manifest V3 има за цел да даде на потребителите повече контрол върху техните данни и поверителност.

Настройка на вашата среда за разработка

Преди да започнете да разработвате разширения за браузър, трябва да настроите вашата среда за разработка. Това включва инсталиране на редактор на код, избор на браузър за тестване и разбиране на основната файлова структура на разширението.

1. Редактор на код

Изберете редактор на код, с който се чувствате комфортно. Популярните опции включват:

• Visual Studio Code (VS Code): Безплатен и мощен редактор на код с отлична поддръжка за JavaScript и други уеб технологии.
• Sublime Text: Бърз и персонализируем редактор на код с широк набор от плъгини.
• Atom: Безплатен редактор на код с отворен код, разработен от GitHub.

2. Браузър за тестване

Изберете браузър за тестване на вашите разширения. Chrome и Firefox са най-популярните избори, тъй като предлагат стабилни инструменти за разработчици и поддръжка за разработка на разширения.

3. Основна файлова структура

Едно разширение за браузър обикновено се състои от следните файлове:

• manifest.json: Този файл съдържа метаданните на разширението, като неговото име, версия, разрешения и фонови скриптове.
• background.js (или service worker скрипт): Този скрипт се изпълнява във фонов режим и обработва събития като действия на браузъра и кликвания в контекстното меню.
• content.js: Този скрипт се изпълнява в контекста на уеб страниците и може да променя тяхното съдържание.
• popup.html: Този файл дефинира потребителския интерфейс на изскачащия прозорец на разширението.
• popup.js: Този скрипт обработва логиката на изскачащия прозорец на разширението.
• options.html: Този файл дефинира потребителския интерфейс на страницата с опции на разширението.
• options.js: Този скрипт обработва логиката на страницата с опции на разширението.
• icons: Това са иконите, използвани за представяне на разширението в лентата с инструменти на браузъра и на страницата за управление на разширения.

Създаване на първото ви разширение: "Hello, World!"

Нека създадем просто разширение "Hello, World!", за да демонстрираме основните принципи на разработката на разширения за браузър.

1. Създайте манифестен файл (manifest.json)

Създайте файл с име `manifest.json` в нова директория и добавете следния код:

{
  "manifest_version": 3,
  "name": "Hello, World!",
  "version": "1.0",
  "description": "A simple Hello, World! extension",
  "permissions": [
    "storage"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

Обяснение:

• `manifest_version`: Указва версията на манифестния файл (3 за Manifest V3).
• `name`: Името на разширението.
• `version`: Номерът на версията на разширението.
• `description`: Кратко описание на разширението.
• `permissions`: Масив от разрешения, които разширението изисква (напр. "storage").
• `action`: Дефинира свойствата на изскачащия прозорец на разширението, включително файла по подразбиране за изскачащия прозорец и иконите.
• `icons`: Указва пътищата до иконите на разширението.

2. Създайте изскачащ файл (popup.html)

Създайте файл с име `popup.html` в същата директория и добавете следния код:

<!DOCTYPE html>
<html>
<head>
  <title>Hello, World!</title>
  <style>
    body {
      width: 200px;
      padding: 10px;
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a simple browser extension.</p>
</body>
</html>

Този файл дефинира потребителския интерфейс на изскачащия прозорец на разширението, който ще показва съобщението "Hello, World!".

3. Създайте изображения за икони

Създайте три изображения за икони със следните размери: 16x16, 48x48 и 128x128 пиксела. Запазете ги като `icon16.png`, `icon48.png` и `icon128.png` в директория `images` във вашата директория на разширението.

4. Заредете разширението във вашия браузър

Chrome:

1. Отворете Chrome и отидете на `chrome://extensions`.
2. Активирайте "Developer mode" (режим за разработчици) в горния десен ъгъл.
3. Кликнете върху "Load unpacked" (зареждане на разопаковано) и изберете директорията, съдържаща файловете на вашето разширение.

Firefox:

1. Отворете Firefox и отидете на `about:debugging#/runtime/this-firefox`.
2. Кликнете върху "Load Temporary Add-on..." (зареждане на временна добавка...) и изберете файла `manifest.json`.

Вашето разширение "Hello, World!" вече трябва да е инсталирано и видимо в лентата с инструменти на браузъра. Кликнете върху иконата на разширението, за да отворите изскачащия прозорец и да видите съобщението "Hello, World!".

Работа с JavaScript API

Разширенията за браузър могат да взаимодействат с браузъра и уеб страниците, използвайки JavaScript API. Тези API-та предоставят достъп до различни функционалности, като:

• Tabs API: Позволява ви да управлявате табовете на браузъра, включително създаване, актуализиране и запитване на табове.
• Storage API: Предоставя начин за постоянно съхраняване и извличане на данни в рамките на разширението.
• Alarms API: Позволява ви да планирате изпълнението на задачи в определено време.
• Notifications API: Позволява ви да показвате известия на потребителя.
• Context Menus API: Позволява ви да добавяте персонализирани елементи към контекстното меню на браузъра (менюто с десен бутон на мишката).
• Web Request API (Declarative Net Request в Manifest V3): Позволява ви да прихващате и променяте мрежови заявки.
• Scripting API: Позволява инжектиране на скриптове в уеб страници.

Пример: Използване на Storage API

Нека създадем разширение, което съхранява и извлича името на потребителя, използвайки Storage API.

1. Актуализирайте манифестния файл (manifest.json)

Уверете се, че масивът `permissions` във вашия `manifest.json` включва `"storage"`:

{
  "manifest_version": 3,
  "name": "Storage Example",
  "version": "1.0",
  "description": "An extension that uses the Storage API",
  "permissions": [
    "storage"
  ],
  "action": {
    "default_popup": "popup.html"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

2. Създайте изскачащ файл (popup.html)

Създайте или актуализирайте вашия `popup.html` със следното съдържание:

<!DOCTYPE html>
<html>
<head>
  <title>Storage Example</title>
  <style>
    body {
      width: 250px;
      padding: 10px;
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <h1>Storage Example</h1>
  <label for="name">Enter your name:</label>
  <input type="text" id="name">
  <button id="save">Save</button>
  <p id="greeting"></p>
  <script src="popup.js"></script>
</body>
</html>

3. Създайте скрипт за изскачащия прозорец (popup.js)

Създайте файл с име `popup.js` и добавете следния код:

document.addEventListener('DOMContentLoaded', () => {
  const nameInput = document.getElementById('name');
  const saveButton = document.getElementById('save');
  const greeting = document.getElementById('greeting');

  // Load the saved name from storage
  chrome.storage.sync.get('name', (data) => {
    if (data.name) {
      nameInput.value = data.name;
      greeting.textContent = `Hello, ${data.name}!`;
    }
  });

  // Save the name to storage when the button is clicked
  saveButton.addEventListener('click', () => {
    const name = nameInput.value;
    chrome.storage.sync.set({ name: name }, () => {
      greeting.textContent = `Hello, ${name}!`;
    });
  });
});

Обяснение:

• Скриптът слуша за събитието `DOMContentLoaded`, за да се увери, че DOM е напълно зареден, преди да изпълни кода.
• Той получава референции към полето за въвеждане, бутона за запазване и параграфа за поздрав.
• Зарежда запазеното име от хранилището, използвайки `chrome.storage.sync.get()`.
• Запазва името в хранилището, когато бутонът за запазване е кликнат, използвайки `chrome.storage.sync.set()`.
• Актуализира параграфа за поздрав със запазеното или въведеното име.

Презаредете разширението във вашия браузър. Сега, когато отворите изскачащия прозорец, можете да въведете името си, да го запазите и да видите поздравителното съобщение. Името ще бъде запазено в хранилището на разширението и ще бъде заредено следващия път, когато отворите изскачащия прозорец.

Пример: Използване на Tabs API

Нека създадем разширение, което показва URL адреса на текущия таб в изскачащ прозорец.

1. Актуализирайте манифестния файл (manifest.json)

Добавете разрешението `"tabs"` към масива `permissions` във вашия `manifest.json`:

{
  "manifest_version": 3,
  "name": "Tabs Example",
  "version": "1.0",
  "description": "An extension that uses the Tabs API",
  "permissions": [
    "tabs"
  ],
  "action": {
    "default_popup": "popup.html"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

2. Създайте изскачащ файл (popup.html)

Създайте или актуализирайте вашия `popup.html` със следното съдържание:

<!DOCTYPE html>
<html>
<head>
  <title>Tabs Example</title>
  <style>
    body {
      width: 300px;
      padding: 10px;
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <h1>Tabs Example</h1>
  <p>Current Tab URL:</p>
  <p id="url"></p>
  <script src="popup.js"></script>
</body>
</html>

3. Създайте скрипт за изскачащия прозорец (popup.js)

Създайте файл с име `popup.js` и добавете следния код:

document.addEventListener('DOMContentLoaded', () => {
  const urlDisplay = document.getElementById('url');

  // Get the current tab's URL
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    const tab = tabs[0];
    urlDisplay.textContent = tab.url;
  });
});

Обяснение:

• Скриптът слуша за събитието `DOMContentLoaded`.
• Той използва `chrome.tabs.query()`, за да получи текущия активен таб в текущия прозорец.
• Той извлича URL адреса на таба и го показва в параграфа `url`.

Презаредете разширението във вашия браузър. Сега, когато отворите изскачащия прозорец, той ще показва URL адреса на текущия таб.

Фонови скриптове и Service Workers

В Manifest V3 фоновите скриптове са заменени със service workers. Service workers са управлявани от събития скриптове, които се изпълняват във фонов режим, без да изискват постоянна страница. Те са по-ефективни и по-малко ресурсоемки от фоновите страници.

Ключови характеристики на Service Workers:

• Управлявани от събития: Service workers отговарят на събития като действия на браузъра, аларми и съобщения от скриптове за съдържание.
• Асинхронни: Service workers използват асинхронни API-та, за да избегнат блокирането на основната нишка.
• Прекратяват се при неактивност: Service workers се прекратяват, когато не обработват активно събития, като по този начин пестят ресурси.

Пример: Използване на Service Worker

Нека създадем разширение, което показва известие, когато браузърът стартира.

1. Актуализирайте манифестния файл (manifest.json)

Актуализирайте вашия `manifest.json` със следното съдържание:

{
  "manifest_version": 3,
  "name": "Service Worker Example",
  "version": "1.0",
  "description": "An extension that uses a service worker",
  "permissions": [
    "notifications"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

Обяснение:

• Свойството `"background"` указва пътя до скрипта на service worker (`background.js`).
• Масивът `"permissions"` включва `"notifications"`, което е необходимо за показване на известия.

2. Създайте скрипт за Service Worker (background.js)

Създайте файл с име `background.js` и добавете следния код:

chrome.runtime.onStartup.addListener(() => {
  // Display a notification when the browser starts
  chrome.notifications.create('startup-notification', {
    type: 'basic',
    iconUrl: 'images/icon48.png',
    title: 'Browser Started',
    message: 'The browser has started.',
  });
});

Обяснение:

• Скриптът слуша за събитието `chrome.runtime.onStartup`, което се задейства при стартиране на браузъра.
• Той използва `chrome.notifications.create()`, за да покаже известие с посочените свойства.

Презаредете разширението във вашия браузър. Сега, когато рестартирате браузъра си, трябва да видите известие от разширението.

Скриптове за съдържание (Content Scripts)

Скриптовете за съдържание са JavaScript файлове, които се изпълняват в контекста на уеб страници. Те могат да достъпват и променят DOM на уеб страниците, което ви позволява да персонализирате поведението и външния вид на уебсайтовете.

Ключови характеристики на скриптовете за съдържание:

• Достъп до DOM: Скриптовете за съдържание могат да достъпват и манипулират DOM на уеб страниците.
• Изолация от скриптовете на уеб страницата: Скриптовете за съдържание се изпълняват в изолирана среда, предотвратявайки конфликти със скриптовете на уеб страницата.
• Комуникация с фонови скриптове: Скриптовете за съдържание могат да комуникират с фонови скриптове чрез предаване на съобщения.

Пример: Използване на скрипт за съдържание

Нека създадем разширение, което променя цвета на фона на уеб страниците на светлосин.

1. Актуализирайте манифестния файл (manifest.json)

Актуализирайте вашия `manifest.json` със следното съдържание:

{
  "manifest_version": 3,
  "name": "Content Script Example",
  "version": "1.0",
  "description": "An extension that uses a content script",
  "permissions": [
    "activeTab",
    "scripting"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": [""],
      "js": ["content.js"]
    }
  ],
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

Обяснение:

• Свойството `"content_scripts"` указва масив от скриптове за съдържание, които да бъдат инжектирани в уеб страници.
• `"matches"` указва URL адресите, в които трябва да бъде инжектиран скриптът за съдържание (`` съответства на всички URL адреси).
• `"js"` указва пътя до скрипта за съдържание (`content.js`).
• Масивът `"permissions"` включва `"activeTab"` и `"scripting"`, които са необходими за инжектиране на скриптове.

2. Създайте скрипт за съдържание (content.js)

Създайте файл с име `content.js` и добавете следния код:

document.body.style.backgroundColor = 'lightblue';

3. Създайте Service Worker (background.js)

Създайте файл с име `background.js` и добавете следния код:

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: () => {
      document.body.style.backgroundColor = 'lightblue';
    }
  });
});

Обяснение:

• Скриптът за съдържание просто задава цвета на фона на елемента `body` на светлосин.
• Service worker-ът слуша за събитието за кликване и изпълнява функция в текущия таб, която променя цвета на фона.

Презаредете разширението във вашия браузър. Сега, когато отворите която и да е уеб страница, цветът на фона ще бъде светлосин.

Отстраняване на грешки в разширения за браузър

Отстраняването на грешки в разширения за браузър е съществена част от процеса на разработка. Chrome и Firefox предоставят отлични инструменти за разработчици за отстраняване на грешки в разширения.

Отстраняване на грешки в Chrome:

1. Отворете Chrome и отидете на `chrome://extensions`.
2. Активирайте "Developer mode" (режим за разработчици) в горния десен ъгъл.
3. Кликнете върху "Inspect views background page" за вашето разширение. Това ще отвори Chrome DevTools за фоновия скрипт.
4. За да отстранявате грешки в скриптове за съдържание, отворете уеб страницата, където е инжектиран скриптът за съдържание, и след това отворете Chrome DevTools за тази страница. Трябва да видите вашия скрипт за съдържание в панела "Sources".

Отстраняване на грешки във Firefox:

1. Отворете Firefox и отидете на `about:debugging#/runtime/this-firefox`.
2. Намерете вашето разширение в списъка и кликнете върху "Inspect". Това ще отвори Firefox Developer Tools за разширението.
3. За да отстранявате грешки в скриптове за съдържание, отворете уеб страницата, където е инжектиран скриптът за съдържание, и след това отворете Firefox Developer Tools за тази страница. Трябва да видите вашия скрипт за съдържание в панела "Debugger".

Често срещани техники за отстраняване на грешки:

• Записи в конзолата: Използвайте `console.log()`, за да отпечатвате съобщения в конзолата.
• Точки на прекъсване (Breakpoints): Задайте точки на прекъсване в кода си, за да спрете изпълнението и да инспектирате променливи.
• Source maps: Използвайте source maps, за да отстранявате грешки в кода си в оригиналния му вид, дори ако е бил минимизиран или транспилиран.
• Обработка на грешки: Внедрете обработка на грешки, за да улавяте и записвате грешки.

Публикуване на вашето разширение

След като сте разработили и тествали вашето разширение, можете да го публикувате в Chrome Web Store или Firefox Add-ons marketplace.

Публикуване в Chrome Web Store:

1. Създайте акаунт на разработчик в Chrome Web Store.
2. Пакетирайте вашето разширение в `.zip` файл.
3. Качете `.zip` файла в Chrome Web Store.
4. Предоставете необходимите метаданни, като името на разширението, описание и екранни снимки.
5. Изпратете вашето разширение за преглед.

Публикуване в Firefox Add-ons Marketplace:

1. Създайте акаунт на разработчик в Firefox Add-ons marketplace.
2. Пакетирайте вашето разширение в `.zip` файл.
3. Качете `.zip` файла в Firefox Add-ons marketplace.
4. Предоставете необходимите метаданни, като името на разширението, описание и екранни снимки.
5. Изпратете вашето разширение за преглед.

Най-добри практики за публикуване:

• Напишете ясно и кратко описание на вашето разширение.
• Предоставете висококачествени екранни снимки и видеоклипове, за да покажете функциите на вашето разширение.
• Тествайте обстойно вашето разширение, преди да го изпратите.
• Отговаряйте своевременно на потребителски отзиви и обратна връзка.
• Поддържайте вашето разширение актуално с най-новите версии на браузъра и кръпки за сигурност.

Съображения за сигурност

Сигурността е критичен аспект от разработката на разширения за браузър. Разширенията могат потенциално да имат достъп до чувствителни потребителски данни и да променят съдържанието на уеб страници, така че е от съществено значение да се следват най-добрите практики за сигурност, за да се защитят потребителите от злонамерен код.

Ключови съображения за сигурност:

• Минимизирайте разрешенията: Изисквайте само разрешенията, от които вашето разширение действително се нуждае.
• Валидирайте потребителския вход: Почиствайте и валидирайте целия потребителски вход, за да предотвратите атаки от типа cross-site scripting (XSS).
• Използвайте HTTPS: Винаги използвайте HTTPS за комуникация с отдалечени сървъри.
• Content Security Policy (CSP): Наложете строга CSP, за да предотвратите изпълнението на произволен код.
• Редовно актуализирайте вашето разширение: Поддържайте вашето разширение актуално с най-новите кръпки за сигурност.

Като следвате тези насоки за сигурност, можете да помогнете да се гарантира, че вашето разширение за браузър е безопасно и сигурно за потребителите.

Заключение

Разработката на разширения за браузър с помощта на Manifest V3 и JavaScript API предлага мощен начин за персонализиране на изживяването при сърфиране и добавяне на нови функции към уеб браузърите. Като разбирате ключовите концепции, API-та и най-добрите практики, очертани в това ръководство, можете да създавате мощни и сигурни разширения, които повишават производителността, подобряват сигурността и предоставят по-добро изживяване при сърфиране за потребителите по целия свят. С непрекъснатото развитие на уеб, разширенията за браузър ще играят все по-важна роля в оформянето на бъдещето на онлайн взаимодействията. Възползвайте се от възможностите, предоставени от Manifest V3 и богатството на JavaScript API, за да създавате иновативни и ценни разширения.