от 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.htmlThe 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}) } )}Публикация вашего расширения
С этим кодом теперь можно взаимодействовать с текущим браузером без необходимости писать два или более различных проектов веб-расширений. Теперь вы можете запаковать свое расширение и опубликовать в нескольких веб-магазинах с помощью одного файла!