Hogyan lehet keresztböngésző kiterjesztést készíteni JavaScript és böngésző API-k segítségével

Ez az oktatóanyag bemutatja, hogyan hozhat létre webbővítményt, amely több böngészőben működik. Megmutatja, hogyan kell strukturálni a projektet, és hogyan kell JavaScript-kódot írni a böngésző fülével való együttműködéshez, attól függően, hogy melyik böngészőt használja. Ez azt jelenti, hogy kódolhat, majd terjeszthet egy kiterjesztési csomagot több böngésző webáruházában.

Ez a bejegyzés a Chrome és a Firefox böngészőkre összpontosít, valamint kiterjesztéseket terjeszt a Chrome Internetes áruház és a Firefox kiegészítők webhelyein keresztül. Más böngészők és terjesztési lehetőségek is elérhetők a webbővítmények számára.

Kezdje el egy sablonnal - másolja, szerkessze és publikálja!

A kitöltött példa megtekintéséhez itt talál egy linket egy általam készített kiterjesztéshez, amely Link Formatter nevű, a böngészők közötti böngészővel a popup.js fájlban. Ugyanaz a csomag szerepel mind a Chrome, mind a Firefox webáruházakban.

Böngészőbővítmények

A kiterjesztések fantasztikus módon bővítik a böngésző funkcionalitását, és lehetővé teszik az online élmény javítását. Ha építi az elsőt, vagy többet szeretne megtudni róluk, ajánlom a következő oktatóanyagokat:

  • Böngészőbővítmények - Mozilla MDN
  • Mik azok a kiterjesztések? - Google Chrome
  • A kiterjesztés anatómiája - Mozilla | MDN

Helyezze be a kiterjesztést helyileg a számítógépére

A bővítmény fejlesztésekor lokálisan betöltheti anélkül, hogy közzé kellene tennie és le kellene töltenie egy külső webhelyről. Ennek módja attól függ, hogy melyik böngészőt használja.

Króm

  • Látogasson chrome://extensions/el a Chrome böngészőjébe
  • Kattintson a gombra Load Unpacked
  • Válassza ki a kiterjesztés mappáját

Firefox

  • Látogatás about:debugging
  • Kattintson Load Temporary Add-on
  • Válassza ki a manifest.jsonkiterjesztés mappájában

Hibakeresési tipp : a konzol megtekintéséhez (például a hibák megtekintéséhez) kattintson a jobb gombbal / vezérlőgombbal a webbővítmény ikonjára vagy felugró ablakára, majd válassza ainspect

JavaScript írása a böngésző kiterjesztéséhez

Számos JavaScript API használható a böngésző kiterjesztésében. Ez a bejegyzés a fülek API-jára összpontosít.

A webkiterjesztés API-kkal kapcsolatos további információkért lásd: JavaScript API-k - Mozilla | MDN.

Az a böngészőbővítmény, amely felugró HTML oldalt tartalmaz, amikor a felhasználó rákattint a böngésző eszköztárának ikonjára, egy ilyen projektszerkezettel rendelkezhet:

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

Ezután az popup.htmloldal futtatná a js/popup.jsszkriptet az oldal alján. Ide adná a JavaScript-et.

Megjegyzés : más projektstruktúráknak lehet mappája a könyvtár kódjának, valamint a kiterjesztés más területein futó JavaScript fájloknak. Például a kiterjesztés háttérszkriptjeiben és a kiterjesztéshez mellékelt bármely más dokumentumban, beleértve a böngésző műveleteit vagy az oldalműveletek felugró ablakait, az oldalsávokat, az opciós oldalakat vagy az új lapokat.

Böngésző lap API-k

Webbővítmény írásakor a tabs API-t kell használnia a böngészőben található fülekkel való interakcióhoz. Ehhez engedélyt is kell kérnie a felhasználótól.

Engedélyek kérése a fülek eléréséhez

Be kell állítani az engedélyeket manifest.json. Amikor a felhasználó megpróbálja telepíteni a kiterjesztést, arra kéri a felhasználót, hogy erősítse meg, hogy ez a művelet megengedett.

"permissions": [ "tabs" ]

Fülek lekérdezése a böngésző API-val

A böngészők, például a Firefox, az browser.tabsAPI-t használják a böngésző lapjaival való interakcióhoz. Az ablak fülekkel kapcsolatos információk kéréséhez használja a querymetódust, amely ígéretet ad vissza egy tömb tabulátorral.

browser.tabs.query( queryInfo // object)

További információ a browser.tabs.query webhelyről a tabs.query () - Mozilla | oldalon MDN

A böngészőablak aktív fülének kéréséhez írja be a következő JavaScript-et:

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

Az aktuális fül megszerzéséhez be kell szereznie az első lapot a visszaadott fültömbből. Ezt a struktúrát követve az adatokat a böngésző fülről szerezheti be.

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

Amikor azonban megpróbálja megnyitni a kiterjesztést a Chrome-ban ...

Fülek lekérdezése a króm API-val

A Chrome saját API-val rendelkezik a füllekérdezésekhez. Ez követi a szintaxist chrome.tabs→ a lekérdezést

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

A Chrome lapjai API-ról itt olvashat bővebben: 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!