Разработка на разширения за браузъри: Навигиране в Manifest V3 и JavaScript APIs

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

Разбиране на разширенията за браузъри

Разширението за браузър е малка софтуерна програма, която разширява функционалността на уеб браузъра. Разширенията могат да модифицират уеб страници, да добавят нови функции и да се интегрират с външни услуги. Обикновено са написани на JavaScript, HTML и CSS и са опаковани като ZIP файл с манифест файл, който описва метаданните и разрешенията на разширението.

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

• Ad blockers: Премахване на реклами от уеб страници.
• Password managers: Сигурно съхраняване и управление на пароли.
• Productivity tools: Подобряване на работния процес с функции като управление на задачи и водене на бележки.
• Content customization: Промяна на външния вид и поведението на уеб страниците.
• Accessibility tools: Подобряване на достъпността на уеб за потребители с увреждания.

Manifest V3: Новият стандарт

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

• Service Workers: Замяна на фоновите страници със service workers за подобрена производителност и намалено използване на паметта. Service workers са скриптове, задвижвани от събития, които работят във фонов режим и обработват събития като мрежови заявки и аларми.
• Declarative Net Request API: Замяна на блокиращия webRequest API с Declarative Net Request API за филтриране на мрежови заявки. Това подобрява поверителността и сигурността, като ограничава достъпа на разширението до мрежовия трафик.
• Content Security Policy (CSP): Прилагане на по-строги CSP политики за предотвратяване на изпълнението на произволен код и намаляване на рисковете за сигурността.
• Manifest Version: Ключът manifest_version във файла manifest.json трябва да бъде зададен на 3.

Мигриране от Manifest V2 към Manifest V3

Мигрирането от Manifest V2 към Manifest V3 изисква внимателно планиране и модификации на кода. Ето ръководство стъпка по стъпка:

1. Актуализирайте манифестния файл: Задайте manifest_version на 3 и актуализирайте полетата permissions и background, за да отговарят на изискванията на Manifest V3.
2. Заменете фоновите страници със service workers: Пренапишете фоновите скриптове като service workers, обработвайки събития с помощта на APIs chrome.scripting и chrome.alarms.
3. Мигрирайте към Declarative Net Request API: Заменете блокиращите webRequest API calls с декларативни правила, дефинирани в API declarativeNetRequest.
4. Актуализирайте политиката за сигурност на съдържанието: Коригирайте полето content_security_policy във файла на манифеста, за да отговаря на по-строгите CSP изисквания.
5. Тествайте щателно: Тествайте разширението широко в различни браузъри, за да осигурите съвместимост и правилна функционалност.

Пример: Мигриране на фонов скрипт към Service Worker

Manifest V2 (background.js):

            chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    return {cancel: true};
  },
  {urls: ["*.example.com/*"]},
  ["blocking"]
);

            

              
                Copy
              
            
          

Manifest V3 (service-worker.js):

            chrome.declarativeNetRequest.updateDynamicRules({
  removeRuleIds: [1],
  addRules: [{
    "id": 1,
    "priority": 1,
    "action": { "type": "block" },
    "condition": { "urlFilter": "*.example.com/*", "resourceTypes": ["main_frame", "sub_frame", "stylesheet", "script", "image", "object", "xmlhttprequest", "other"] }
  }]
});

            

              
                Copy
              
            
          

manifest.json (Manifest V3):

            {
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "A simple extension",
  "permissions": [
    "declarativeNetRequest",
    "declarativeNetRequestFeedback",
    "storage"
  ],
  "background": {
    "service_worker": "service-worker.js"
  },
  "declarative_net_request": {
    "rule_resources": [{
      "id": "ruleset_1",
      "enabled": true,
      "path": "rules.json"
    }]
  }
}

            

              
                Copy
              
            
          

Основни JavaScript APIs за разширения на браузъри

Разширенията за браузъри разчитат на набор от JavaScript APIs за взаимодействие с браузъра и уеб страниците. Ето някои от най-важните APIs:

1. chrome.runtime

API chrome.runtime осигурява достъп до средата за изпълнение на разширението. Той позволява на разширенията да комуникират с фоновия скрипт, да имат достъп до манифестния файл и да управляват жизнения цикъл на разширението.

Основни методи:

• chrome.runtime.sendMessage(): Изпраща съобщение до фоновия скрипт или други разширения.
• chrome.runtime.onMessage.addListener(): Слуша за съобщения от други скриптове.
• chrome.runtime.getManifest(): Връща манифестния файл на разширението като JavaScript обект.
• chrome.runtime.reload(): Презарежда разширението.

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

Content Script (content.js):

            chrome.runtime.sendMessage({message: "Hello from content script!"}, function(response) {
  console.log("Response from background script: ", response.message);
});

            

              
                Copy
              
            
          

Background Script (service-worker.js):

            chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log("Message from content script: ", request.message);
    sendResponse({message: "Hello from background script!"});
  }
);

            

              
                Copy
              
            
          

2. chrome.storage

API chrome.storage предоставя механизъм за съхранение и извличане на данни в рамките на разширението. Той предлага както опции за локално, така и за синхронизирано съхранение.

Основни методи:

• chrome.storage.local.set(): Съхранява данни локално.
• chrome.storage.local.get(): Извлича данни от локалното хранилище.
• chrome.storage.sync.set(): Съхранява данни, които се синхронизират на устройствата на потребителя.
• chrome.storage.sync.get(): Извлича данни от синхронизирано хранилище.

Пример: Съхраняване и извличане на данни в локално хранилище

            // Store data
chrome.storage.local.set({key: "value"}, function() {
  console.log("Value is set to " + "value");
});

// Retrieve data
chrome.storage.local.get(["key"], function(result) {
  console.log("Value currently is " + result.key);
});

            

              
                Copy
              
            
          

3. chrome.tabs

API chrome.tabs позволява на разширенията да взаимодействат с разделите на браузъра. Той предоставя методи за създаване, търсене, промяна и затваряне на раздели.

Основни методи:

• chrome.tabs.create(): Създава нов раздел.
• chrome.tabs.query(): Заявки за раздели, които отговарят на определени критерии.
• chrome.tabs.update(): Актуализира свойствата на раздел.
• chrome.tabs.remove(): Затваря раздел.
• chrome.tabs.executeScript(): Изпълнява JavaScript код в раздел.

Пример: Създаване на нов раздел

            chrome.tabs.create({url: "https://www.example.com"}, function(tab) {
  console.log("New tab created with ID: " + tab.id);
});

            

              
                Copy
              
            
          

4. chrome.alarms

API chrome.alarms позволява на разширенията да планират задачи, които да се изпълняват в определено време или след определен интервал. Това е особено важно в Manifest V3, тъй като заменя използването на таймери във фонови страници, които вече не се поддържат.

Основни методи:

• chrome.alarms.create(): Създава нова аларма.
• chrome.alarms.get(): Извлича съществуваща аларма.
• chrome.alarms.clear(): Изчиства аларма.
• chrome.alarms.getAll(): Извлича всички аларми.
• chrome.alarms.onAlarm.addListener(): Слуша за събития на аларма.

Пример: Създаване на аларма

            chrome.alarms.create("myAlarm", {delayInMinutes: 1, periodInMinutes: 1});

chrome.alarms.onAlarm.addListener(function(alarm) {
  if (alarm.name === "myAlarm") {
    console.log("Alarm triggered!");
  }
});

            

              
                Copy
              
            
          

5. chrome.scripting

API chrome.scripting позволява на разширенията да инжектират JavaScript и CSS в уеб страници. Този API е ключов компонент на Manifest V3 и се използва от service workers за взаимодействие с уеб страници, след като бъдат заредени.

Основни методи:

• chrome.scripting.executeScript(): Изпълнява JavaScript код в раздел или рамка.
• chrome.scripting.insertCSS(): Вмъква CSS в раздел или рамка.

Пример: Инжектиране на JavaScript в раздел

            chrome.scripting.executeScript({
  target: {tabId: tabId},
  function: function() {
    console.log("Injected script!");
    document.body.style.backgroundColor = 'red';
  }
});

            

              
                Copy
              
            
          

6. chrome.notifications

API chrome.notifications позволява на разширенията да показват известия на потребителя. Това е полезно за предоставяне на актуализации, сигнали и друга важна информация.

Основни методи:

• chrome.notifications.create(): Създава ново известие.
• chrome.notifications.update(): Актуализира съществуващо известие.
• chrome.notifications.clear(): Изчиства известие.
• chrome.notifications.getAll(): Извлича всички известия.

Пример: Създаване на известие

            chrome.notifications.create('myNotification', {
  type: 'basic',
  iconUrl: 'icon.png',
  title: 'My Extension',
  message: 'Hello from my extension!'
}, function(notificationId) {
  console.log('Notification created with ID: ' + notificationId);
});

            

              
                Copy
              
            
          

7. chrome.contextMenus

API chrome.contextMenus позволява на разширенията да добавят елементи към контекстното меню на браузъра (менюто с десен бутон). Това предоставя удобен начин за потребителите да имат достъп до функционалността на разширението директно от уеб страниците.

Основни методи:

• chrome.contextMenus.create(): Създава нов елемент от контекстното меню.
• chrome.contextMenus.update(): Актуализира съществуващ елемент от контекстното меню.
• chrome.contextMenus.remove(): Премахва елемент от контекстното меню.
• chrome.contextMenus.removeAll(): Премахва всички елементи от контекстното меню, създадени от разширението.

Пример: Създаване на елемент от контекстното меню

            chrome.contextMenus.create({
  id: "myContextMenuItem",
  title: "My Context Menu Item",
  contexts: ["page", "selection"]
}, function() {
  console.log("Context menu item created.");
});

chrome.contextMenus.onClicked.addListener(function(info, tab) {
  if (info.menuItemId === "myContextMenuItem") {
    console.log("Context menu item clicked!");
    alert("You clicked the context menu item!");
  }
});

            

              
                Copy
              
            
          

8. chrome.i18n

API chrome.i18n се използва за интернационализиране на вашето разширение, което го прави достъпно за потребители на различни езици и региони. Той ви позволява да предоставите локализирани версии на потребителския интерфейс и съобщенията на вашето разширение.

Основни методи:

• chrome.i18n.getMessage(): Извлича локализиран низ от директорията _locales на разширението.

Пример: Използване на chrome.i18n за локализация

Първо, създайте директория _locales в основната папка на вашето разширение. Вътре създайте специфични за езика папки като en, es, fr и т.н.

Във всяка езикова папка създайте файл messages.json. Например, в _locales/en/messages.json:

            {
  "extensionName": {
    "message": "My Extension",
    "description": "The name of the extension."
  },
  "greetingMessage": {
    "message": "Hello, world!",
    "description": "A simple greeting message."
  }
}

            

              
                Copy
              
            
          

След това, във вашия JavaScript код:

            let extensionName = chrome.i18n.getMessage("extensionName");
let greeting = chrome.i18n.getMessage("greetingMessage");
console.log(extensionName); // Output: My Extension
console.log(greeting);      // Output: Hello, world!

            

              
                Copy
              
            
          

Съвместимост между браузърите

Докато Chrome е най-популярният браузър за разработка на разширения, важно е да се вземе предвид съвместимостта между браузърите. Firefox, Safari и други браузъри също поддържат разширения, но техните APIs и манифест формати могат да се различават леко.

За да се осигури съвместимост между браузърите:

• Използвайте WebExtensions API: WebExtensions API е стандартизиран API за разработка на разширения за браузъри, който се поддържа от няколко браузъра.
• Тествайте в различни браузъри: Тествайте разширението си в различни браузъри, за да идентифицирате и отстраните проблеми със съвместимостта.
• Използвайте polyfills: Използвайте polyfills, за да предоставите липсващата функционалност на API в различни браузъри.
• Условен код: Използвайте условен код, за да се адаптирате към специфичните разлики в браузърите. Например: if (typeof browser === "undefined") { var browser = chrome; }

Най-добри практики за разработка на разширения за браузъри

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

• Минимизирайте разрешенията: Изисквайте само разрешенията, които вашето разширение абсолютно се нуждае. Това подобрява поверителността и сигурността на потребителите.
• Използвайте практики за сигурно кодиране: Следвайте практики за сигурно кодиране, за да предотвратите уязвимости като междусайтов скриптинг (XSS) и инжектиране на код.
• Оптимизирайте производителността: Оптимизирайте производителността на вашето разширение, за да сведете до минимум въздействието му върху производителността на браузъра.
• Предоставете ясна и кратка документация: Предоставете ясна и кратка документация, за да помогнете на потребителите да разберат как да използват вашето разширение.
• Обработвайте грешките грациозно: Приложете обработка на грешки, за да предотвратите сриване на разширението или причиняване на неочаквано поведение.
• Поддържайте разширението си актуално: Редовно актуализирайте разширението си, за да отстранявате грешки, уязвимости в сигурността и проблеми със съвместимостта.
• Обмислете интернационализацията (i18n): Проектирайте разширението си така, че да бъде лесно локализирано на различни езици. Използвайте API chrome.i18n.
• Уважавайте поверителността на потребителите: Бъдете прозрачни за това как вашето разширение събира и използва потребителски данни и получавайте съгласието на потребителя, когато е необходимо. Спазвайте съответните правила за поверителност като GDPR и CCPA.

Изпращане на вашето разширение в магазините

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

• Chrome Web Store: Изпратете разширението си в Chrome Web Store за потребители на Chrome. Процесът включва създаване на акаунт на разработчик, пакетиране на разширението и качването му в магазина.
• Firefox Add-ons: Изпратете разширението си в Firefox Add-ons за потребители на Firefox. Процесът е подобен на Chrome Web Store и включва създаване на акаунт на разработчик и изпращане на разширението ви за преглед.
• Safari Extensions Gallery: Изпратете разширението си в Safari Extensions Gallery за потребители на Safari. Процесът включва получаване на сертификат за разработчик от Apple и изпращане на разширението си за преглед.

Когато изпращате разширението си, не забравяйте да предоставите точна и пълна информация, включително описателно заглавие, подробно описание, снимки на екрана и политика за поверителност. Магазините за разширения преглеждат заявките, за да гарантират, че те отговарят на техните политики и насоки.

Заключение

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

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

Това ръководство предоставя солидна основа за започване на разработка на разширения за браузъри. Докато се задълбочавате, изследвайте различните налични APIs и функции и експериментирайте с различни техники, за да създадете иновативни и въздействащи разширения.