Как сделать расширение кросс-браузера с помощью javascript и API-браузера

Автор оригинала: FreeCodeCamp Community Member.

RyanwhoCode

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

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

Чтобы увидеть завершенный пример, вот ссылка на расширение, которое я сделал под названием Ссылка Formatter с помощью кросс-браузера JavaScript внутри popup.js Отказ Та же пакет указан как в файлах Chrome, так и в Firefox.

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

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

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

При разработке вашего расширения вы можете загрузить его локально, без публикации и скачивания его с внешнего веб-сайта. Как вы это делаете, зависит от того, какой браузер вы используете.

Хром

Посетить Chrome://Расширения/ В вашем браузере Chrome
Нажмите Загрузить распакованный
Выберите папку расширения

Fire Fox

Посетить О: Отладка
Нажмите на Загрузить временное дополнение
Выберите манифест .json в папке расширения

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

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

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

Для Больше на веб-расширении API, Посмотреть JavaScript APIS – Mozilla | MDN Отказ

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

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

popup.html Страница тогда запустила бы js/popup.js скрипт внизу страницы. Вы добавили бы ваш JavaScript здесь.

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

Вкладка браузера API

При написании веб-расширения необходимо использовать вкладки API для взаимодействия с вкладками в браузере. Вам также нужно запросить разрешение от пользователя, чтобы сделать это.

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

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

"permissions": [    "tabs"  ]

Запрошительные вкладки с API браузера

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

browser.tabs.query(  queryInfo  // object)

Узнайте больше о Browser.tabs.query at 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 имеет свой собственный API для запросов вкладок. Это следует за синтаксисом Chrome.tabs → Ваш запрос

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

Узнайте больше о вкладках Chrome’s 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}) } )}

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

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

Подробнее из средних

Как ссылаться на конкретный абзац в вашей средней статье (Способ одержимости 2018 года) По Куинси Ларсон в FreeCodeCamp.
Совершенствование среднего опыта: одно расширение браузера за раз в Седрик Амая в FreeCodeCamp.