от ryanwhocodes

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

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

Начните работу с шаблоном – копируйте, редактируйте и публикуйте!

Чтобы увидеть завершенный пример, вот ссылка на расширение, которое я создал под названием Link Formatter, с межбраузерным JavaScript в popup.js. В магазинах Chrome и Firefox есть один и тот же пакет.

Расширение для браузера

Расширение – фантастический способ расширить функциональность вашего браузера, и они позволяют улучшить работу в Интернете. Если вы создаете свой первый или хотите узнать о них больше, я рекомендую следующие пособия:

Загрузите расширение локально на компьютере

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

Chrome

• Посетить chrome://extensions/ в вашем браузере Chrome
• Нажмите Load Unpacked
• Выберите папку расширения

Firefox

• Посетить about:debugging
• Нажмите на Load Temporary Add-on
• Выберите manifest.json в папке расширения

Совет по отладке: для просмотра консоли (например, чтобы увидеть ошибки), щелкните правой кнопкой мыши/ щелкните по значку веб-расширения или всплывающему окну и выберите inspect

Написание JavaScript для расширения вашего браузера

Существует много JavaScript API, которые можно использовать в вашем расширении браузера. Эта публикация будет посвящена вкладкам API.

Для больше о API веб-расширений, см. API JavaScript — Mozilla | MDN.

Расширение для браузера, содержащее всплывающую страницу HTML, когда пользователь нажимает значок на панели инструментов браузера, может иметь следующую структуру проекта:

extension├── css│   └── style.css├── js│   └── popup.js├── manifest.json└── popup.html

The popup.html на странице будет запущено js/popup.js сценарий внизу страницы. Вы бы добавили свой JavaScript здесь.

Примечание: другие структуры проекта могут иметь папку для библиотечного кода, а также файлы JavaScript, запускаемые в других областях расширения. Например, в фоновых сценариях расширения и в других документах, входящих в комплект с расширением, включая всплывающие окна действия браузера или страницы, боковые панели, страницы параметров или страницы новой вкладки.

API вкладки браузера

При написании веб-расширений вам нужно использовать вкладки API для взаимодействия с вкладками в браузере. Для этого также нужно запросить разрешение у пользователя.

Запрос разрешений на доступ к вкладкам

Необходимо установить разрешения manifest.json. Когда пользователь пытается установить расширение, он предложит пользователю подтвердить, что это действие разрешено.

"permissions": [    "tabs"  ]

Запрос вкладок с помощью API обозревателя

Браузеры, такие как Firefox, используют browser.tabs API для взаимодействия с вкладками обозревателя. Чтобы запросить информацию о вкладках окна, вы используете query метод, возвращающий обещание с массивом вкладок.

browser.tabs.query(  queryInfo  // object)

Узнайте больше о browser.tabs.query на странице tabs.query() — Mozilla | MDN

Чтобы запросить активную вкладку для окна браузера, вы должны написать следующий JavaScript:

browser.tabs.query({active: true, currentWindow: true}) .then(logCurrentTabData)

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

const logCurrentTabData = (tabs) => {  currentTab = tabs[0]  console.log(currentTab.title);  console.log(currentTab.url);}

Однако, когда вы пытаетесь открыть расширение в Chrome…

Запрос вкладок с помощью API Chrome

Chrome имеет свой API для запросов вкладок. Это соответствует синтаксису chrome.tabs → ваш запрос

chrome.tabs.query(object queryInfo, function callback)

Узнайте больше о вкладках Chrome API здесь: chrome.tabs — Google Chrome.

Итак, чтобы использовать этот вызов метода, вы должны написать следующее в расширении вашего браузера:

chrome.tabs.query(   {active: true, currentWindow: true},   (arrayOfTabs) => { logCurrentTabData(arrayOfTabs) });

Комбинирование запросов вкладок

Определите, какой API использовать

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

if(chrome) {  chrome.tabs.query(    {active: true, currentWindow: true},    (arrayOfTabs) => { logCurrentTabData(arrayOfTabs) }  );} else {  browser.tabs.query({active: true, currentWindow: true})    .then(logCurrentTabData)}

Добавление дополнительного кода для каждого типа браузера

В каждую сторону условия можно добавить другие фрагменты кода, зависящие от различных API, например для создания новых вкладок.

chrome.tabs.create()browser.tabs.create()

Вот код с дополнительными методами, открывающий ссылку в новой вкладке.

if(chrome) {  chrome.tabs.query(    {active: true, currentWindow: true},    (arrayOfTabs) => { logCurrentTabData(arrayOfTabs) }    );  $('a').click( (event) => { chrome.tabs.create({url:event.target.href}) } )} else {  browser.tabs.query({active: true, currentWindow: true})    .then(logCurrentTabData)  $('a').click( (event) => { browser.tabs.create({url:event.target.href}) } )}

Публикация вашего расширения

С этим кодом теперь можно взаимодействовать с текущим браузером без необходимости писать два или более различных проектов веб-расширений. Теперь вы можете запаковать свое расширение и опубликовать в нескольких веб-магазинах с помощью одного файла!

Читайте больше на Medium

Читайте больше от ryanwhocodes