Як зробити крос-браузерне розширення за допомогою JavaScript та браузерних API

У цьому посібнику буде розказано про те, як створити веб-розширення, яке працює у багатьох браузерах. Він покаже вам, як структурувати проект та писати код JavaScript для взаємодії з вкладками браузера, залежно від того, який браузер використовується. Це означає, що ви можете кодувати, а потім розповсюджувати один пакет розширень у веб-магазинах багатьох браузерів.

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

Почніть із шаблону - копіюйте, редагуйте та публікуйте!

Щоб побачити завершений приклад, ось посилання на розширення, яке я зробив під назвою Link Formatter, з JavaScript для крос-браузера в popup.js Той самий пакет вказаний як у веб-магазинах Chrome, так і у Firefox.

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

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

  • Розширення браузера - Mozilla | MDN
  • Що таке розширення? - Гугл хром
  • Анатомія розширення - Mozilla | MDN

Завантажте розширення локально на комп’ютер

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

Chrome

  • Відвідайте chrome://extensions/у своєму браузері Chrome
  • Клацніть Load Unpacked
  • Виберіть папку розширення

Firefox

  • Відвідайте about:debugging
  • Натисніть на Load Temporary Add-on
  • Виберіть manifest.jsonвсередині папки розширення

Порада щодо налагодження : щоб переглянути консоль (наприклад, щоб побачити помилки), клацніть правою кнопкою миші / клацніть на значку веб-розширення або спливаючому вікні та виберітьinspect

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

Існує багато API JavaScript, які можна використовувати у розширенні браузера. Ця публікація буде зосереджена на API вкладок.

Щоб отримати докладнішу інформацію про API веб-розширень, див. API API - Mozilla | MDN.

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

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

Потім на popup.htmlсторінці запускався js/popup.jsсценарій внизу сторінки. Ви б додали тут свій JavaScript.

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

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

Під час написання веб-розширення вам потрібно використовувати API вкладок для взаємодії з вкладками в браузері. Для цього також потрібно попросити дозволу у користувача.

Запит дозволів на доступ до вкладок

Потрібно встановити дозволи manifest.json. Коли користувач намагається встановити розширення, він запропонує користувачеві підтвердити, що ця дія дозволена.

"permissions": [ "tabs" ]

Запит на вкладках за допомогою API браузера

Браузери, такі як Firefox, використовують browser.tabsAPI для взаємодії з вкладками браузера. Щоб отримати інформацію про вкладки вікна, ви використовуєте 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…

Запит на вкладках за допомогою chrome API

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

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

Детальніше про API вкладок Chrome читайте тут: chrome.tabs - Google Chrome.

So to use this method call, you would write the following in your browser extension:

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

Combining tab queries

Detect which API to use

You can then include both types of browser queries in your extension by using a conditional statement to determine which one to use.

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

Adding more code for each browser type

Within each side of the condition, you can then add other pieces of code that depend on the different APIs, for example to create new tabs.

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

Here is the code with the extra methods added in that opens a link in a new tab.

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}) } )}

Publishing your extension

With this code in place, you can now interact with the current browser without having to write two or more different web extension projects. You can now package your extension and publish to multiple web stores with the same file!

  • Publish in the Chrome Web Store — Google Chrome
  • Developer Hub :: Add-ons for Firefox

Read more from Medium

  • How to link to a specific paragraph in your Medium article (2018 Table of Contents method) by Quincy Larson in freeCodeCamp
  • Improving the Medium Experience: One browser extension at a time by in cedric amaya in freeCodeCamp

Read more from ryanwhocodes

  • How you can make a progressive web app in an hour
  • Mind your programming language: How to use Github Linguist and gitattributes to detect your app’s code type accurately
  • Make your terminal more colourful and productive with iTerm2 and Zsh!