So erstellen Sie eine browserübergreifende Erweiterung mithilfe von JavaScript und Browser-APIs

In diesem Tutorial erfahren Sie, wie Sie eine Web-Erweiterung erstellen, die in mehreren Browsern funktioniert. Es zeigt Ihnen, wie Sie ein Projekt strukturieren und JavaScript-Code schreiben, um mit den Registerkarten des Browsers zu interagieren, je nachdem, welcher Browser verwendet wird. Dies bedeutet, dass Sie ein Erweiterungspaket codieren und dann an die Webshops mehrerer Browser verteilen können.

Dieser Beitrag konzentriert sich auf die Browser Chrome und Firefox sowie auf die Verteilung von Erweiterungen über die Websites des Chrome Web Store und der Firefox-Add-Ons. Andere Browser und Verteilungsoptionen sind auch für Web-Erweiterungen verfügbar.

Beginnen Sie mit einer Vorlage - kopieren, bearbeiten und veröffentlichen!

Um ein vollständiges Beispiel zu sehen, finden Sie hier einen Link zu einer von mir erstellten Erweiterung namens Link Formatter mit dem browserübergreifenden JavaScript in popup.js. Das gleiche Paket ist sowohl im Chrome- als auch im Firefox-Webshop aufgeführt.

Browser-Erweiterungen

Erweiterungen sind eine fantastische Möglichkeit, die Funktionalität Ihres Browsers zu erweitern, und ermöglichen es Ihnen, Ihre Online-Erfahrung zu verbessern. Wenn Sie Ihr erstes erstellen oder mehr darüber erfahren möchten, empfehle ich die folgenden Tutorials:

  • Browser-Erweiterungen - Mozilla | MDN
  • Was sind Erweiterungen? - Google Chrome
  • Anatomie einer Erweiterung - Mozilla | MDN

Laden Sie Ihre Erweiterung lokal auf Ihren Computer

Wenn Sie Ihre Erweiterung entwickeln, können Sie sie lokal laden, ohne sie veröffentlichen und von einer externen Website herunterladen zu müssen. Wie Sie dies tun, hängt davon ab, welchen Browser Sie verwenden.

Chrom

  • Besuchen Sie chrome://extensions/in Ihrem Chrome-Browser
  • Klicken Load Unpacked
  • Wählen Sie den Ordner der Erweiterung aus

Feuerfuchs

  • Besuch about:debugging
  • Klicke auf Load Temporary Add-on
  • Wählen Sie den manifest.jsonOrdner der Erweiterung aus

Debugging-Tipp : Um die Konsole anzuzeigen (z. B. um Fehler anzuzeigen), klicken Sie mit der rechten Maustaste auf das Web-Erweiterungssymbol oder Popup und wählen Sieinspect

Schreiben von JavaScript für Ihre Browser-Erweiterung

Es gibt viele JavaScript-APIs, die in Ihrer Browsererweiterung verwendet werden können. Dieser Beitrag konzentriert sich auf die Registerkarten-API.

Weitere Informationen zu Web-Erweiterungs-APIs finden Sie unter JavaScript-APIs - Mozilla | MDN.

Eine Browsererweiterung, die eine Popup-HTML-Seite enthält, wenn der Benutzer auf das Symbol in der Symbolleiste des Browsers klickt, kann eine Projektstruktur wie die folgende haben:

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

Die popup.htmlSeite würde dann das js/popup.jsSkript am Ende der Seite ausführen . Sie würden hier Ihr JavaScript hinzufügen.

Hinweis : Andere Projektstrukturen können einen Ordner für Bibliothekscode sowie JavaScript-Dateien enthalten, die in anderen Bereichen der Erweiterung ausgeführt werden. Zum Beispiel in den Hintergrundskripten der Erweiterung und in allen anderen mit der Erweiterung gebündelten Dokumenten, einschließlich Popups für Browseraktionen oder Seitenaktionen, Seitenleisten, Optionsseiten oder neuen Registerkarten.

APIs auf der Registerkarte "Browser"

Wenn Sie eine Web-Erweiterung schreiben, müssen Sie die Registerkarten-API verwenden, um mit den Registerkarten im Browser zu interagieren. Sie müssen auch die Erlaubnis des Benutzers anfordern, um dies zu tun.

Anfordern von Berechtigungen für den Zugriff auf Registerkarten

Berechtigungen müssen festgelegt werden manifest.json. Wenn ein Benutzer versucht, die Erweiterung zu installieren, wird er aufgefordert, zu bestätigen, dass diese Aktion zulässig ist.

"permissions": [ "tabs" ]

Abfragen von Registerkarten mit der Browser-API

Browser wie Firefox verwenden die browser.tabsAPI, um mit den Registerkarten des Browsers zu interagieren. Um Informationen zu den Registerkarten des Fensters anzufordern, verwenden Sie die queryMethode, die ein Versprechen mit einer Reihe von Registerkarten zurückgibt.

browser.tabs.query( queryInfo // object)

Weitere Informationen zu browser.tabs.query finden Sie unter tabs.query () - Mozilla | MDN

Um die aktive Registerkarte für das Browserfenster anzufordern, schreiben Sie das folgende JavaScript:

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

Um die aktuelle Registerkarte abzurufen, rufen Sie die erste Registerkarte aus dem zurückgegebenen Array von Registerkarten ab. Nach dieser Struktur können Sie die Daten von der Registerkarte Browser abrufen.

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

Wenn Sie jedoch versuchen, die Erweiterung in Chrome zu öffnen, wird…

Abfragen von Registerkarten mit der Chrome-API

Chrome verfügt über eine eigene API für Registerkartenabfragen. Dies folgt der Syntax chrome.tabs→ Ihrer Abfrage

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

Weitere Informationen zur Tab-API von Chrome finden Sie hier: 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!