Erstellen einer Browsererweiterung für alle Browser: Edge, Chrome, Firefox, Opera, Brave und Vivaldi

Ich erkläre Ihnen, wie Sie diese Erweiterung installieren können, die das Weberweiterungsmodell (d. h. Edge, Chrome, Firefox, Opera, Brave und Vivaldi) unterstützt, und gebe Ihnen einige einfache Tipps, wie Sie für alle eine einzigartige Codebasis erhalten auch wie man in jedem Browser debuggt.

Hinweis: Safari wird in diesem Artikel nicht behandelt, da es nicht dasselbe Erweiterungsmodell wie andere unterstützt.

Grundlagen

Ich werde die Grundlagen der Erweiterungsentwicklung nicht behandeln, da bereits viele gute Ressourcen von jedem Anbieter verfügbar sind:

• Google
• Microsoft (siehe auch das großartige Übersichtsvideo „Building Extensions for Microsoft Edge“)
• Mozilla (siehe auch Wiki)
• Oper
• Tapfer

Wenn Sie also noch nie eine Erweiterung erstellt haben oder nicht wissen, wie sie funktioniert, werfen Sie einen kurzen Blick auf diese Ressourcen. Keine Sorge: Der Aufbau ist einfach und unkompliziert.

Unsere Erweiterung

Lassen Sie uns einen Machbarkeitsnachweis erstellen – eine Erweiterung, die künstliche Intelligenz (KI) und Computer Vision verwendet, um Blinden bei der Analyse von Bildern auf einer Webseite zu helfen.

Wir werden sehen, dass wir mit ein paar Codezeilen einige leistungsstarke Funktionen im Browser erstellen können. In meinem Fall beschäftige ich mich mit Barrierefreiheit im Web und habe bereits einige Zeit damit verbracht, darüber nachzudenken, wie man beispielsweise ein Breakout-Spiel mit Web-Audio und SVG zugänglich machen kann.

Trotzdem habe ich nach etwas gesucht, das Blinden auf allgemeinere Weise helfen würde. Ich wurde kürzlich inspiriert, als ich einen großartigen Vortrag von Chris Heilmann in Lissabon hörte: „Pixels and Hidden Meaning in Pixels“.

In der Tat können wir mit den heutigen KI-Algorithmen in der Cloud sowie mit Text-to-Speech-Technologien, die im Browser mit der Web Speech API oder mit einem Remote-Cloud-Service verfügbar gemacht werden, sehr einfach eine Erweiterung erstellen, die Webseitenbilder mit fehlenden analysiert oder falsch ausgefüllte alt .

Mein kleiner Proof of Concept extrahiert einfach Bilder von einer Webseite (der im aktiven Tab) und zeigt die Miniaturansichten in einer Liste an. Wenn Sie auf eines der Bilder klicken, fragt die Erweiterung die Computer Vision API ab, um einen beschreibenden Text für das Bild zu erhalten, und verwendet dann entweder die Web Speech API oder die Bing Speech API , um es mit dem Besucher zu teilen.

Das folgende Video zeigt es in Edge, Chrome, Firefox, Opera und Brave.

Sie werden feststellen, dass die Computer Vision API selbst bei der Analyse einiger CGI-Bilder sehr genau ist! Ich bin wirklich beeindruckt von den Fortschritten, die die Branche in den letzten Monaten diesbezüglich gemacht hat.

Ich verwende diese Dienste:

• Computer Vision API, Microsoft Cognitive Services
  Dies ist kostenlos (mit einem Kontingent). Sie müssen einen kostenlosen Schlüssel generieren; Ersetzen Sie den TODO -Abschnitt im Code durch Ihren Schlüssel, damit diese Erweiterung auf Ihrem Computer funktioniert. Um eine Vorstellung davon zu bekommen, was diese API kann, spielen Sie damit herum.



• Bing Text-to-Speech-API, Microsoft Cognitive Services
  Dies ist auch kostenlos (auch mit einem Kontingent). Sie müssen erneut einen kostenlosen Schlüssel generieren. Wir werden auch eine kleine Bibliothek verwenden, die ich kürzlich geschrieben habe, um diese API von JavaScript aus aufzurufen. Wenn Sie keinen Bing-Schlüssel haben, greift die Erweiterung immer auf die Web Speech API zurück, die von allen neueren Browsern unterstützt wird.

Aber Sie können gerne andere ähnliche Dienste ausprobieren:

• Visuelle Erkennung, IBM Watson
• Cloud Vision-API, Google

Den Code für diese kleine Browsererweiterung finden Sie auf meiner GitHub-Seite. Fühlen Sie sich frei, den Code für andere Produkte zu ändern, die Sie testen möchten.

Tipp, um Ihren Code mit allen Browsern kompatibel zu machen

Die meisten Codes und Tutorials, die Sie finden werden, verwenden den Namespace chrome.xxx für die Erweiterungs-API (zum Beispiel chrome.tabs ).

Aber wie gesagt, das Erweiterungs-API-Modell wird derzeit auf browser.xxx standardisiert, und einige Browser definieren in der Zwischenzeit ihre eigenen Namespaces (z. B. verwendet Edge msBrowser ).

Glücklicherweise bleibt der größte Teil der API hinter dem Browser gleich. Dank der Schönheit von JavaScript ist es also sehr einfach, einen kleinen Trick zu erstellen, um alle Browser und Namespace-Definitionen zu unterstützen:

 window.browser = (function () { return window.msBrowser || window.browser || window.chrome; })();

Und voila!

Natürlich müssen Sie auch die Teilmenge der API verwenden, die von allen Browsern unterstützt wird. Zum Beispiel:

• Microsoft Edge hat eine Supportliste.
• Mozilla Firefox teilt seine aktuellen Chrome-Inkompatibilitäten.
• Opera führt eine eigene Liste von Erweiterungs-APIs, die von seinem Browser unterstützt werden.

Erweiterungsarchitektur

Lassen Sie uns gemeinsam die Architektur dieser Erweiterung überprüfen. Wenn Sie mit Browsererweiterungen noch nicht vertraut sind, sollte Ihnen dies helfen, den Ablauf zu verstehen.

Beginnen wir mit der Manifestdatei:

Diese Manifestdatei und das zugehörige JSON sind das Minimum, das Sie benötigen, um eine Erweiterung in allen Browsern zu laden, wenn wir natürlich nicht den Code der Erweiterung selbst berücksichtigen. Bitte überprüfen Sie die Quelle in meinem GitHub-Konto und beginnen Sie von hier aus, um sicherzustellen, dass Ihre Erweiterung mit allen Browsern kompatibel ist.

Beispielsweise müssen Sie eine author angeben, um sie in Edge zu laden. Andernfalls wird ein Fehler ausgegeben. Sie müssen auch die gleiche Struktur für die Symbole verwenden. Die Eigenschaft default_title ist auch deshalb wichtig, weil sie von Screenreadern in einigen Browsern verwendet wird.

Hier sind Links zur Dokumentation, die Ihnen helfen, eine Manifestdatei zu erstellen, die überall kompatibel ist:

• Chrom
• Rand
• Feuerfuchs

Die in diesem Artikel verwendete Beispielerweiterung basiert hauptsächlich auf dem Konzept des Inhaltsskripts. Dies ist ein Skript, das im Kontext der Seite lebt, die wir untersuchen möchten. Da es Zugriff auf das DOM hat, hilft es uns, die auf der Webseite enthaltenen Bilder abzurufen. Wenn Sie mehr darüber wissen möchten, was ein Inhaltsskript ist, haben Opera, Mozilla und Google eine Dokumentation dazu.

Unser Inhaltsskript ist einfach:

 console.log("Dare Angel content script started"); browser.runtime.onMessage.addListener(function (request, sender, sendResponse) { if (request.command == "requestImages") { var images = document.getElementsByTagName('img'); var imagesList = []; for (var i = 0; i < images.length; i++) { if ((images[i].src.toLowerCase().endsWith(".jpg") || images[i].src.toLowerCase().endsWith(".png")) && (images[i].width > 64 && images[i].height > 64)) { imagesList.push({ url: images[i].src, alt: images[i].alt }); } } sendResponse(JSON.stringify(imagesList)); } }); view raw

Dies meldet sich zuerst bei der Konsole an, damit Sie überprüfen können, ob die Erweiterung ordnungsgemäß geladen wurde. Überprüfen Sie es über das Entwicklertool Ihres Browsers, auf das Sie über F12 , Control + Shift + I oder ⌘ + ⌥ + I zugreifen können.

Es wartet dann auf eine Nachricht von der UI-Seite mit einem requestImages Befehl, um alle im aktuellen DOM verfügbaren Bilder abzurufen, und gibt dann eine Liste ihrer URLs zurück, wenn sie größer als 64 × 64 Pixel sind (um alle zu vermeiden der Pixel-Tracking-Junk und Bilder mit niedriger Auflösung).

Die von uns verwendete Popup-UI-Seite ist sehr einfach und zeigt die Liste der Bilder an, die vom Inhaltsskript in einem Flexbox-Container zurückgegeben werden. Es lädt das start.js Skript, das sofort eine Instanz von dareangel.dashboard.js , um eine Nachricht an das Inhaltsskript zu senden, um die URLs der Bilder in der aktuell sichtbaren Registerkarte zu erhalten.

Hier ist der Code, der sich auf der UI-Seite befindet und die URLs zum Inhaltsskript anfordert:

 browser.tabs.query({ active: true, currentWindow: true }, (tabs) => { browser.tabs.sendMessage(tabs[0].id, { command: "requestImages" }, (response) => { this._imagesList = JSON.parse(response); this._imagesList.forEach((element) => { var newImageHTMLElement = document.createElement("img"); newImageHTMLElement.src = element.url; newImageHTMLElement.alt = element.alt; newImageHTMLElement.tabIndex = this._tabIndex; this._tabIndex++; newImageHTMLElement.addEventListener("focus", (event) => { if (COMPUTERVISIONKEY !== "") { this.analyzeThisImage(event.target.src); } else { var warningMsg = document.createElement("div"); warningMsg.innerHTML = "
 Bitte generieren Sie auf der anderen Registerkarte einen Computer Vision-Schlüssel.
 ";
                    this._targetDiv.insertBefore(warningMsg, this._targetDiv.firstChild);
                    browser.tabs.create({aktiv: falsch, URL: "https://www.microsoft.com/cognitive-services/en-US/sign-up?ReturnUrl=/cognitive-services/en-us/subscriptions?productId =%2fproducts%2f54d873dd5eefd00dc474a0f4" });
                }
            });
            this._targetDiv.appendChild(newImageHTMLElement);
        });
    });
});

Wir erstellen Bildelemente. Jedes Bild löst ein Ereignis aus, wenn es den Fokus hat, und fragt die Computer Vision API zur Überprüfung ab.

Dies geschieht durch diesen einfachen XHR-Aufruf:

 analyzeThisImage(url) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => { if (xhr.readyState == 4 && xhr.status == 200) { var response = document.querySelector('#response'); var reponse = JSON.parse(xhr.response); var resultToSpeak = `With a confidence of ${Math.round(reponse.description.captions[0].confidence * 100)}%, I think it's ${reponse.description.captions[0].text}`; console.log(resultToSpeak); if (!this._useBingTTS || BINGSPEECHKEY === "") { var synUtterance = new SpeechSynthesisUtterance(); synUtterance.text = resultToSpeak; window.speechSynthesis.speak(synUtterance); } else { this._bingTTSclient.synthesize(resultToSpeak); } } }; xhr.onerror = (evt) => { console.log(evt); }; try { xhr.open('POST', 'https://api.projectoxford.ai/vision/v1.0/describe'); xhr.setRequestHeader("Content-Type", "application/json"); xhr.setRequestHeader("Ocp-Apim-Subscription-Key", COMPUTERVISIONKEY); var requestObject = { "url": url }; xhr.send(JSON.stringify(requestObject)); } catch (ex) { console.log(ex); } } view raw

Die folgenden Artikel helfen Ihnen zu verstehen, wie diese Computer Vision API funktioniert:

• „Analysieren einer Image-Version 1.0“, Microsoft Cognitive Services
• „API für maschinelles Sehen, v1.0“, Microsoft Cognitive Services
  Dies zeigt Ihnen über eine interaktive Konsole auf einer Webseite, wie Sie die REST-API mit den richtigen JSON-Eigenschaften und dem JSON-Objekt aufrufen, das Sie zurückerhalten. Es ist nützlich zu verstehen, wie es funktioniert und wie Sie es nennen werden.

In unserem Fall verwenden wir die describe der API. Sie werden im Rückruf auch feststellen, dass wir versuchen werden, je nach Ihren Optionen entweder die Web Speech API oder den Bing Text-to-Speech- Dienst zu verwenden.

Hier ist also der globale Workflow dieser kleinen Erweiterung:

Laden der Erweiterung in jedem Browser

Sehen wir uns kurz an, wie die Erweiterung in jedem Browser installiert wird.

Voraussetzungen

Laden Sie meine kleine Erweiterung von GitHub irgendwo auf Ihre Festplatte herunter oder klonen Sie sie.

Ändern dareangel.dashboard.js , um mindestens einen Computer Vision-API-Schlüssel hinzuzufügen. Andernfalls kann die Erweiterung nur die aus der Webseite extrahierten Bilder anzeigen.

Microsoft Edge

Zunächst benötigen Sie mindestens ein Windows 10 Anniversary Update (OS Build 14393+), um Unterstützung für Erweiterungen in Edge zu haben.

Öffnen Sie dann Edge und geben Sie about:flags in die Adressleiste ein. Überprüfen Sie die „Entwicklerfunktionen für Erweiterungen aktivieren“.

Klicken Sie in der Navigationsleiste des Edge auf „…“ und dann auf „Erweiterungen“ und dann auf „Erweiterung laden“ und wählen Sie den Ordner aus, in den Sie mein GitHub-Repository geklont haben. Du bekommst das:

Klicken Sie auf diese frisch geladene Erweiterung und aktivieren Sie „Schaltfläche neben der Adressleiste anzeigen“.

Beachten Sie die Schaltfläche „Erweiterung neu laden“, die beim Entwickeln Ihrer Erweiterung nützlich ist. Sie müssen es während des Entwicklungsprozesses nicht entfernen oder neu installieren; Klicken Sie einfach auf die Schaltfläche, um die Erweiterung zu aktualisieren.

Navigieren Sie zu BabylonJS und klicken Sie auf die Schaltfläche Dare Angel (DA), um der gleichen Demo wie im Video zu folgen.

Google Chrome, Oper, Vivaldi

Navigieren Sie in Chrome zu chrome://extensions . Navigieren Sie in Opera zu opera://extensions . Navigieren Sie in Vivaldi zu vivaldi://extensions . Aktivieren Sie dann den „Entwicklermodus“.

Klicken Sie auf „Entpackte Erweiterung laden“ und wählen Sie den Ordner aus, in dem Sie meine Erweiterung extrahiert haben.

Navigieren Sie zu BabylonJS und öffnen Sie die Erweiterung, um zu überprüfen, ob sie einwandfrei funktioniert.

Mozilla-Firefox

Sie haben hier zwei Möglichkeiten. Die erste besteht darin, Ihre Erweiterung vorübergehend zu laden, was so einfach ist wie in Edge und Chrome.

Öffnen Sie Firefox, navigieren Sie zu about:debugging und klicken Sie auf „Load Temporary Add-on“. Navigieren Sie dann zum Ordner der Erweiterung und wählen Sie die Datei manifest.json aus. Das ist es! Gehen Sie nun zu BabylonJS, um die Erweiterung zu testen.

Das einzige Problem bei dieser Lösung ist, dass Sie die Erweiterung jedes Mal neu laden müssen, wenn Sie den Browser schließen. Die zweite Option wäre die Verwendung der XPI-Verpackung. Mehr dazu erfahren Sie unter „Extension Packaging“ im Mozilla Developer Network.

Tapfer

Die öffentliche Version von Brave hat keinen eingebetteten „Entwicklermodus“, mit dem Sie eine unsignierte Erweiterung laden können. Sie müssen Ihre eigene Version davon erstellen, indem Sie die Schritte unter „Laden von Chrome-Erweiterungen in Brave“ befolgen.

Wie in diesem Artikel erklärt, müssen Sie nach dem Klonen von Brave die Datei extensions.js in einem Texteditor öffnen. Suchen Sie die Zeilen unten und geben Sie den Registrierungscode für Ihre Nebenstelle ein. In meinem Fall habe ich gerade die beiden letzten Zeilen hinzugefügt:

 // Manually install the braveExtension and torrentExtension extensionInfo.setState(config.braveExtensionId, extensionStates.REGISTERED) loadExtension(config.braveExtensionId, getExtensionsPath('brave'), generateBraveManifest(), 'component') extensionInfo.setState('DareAngel', extensionStates.REGISTERED) loadExtension('DareAngel', getExtensionsPath('DareAngel/')) view raw

Kopieren Sie die Erweiterung in den Ordner app/extensions . Öffnen Sie zwei Eingabeaufforderungen im browser-laptop Ordner. Starten Sie im ersten Fall npm run watch und warten Sie, bis das Webpack die Erstellung der Electron-App von Brave abgeschlossen hat. Es sollte heißen: „Webpack: Bundle ist jetzt GÜLTIG.“ Andernfalls werden Sie auf einige Probleme stoßen.

Starten Sie dann in der zweiten Eingabeaufforderung npm start , wodurch unsere leicht benutzerdefinierte Version von Brave gestartet wird.

Navigieren Sie in Brave zu about:extensions , und Sie sollten die Erweiterung angezeigt und in der Adressleiste geladen sehen.

Debuggen der Erweiterung in jedem Browser

Tipp für alle Browser : Mit console.log() protokollieren Sie einfach einige Daten aus dem Fluss Ihrer Erweiterung. In den meisten Fällen können Sie mit den Entwicklertools des Browsers auf die JavaScript-Datei klicken, die sie protokolliert hat, um sie zu öffnen und zu debuggen.

Microsoft Edge

Um den Client-Skriptteil zu debuggen, der im Kontext der Seite lebt, müssen Sie nur F12 öffnen. Klicken Sie dann auf die Registerkarte „Debugger“ und suchen Sie den Ordner Ihrer Erweiterung.

Öffnen Sie die Skriptdatei, die Sie debuggen möchten – in meinem Fall dareangel.client.js – und debuggen Sie Ihren Code wie gewohnt, indem Sie Haltepunkte einrichten usw.

Wenn Ihre Erweiterung einen separaten Tab erstellt, um ihre Aufgabe zu erledigen (wie der Page Analyzer, den unser Vorlon.js-Team im Store veröffentlicht hat), drücken Sie einfach F12 auf diesem Tab, um ihn zu debuggen.

Wenn Sie die Popup-Seite debuggen möchten, müssen Sie zuerst die ID Ihrer Erweiterung abrufen. Gehen Sie dazu einfach in die Eigenschaft der Erweiterung und Sie finden eine ID-Eigenschaft:

Dann müssen Sie etwas wie ms-browser-extension://ID_of_your_extension/yourpage.html in die Adressleiste eingeben. In unserem Fall wäre es ms-browser-extension://DareAngel_vdbyzyarbfgh8/dashboard.html . Dann nutzen Sie einfach F12 auf dieser Seite:

Google Chrome, Opera, Vivaldi, Brave

Da Chrome und Opera auf derselben Blink-Codebasis basieren, teilen sie denselben Debugging-Prozess. Obwohl Brave und Vivaldi Forks von Chromium sind, teilen sie sich die meiste Zeit den gleichen Debugging-Prozess.

Öffnen Sie zum Debuggen des Clientskriptteils die Entwicklertools des Browsers auf der Seite, die Sie debuggen möchten (drücken Sie F12 , Control + Shift + I oder ⌘ + ⌥ + I , je nach verwendetem Browser oder verwendeter Plattform).

Klicken Sie dann auf die Registerkarte „Inhaltsskripte“ und suchen Sie den Ordner Ihrer Erweiterung. Öffnen Sie die Skriptdatei, die Sie debuggen möchten, und debuggen Sie Ihren Code so, wie Sie es mit jedem anderen JavaScript-Code tun würden.

Die von uns verwendete Popup-UI-Seite ist sehr einfach und zeigt die Liste der Bilder an, die vom Inhaltsskript in einem Flexbox-Container zurückgegeben werden. Es lädt das start.js Skript, das sofort eine Instanz von dareangel.dashboard.js , um eine Nachricht an das Inhaltsskript zu senden, um die URLs der Bilder in der aktuell sichtbaren Registerkarte zu erhalten.

Hier ist der Code, der sich auf der UI-Seite befindet und die URLs zum Inhaltsskript anfordert:

 browser.tabs.query({ active: true, currentWindow: true }, (tabs) => { browser.tabs.sendMessage(tabs[0].id, { command: "requestImages" }, (response) => { this._imagesList = JSON.parse(response); this._imagesList.forEach((element) => { var newImageHTMLElement = document.createElement("img"); newImageHTMLElement.src = element.url; newImageHTMLElement.alt = element.alt; newImageHTMLElement.tabIndex = this._tabIndex; this._tabIndex++; newImageHTMLElement.addEventListener("focus", (event) => { if (COMPUTERVISIONKEY !== "") { this.analyzeThisImage(event.target.src); } else { var warningMsg = document.createElement("div"); warningMsg.innerHTML = "
 Bitte generieren Sie auf der anderen Registerkarte einen Computer Vision-Schlüssel.
 ";
                    this._targetDiv.insertBefore(warningMsg, this._targetDiv.firstChild);
                    browser.tabs.create({aktiv: falsch, URL: "https://www.microsoft.com/cognitive-services/en-US/sign-up?ReturnUrl=/cognitive-services/en-us/subscriptions?productId =%2fproducts%2f54d873dd5eefd00dc474a0f4" });
                }
            });
            this._targetDiv.appendChild(newImageHTMLElement);
        });
    });
});

Wir erstellen Bildelemente. Jedes Bild löst ein Ereignis aus, wenn es den Fokus hat, und fragt die Computer Vision API zur Überprüfung ab.

Dies geschieht durch diesen einfachen XHR-Aufruf:

 analyzeThisImage(url) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => { if (xhr.readyState == 4 && xhr.status == 200) { var response = document.querySelector('#response'); var reponse = JSON.parse(xhr.response); var resultToSpeak = `With a confidence of ${Math.round(reponse.description.captions[0].confidence * 100)}%, I think it's ${reponse.description.captions[0].text}`; console.log(resultToSpeak); if (!this._useBingTTS || BINGSPEECHKEY === "") { var synUtterance = new SpeechSynthesisUtterance(); synUtterance.text = resultToSpeak; window.speechSynthesis.speak(synUtterance); } else { this._bingTTSclient.synthesize(resultToSpeak); } } }; xhr.onerror = (evt) => { console.log(evt); }; try { xhr.open('POST', 'https://api.projectoxford.ai/vision/v1.0/describe'); xhr.setRequestHeader("Content-Type", "application/json"); xhr.setRequestHeader("Ocp-Apim-Subscription-Key", COMPUTERVISIONKEY); var requestObject = { "url": url }; xhr.send(JSON.stringify(requestObject)); } catch (ex) { console.log(ex); } } view raw

Die folgenden Artikel helfen Ihnen zu verstehen, wie diese Computer Vision API funktioniert:

• „Analysieren einer Image-Version 1.0“, Microsoft Cognitive Services
• „API für maschinelles Sehen, v1.0“, Microsoft Cognitive Services
  Dies zeigt Ihnen über eine interaktive Konsole auf einer Webseite, wie Sie die REST-API mit den richtigen JSON-Eigenschaften und dem JSON-Objekt aufrufen, das Sie zurückerhalten. Es ist nützlich zu verstehen, wie es funktioniert und wie Sie es nennen werden.

In unserem Fall verwenden wir die describe der API. Sie werden im Rückruf auch feststellen, dass wir versuchen werden, je nach Ihren Optionen entweder die Web Speech API oder den Bing Text-to-Speech- Dienst zu verwenden.

Hier ist also der globale Workflow dieser kleinen Erweiterung:

Laden der Erweiterung in jedem Browser

Sehen wir uns kurz an, wie die Erweiterung in jedem Browser installiert wird.

Voraussetzungen

Laden Sie meine kleine Erweiterung von GitHub irgendwo auf Ihre Festplatte herunter oder klonen Sie sie.

Ändern dareangel.dashboard.js , um mindestens einen Computer Vision-API-Schlüssel hinzuzufügen. Andernfalls kann die Erweiterung nur die aus der Webseite extrahierten Bilder anzeigen.

Microsoft Edge

Zunächst benötigen Sie mindestens ein Windows 10 Anniversary Update (OS Build 14393+), um Unterstützung für Erweiterungen in Edge zu haben.

Öffnen Sie dann Edge und geben Sie about:flags in die Adressleiste ein. Überprüfen Sie die „Entwicklerfunktionen für Erweiterungen aktivieren“.

Klicken Sie in der Navigationsleiste des Edge auf „…“ und dann auf „Erweiterungen“ und dann auf „Erweiterung laden“ und wählen Sie den Ordner aus, in den Sie mein GitHub-Repository geklont haben. Du bekommst das:

Klicken Sie auf diese frisch geladene Erweiterung und aktivieren Sie „Schaltfläche neben der Adressleiste anzeigen“.

Beachten Sie die Schaltfläche „Erweiterung neu laden“, die beim Entwickeln Ihrer Erweiterung nützlich ist. Sie müssen es während des Entwicklungsprozesses nicht entfernen oder neu installieren; Klicken Sie einfach auf die Schaltfläche, um die Erweiterung zu aktualisieren.

Navigieren Sie zu BabylonJS und klicken Sie auf die Schaltfläche Dare Angel (DA), um der gleichen Demo wie im Video zu folgen.

Google Chrome, Oper, Vivaldi

Navigieren Sie in Chrome zu chrome://extensions . Navigieren Sie in Opera zu opera://extensions . Navigieren Sie in Vivaldi zu vivaldi://extensions . Aktivieren Sie dann den „Entwicklermodus“.

Klicken Sie auf „Entpackte Erweiterung laden“ und wählen Sie den Ordner aus, in dem Sie meine Erweiterung extrahiert haben.

Navigieren Sie zu BabylonJS und öffnen Sie die Erweiterung, um zu überprüfen, ob sie einwandfrei funktioniert.

Mozilla-Firefox

Sie haben hier zwei Möglichkeiten. Die erste besteht darin, Ihre Erweiterung vorübergehend zu laden, was so einfach ist wie in Edge und Chrome.

Öffnen Sie Firefox, navigieren Sie zu about:debugging und klicken Sie auf „Load Temporary Add-on“. Navigieren Sie dann zum Ordner der Erweiterung und wählen Sie die Datei manifest.json aus. Das ist es! Gehen Sie nun zu BabylonJS, um die Erweiterung zu testen.

Das einzige Problem bei dieser Lösung ist, dass Sie die Erweiterung jedes Mal neu laden müssen, wenn Sie den Browser schließen. Die zweite Option wäre die Verwendung der XPI-Verpackung. Mehr dazu erfahren Sie unter „Extension Packaging“ im Mozilla Developer Network.

Tapfer

Die öffentliche Version von Brave hat keinen eingebetteten „Entwicklermodus“, mit dem Sie eine unsignierte Erweiterung laden können. Sie müssen Ihre eigene Version davon erstellen, indem Sie die Schritte unter „Laden von Chrome-Erweiterungen in Brave“ befolgen.

Wie in diesem Artikel erklärt, müssen Sie nach dem Klonen von Brave die Datei extensions.js in einem Texteditor öffnen. Suchen Sie die Zeilen unten und geben Sie den Registrierungscode für Ihre Nebenstelle ein. In meinem Fall habe ich gerade die beiden letzten Zeilen hinzugefügt:

 // Manually install the braveExtension and torrentExtension extensionInfo.setState(config.braveExtensionId, extensionStates.REGISTERED) loadExtension(config.braveExtensionId, getExtensionsPath('brave'), generateBraveManifest(), 'component') extensionInfo.setState('DareAngel', extensionStates.REGISTERED) loadExtension('DareAngel', getExtensionsPath('DareAngel/')) view raw

Kopieren Sie die Erweiterung in den Ordner app/extensions . Öffnen Sie zwei Eingabeaufforderungen im browser-laptop Ordner. Starten Sie im ersten Fall npm run watch und warten Sie, bis das Webpack die Erstellung der Electron-App von Brave abgeschlossen hat. Es sollte heißen: „Webpack: Bundle ist jetzt GÜLTIG.“ Andernfalls werden Sie auf einige Probleme stoßen.

Starten Sie dann in der zweiten Eingabeaufforderung npm start , wodurch unsere leicht benutzerdefinierte Version von Brave gestartet wird.

Navigieren Sie in Brave zu about:extensions , und Sie sollten die Erweiterung angezeigt und in der Adressleiste geladen sehen.

Debuggen der Erweiterung in jedem Browser

Tipp für alle Browser : Mit console.log() protokollieren Sie einfach einige Daten aus dem Fluss Ihrer Erweiterung. In den meisten Fällen können Sie mit den Entwicklertools des Browsers auf die JavaScript-Datei klicken, die sie protokolliert hat, um sie zu öffnen und zu debuggen.

Microsoft Edge

Um den Client-Skriptteil zu debuggen, der im Kontext der Seite lebt, müssen Sie nur F12 öffnen. Klicken Sie dann auf die Registerkarte „Debugger“ und suchen Sie den Ordner Ihrer Erweiterung.

Öffnen Sie die Skriptdatei, die Sie debuggen möchten – in meinem Fall dareangel.client.js – und debuggen Sie Ihren Code wie gewohnt, indem Sie Haltepunkte einrichten usw.

Wenn Ihre Erweiterung einen separaten Tab erstellt, um ihre Aufgabe zu erledigen (wie der Page Analyzer, den unser Vorlon.js-Team im Store veröffentlicht hat), drücken Sie einfach F12 auf diesem Tab, um ihn zu debuggen.

Wenn Sie die Popup-Seite debuggen möchten, müssen Sie zuerst die ID Ihrer Erweiterung abrufen. Gehen Sie dazu einfach in die Eigenschaft der Erweiterung und Sie finden eine ID-Eigenschaft:

Dann müssen Sie etwas wie ms-browser-extension://ID_of_your_extension/yourpage.html in die Adressleiste eingeben. In unserem Fall wäre es ms-browser-extension://DareAngel_vdbyzyarbfgh8/dashboard.html . Dann nutzen Sie einfach F12 auf dieser Seite:

Google Chrome, Opera, Vivaldi, Brave

Da Chrome und Opera auf derselben Blink-Codebasis basieren, teilen sie denselben Debugging-Prozess. Obwohl Brave und Vivaldi Forks von Chromium sind, teilen sie sich die meiste Zeit den gleichen Debugging-Prozess.

Öffnen Sie zum Debuggen des Clientskriptteils die Entwicklertools des Browsers auf der Seite, die Sie debuggen möchten (drücken Sie F12 , Control + Shift + I oder ⌘ + ⌥ + I , je nach verwendetem Browser oder verwendeter Plattform).

Klicken Sie dann auf die Registerkarte „Inhaltsskripte“ und suchen Sie den Ordner Ihrer Erweiterung. Öffnen Sie die Skriptdatei, die Sie debuggen möchten, und debuggen Sie Ihren Code so, wie Sie es mit jedem anderen JavaScript-Code tun würden.

Um einen Tab zu debuggen, den Ihre Erweiterung erstellen würde, ist es genau dasselbe wie bei Edge: Verwenden Sie einfach die Entwicklertools.

Für Chrome und Opera klicken Sie zum Debuggen der Popup-Seite mit der rechten Maustaste auf die Schaltfläche Ihrer Erweiterung neben der Adressleiste und wählen Sie „Popup prüfen“ oder öffnen Sie den HTML-Bereich des Popups und klicken Sie mit der rechten Maustaste darauf, um „Inspizieren. ” Vivaldi unterstützt nur einen Rechtsklick und dann „Inspizieren“ innerhalb des HTML-Bereichs, sobald er geöffnet ist.

Bei Brave ist es der gleiche Prozess wie bei Edge. Sie müssen zuerst die mit Ihrer Erweiterung verknüpfte GUID in about:extensions finden:

Öffnen Sie dann in einem separaten Tab die Seite, die Sie debuggen möchten – in meinem Fall chrome-extension://bodaahkboijjjodkbmmddgjldpifcjap/dashboard.html – und öffnen Sie die Entwicklertools.

Für das Layout haben Sie eine kleine Hilfestellung mit Shift + F8 , mit der Sie den gesamten Rahmen von Brave inspizieren können. Und Sie werden feststellen, dass Brave eine Electron-App ist, die React!

Beachten Sie zum Beispiel das data-reactroot Attribut.

Hinweis : Ich musste das CSS der Erweiterung für Brave leicht ändern, da es derzeit standardmäßig Popups mit transparentem Hintergrund anzeigt, und ich hatte auch einige Probleme mit der Höhe meiner Bildersammlung. Ich habe es in Brave auf vier Elemente beschränkt.

Mozilla-Firefox

Mozilla hat eine wirklich großartige Dokumentation zum Debuggen von Weberweiterungen.

Für den Client-Skriptteil ist es dasselbe wie in Edge, Chrome, Opera und Brave. Öffnen Sie einfach die Entwicklertools in der Registerkarte, die Sie debuggen möchten, und Sie finden einen Abschnitt moz-extension://guid mit Ihrem Code zum Debuggen:

Wenn Sie eine Registerkarte debuggen müssen, die Ihre Erweiterung erstellen würde (wie die Page Analyzer-Erweiterung von Vorlon.js), verwenden Sie einfach die Entwicklertools:

Schließlich ist das Debuggen eines Popups etwas komplexer, wird aber im Abschnitt „Debuggen von Popups“ der Dokumentation gut erklärt.

Veröffentlichen Ihrer Erweiterung in jedem Geschäft

Jeder Anbieter verfügt über eine detaillierte Dokumentation zum Verfahren, das befolgt werden muss, um Ihre Erweiterung in seinem Geschäft zu veröffentlichen. Sie verfolgen alle ähnliche Ansätze. Sie müssen die Erweiterung in einem bestimmten Dateiformat verpacken – meistens in einem ZIP-ähnlichen Container. Dann müssen Sie es in einem speziellen Portal einreichen, ein Preismodell auswählen und warten, bis der Überprüfungsprozess abgeschlossen ist. Wenn Sie akzeptiert werden, kann Ihre Erweiterung im Browser selbst von jedem Benutzer heruntergeladen werden, der den Erweiterungsshop besucht.

Hier sind die verschiedenen Prozesse:

• Google: „Im Chrome Web Store veröffentlichen“
• Mozilla: „Veröffentlichen Ihrer WebExtension“
• Opera: „Verlagsrichtlinien“
• Microsoft: „Verpacken von Microsoft Edge-Erweiterungen“

Bitte beachten Sie, dass das Einreichen einer Microsoft Edge-Erweiterung an den Windows Store derzeit eine eingeschränkte Funktion ist. Wenden Sie sich mit Ihrer Anfrage, Teil des Windows Store zu werden, an das Microsoft Edge-Team, und sie werden Sie für ein zukünftiges Update in Betracht ziehen.

Ich habe versucht, so viel von dem zu teilen, was ich aus der Arbeit an unserer Vorlon.js Page Analyzer-Erweiterung und diesem kleinen Proof of Concept gelernt habe.

Einige Entwickler erinnern sich an den Schmerz, verschiedene Implementierungen durchzuarbeiten, um ihre Erweiterung zu erstellen – ob es bedeutete, verschiedene Build-Verzeichnisse zu verwenden oder mit leicht unterschiedlichen Erweiterungs-APIs zu arbeiten oder völlig unterschiedliche Ansätze zu verfolgen, wie z. B. die XUL-Erweiterungen von Firefox oder die BHOs ​​und ActiveX von Internet Explorer.

Es ist großartig zu sehen, dass wir heute mit unseren regulären JavaScript-, CSS- und HTML-Kenntnissen großartige Erweiterungen mit derselben Codebasis und für alle Browser erstellen können!

Zögern Sie nicht, mich auf Twitter anzupingen, um Feedback zu erhalten.