Tworzenie jednego rozszerzenia przeglądarki dla wszystkich przeglądarek: Edge, Chrome, Firefox, Opera, Brave i Vivaldi

Wyjaśnię, jak zainstalować to rozszerzenie, które obsługuje model rozszerzeń internetowych (tj. Edge, Chrome, Firefox, Opera, Brave i Vivaldi) i podam kilka prostych wskazówek, jak uzyskać unikalną bazę kodu dla wszystkich z nich, ale także jak debugować w każdej przeglądarce.

Uwaga: w tym artykule nie będziemy omawiać przeglądarki Safari, ponieważ nie obsługuje ona tego samego modelu rozszerzenia, co inne.

Podstawy

Nie będę omawiał podstaw rozwoju rozszerzeń, ponieważ wiele dobrych zasobów jest już dostępnych u każdego dostawcy:

• Google
• Microsoft (zobacz także świetny film przeglądowy „Budowanie rozszerzeń dla Microsoft Edge”)
• Mozilla (również zobacz wiki)
• Opera
• Odważny

Jeśli więc nigdy wcześniej nie budowałeś rozszerzenia lub nie wiesz, jak ono działa, rzuć okiem na te zasoby. Nie martw się: zbudowanie jednego jest proste i proste.

Nasze rozszerzenie

Zbudujmy dowód koncepcji — rozszerzenie, które wykorzystuje sztuczną inteligencję (AI) i wizję komputerową, aby pomóc niewidomym analizować obrazy na stronie internetowej.

Zobaczymy, że za pomocą kilku linijek kodu możemy stworzyć kilka potężnych funkcji w przeglądarce. W moim przypadku jestem zaniepokojony dostępnością w sieci i spędziłem już trochę czasu, zastanawiając się, jak sprawić, by przełamująca gra była dostępna za pomocą na przykład dźwięku w sieci i SVG.

Mimo to szukałem czegoś, co pomogłoby osobom niewidomym w bardziej ogólny sposób. Ostatnio zainspirowało mnie słuchanie świetnej przemowy Chrisa Heilmanna w Lizbonie: „Pixels and Hidden Sensing in Pixels”.

Rzeczywiście, korzystając z dzisiejszych algorytmów AI w chmurze, a także technologii zamiany tekstu na mowę, ujawnianych w przeglądarce za pomocą Web Speech API lub korzystając ze zdalnej usługi w chmurze, możemy bardzo łatwo zbudować rozszerzenie, które analizuje obrazy stron internetowych z brakującymi lub nieprawidłowo wypełnione właściwości tekstu alt .

Mój mały dowód koncepcji po prostu wyodrębnia obrazy ze strony internetowej (tej w aktywnej karcie) i wyświetla miniatury na liście. Po kliknięciu jednego z obrazów rozszerzenie wysyła zapytanie do interfejsu Computer Vision API , aby uzyskać opisowy tekst dla obrazu, a następnie używa interfejsu Web Speech API lub Bing Speech API , aby udostępnić go odwiedzającemu.

Poniższy film pokazuje to w Edge, Chrome, Firefox, Opera i Brave.

Zauważysz, że nawet jeśli interfejs API Computer Vision analizuje niektóre obrazy CGI, jest bardzo dokładny! Jestem naprawdę pod wrażeniem postępu, jaki branża poczyniła w tej dziedzinie w ostatnich miesiącach.

Korzystam z tych usług:

• Interfejs API wizji komputerowej, usługi poznawcze firmy Microsoft
  To jest bezpłatne (z limitem). Będziesz musiał wygenerować darmowy klucz; zastąp sekcję TODO w kodzie swoim kluczem, aby to rozszerzenie działało na twoim komputerze. Aby zorientować się, co może zrobić ten interfejs API, pobaw się nim.



• Bing Text to Speech API, usługi poznawcze firmy Microsoft
  Jest to również bezpłatne (również z limitem). Będziesz musiał ponownie wygenerować bezpłatny klucz. Wykorzystamy również małą bibliotekę, którą ostatnio napisałem, aby wywołać to API z JavaScript. Jeśli nie masz klucza Bing, rozszerzenie zawsze powróci do interfejsu API Web Speech, który jest obsługiwany przez wszystkie najnowsze przeglądarki.

Ale zachęcamy do wypróbowania innych podobnych usług:

• Rozpoznawanie wizualne, IBM Watson
• Cloud Vision API, Google

Możesz znaleźć kod tego małego rozszerzenia przeglądarki na mojej stronie GitHub. Zapraszam do modyfikowania kodu dla innych produktów, które chcesz przetestować.

Wskazówka, aby Twój kod był kompatybilny ze wszystkimi przeglądarkami

Większość kodu i samouczków, które znajdziesz, używa przestrzeni nazw chrome.xxx dla interfejsu API rozszerzeń ( na przykład chrome.tabs ).

Ale, jak już powiedziałem, model Extension API jest obecnie standaryzowany na browser.xxx , a niektóre przeglądarki w międzyczasie definiują własne przestrzenie nazw (na przykład Edge używa msBrowser ).

Na szczęście większość API pozostaje taka sama za przeglądarką. Tak więc bardzo łatwo jest stworzyć małą sztuczkę, aby obsługiwać wszystkie definicje przeglądarek i przestrzeni nazw, dzięki pięknemu JavaScript:

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

I voila!

Oczywiście będziesz także musiał użyć podzbioru interfejsu API obsługiwanego przez wszystkie przeglądarki. Na przykład:

• Microsoft Edge ma listę wsparcia.
• Mozilla Firefox udostępnia swoje obecne niezgodności z Chrome.
• Opera posiada własną listę rozszerzeń API obsługiwanych przez jej przeglądarkę.

Architektura rozszerzenia

Przyjrzyjmy się wspólnie architekturze tego rozszerzenia. Jeśli nie masz doświadczenia z rozszerzeniami przeglądarki, powinno ci to pomóc w zrozumieniu przepływu.

Zacznijmy od pliku manifestu:

Ten plik manifestu i powiązany z nim JSON to minimum potrzebne do załadowania rozszerzenia we wszystkich przeglądarkach, jeśli oczywiście nie bierzemy pod uwagę samego kodu rozszerzenia. Sprawdź źródło na moim koncie GitHub i zacznij od tego miejsca, aby upewnić się, że Twoje rozszerzenie jest kompatybilne ze wszystkimi przeglądarkami.

Na przykład musisz określić właściwość author , aby załadować ją w Edge; w przeciwnym razie zgłosi błąd. Będziesz także musiał użyć tej samej struktury dla ikon. Właściwość default_title jest również ważna, ponieważ jest używana przez czytniki ekranu w niektórych przeglądarkach.

Oto linki do dokumentacji, które pomogą Ci zbudować plik manifestu, który jest kompatybilny wszędzie:

• Chrom
• Krawędź
• Firefox

Przykładowe rozszerzenie użyte w tym artykule opiera się głównie na koncepcji skryptu treści. To jest skrypt żyjący w kontekście strony, którą chcielibyśmy sprawdzić. Ponieważ ma dostęp do DOM, pomoże nam odzyskać obrazy zawarte na stronie internetowej. Jeśli chcesz dowiedzieć się więcej o tym, czym jest skrypt treści, Opera, Mozilla i Google mają na ten temat dokumentację.

Nasz skrypt treści jest prosty:

 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

Najpierw loguje się do konsoli, aby sprawdzić, czy rozszerzenie zostało poprawnie załadowane. Sprawdź to za pomocą narzędzia programistycznego przeglądarki, dostępnego po F12 , Control + Shift + I lub ⌘ + ⌥ + I .

Następnie czeka na wiadomość ze strony interfejsu użytkownika z poleceniem requestImages , aby pobrać wszystkie obrazy dostępne w bieżącym DOM, a następnie zwraca listę ich adresów URL, jeśli są one większe niż 64 × 64 piksele (aby uniknąć wszystkich śmieci śledzące piksele i obrazy o niskiej rozdzielczości).

Wyskakująca strona interfejsu użytkownika, której używamy, jest bardzo prosta i wyświetla listę obrazów zwróconych przez skrypt treści wewnątrz kontenera flexbox. Ładuje skrypt start.js , który natychmiast tworzy instancję dareangel.dashboard.js , aby wysłać wiadomość do skryptu zawartości, aby uzyskać adresy URL obrazów w aktualnie widocznej karcie.

Oto kod, który znajduje się na stronie interfejsu użytkownika, żądając adresów URL do skryptu treści:

 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 = "
 Proszę wygenerować klucz Computer Vision w drugiej zakładce.
 ";
                    this._targetDiv.insertBefore (komunikat ostrzegawczy, this._targetDiv.firstChild);
                    browser.tabs.create({ active: false, url: "https://www.microsoft.com/cognitive-services/en-US/sign-up?ReturnUrl=/cognitive-services/en-us/subscriptions?productId =%2fprodukty%2f54d873dd5eefd00dc474a0f4" });
                }
            });
            this._targetDiv.appendChild(newImageHTMLElement);
        });
    });
});

Tworzymy elementy obrazu. Każdy obraz wyzwoli zdarzenie, jeśli ma fokus, wysyłając zapytanie do interfejsu Computer Vision API w celu sprawdzenia.

Odbywa się to za pomocą prostego wywołania XHR:

 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

Poniższe artykuły pomogą Ci zrozumieć, jak działa ten interfejs API Computer Vision:

• „Analiza obrazu w wersji 1.0”, Microsoft Cognitive Services
• „Computer Vision API, v1.0”, Microsoft Cognitive Services
  Pokazuje to za pomocą interaktywnej konsoli na stronie internetowej, jak wywołać interfejs API REST z odpowiednimi właściwościami JSON oraz obiekt JSON, który otrzymasz w zamian. Warto zrozumieć, jak to działa i jak to nazwiesz.

W naszym przypadku korzystamy z funkcji describe API. W wywołaniu zwrotnym zauważysz również, że w zależności od Twoich opcji spróbujemy użyć interfejsu API Web Speech lub usługi Bing Text-to-Speech .

Oto więc globalny przepływ pracy tego małego rozszerzenia:

Ładowanie rozszerzenia w każdej przeglądarce

Przyjrzyjmy się szybko, jak zainstalować rozszerzenie w każdej przeglądarce.

Warunki wstępne

Pobierz lub sklonuj moje małe rozszerzenie z GitHub gdzieś na dysk twardy.

Zmodyfikuj także dareangel.dashboard.js , aby dodać przynajmniej klucz API Computer Vision. W przeciwnym razie rozszerzenie będzie mogło wyświetlać tylko obrazy wyodrębnione ze strony internetowej.

Microsoft Edge

Po pierwsze, będziesz potrzebować co najmniej rocznicowej aktualizacji systemu Windows 10 (kompilacja systemu operacyjnego 14393+), aby mieć obsługę rozszerzeń w Edge.

Następnie otwórz Edge i wpisz about:flags w pasku adresu. Sprawdź „Włącz funkcje programistyczne rozszerzeń”.

Kliknij „…” na pasku nawigacyjnym Edge'a, a następnie „Rozszerzenia”, a następnie „Załaduj rozszerzenie” i wybierz folder, w którym sklonowałeś moje repozytorium GitHub. Otrzymasz to:

Kliknij to świeżo załadowane rozszerzenie i włącz „Pokaż przycisk obok paska adresu”.

Zwróć uwagę na przycisk „Odśwież rozszerzenie”, który jest przydatny podczas tworzenia rozszerzenia. Nie będziesz zmuszony do usunięcia lub ponownej instalacji podczas procesu rozwoju; wystarczy kliknąć przycisk, aby odświeżyć rozszerzenie.

Przejdź do BabylonJS i kliknij przycisk Dare Angel (DA), aby śledzić to samo demo, jak pokazano na filmie.

Google Chrome, Opera, Vivaldi

W Chrome przejdź do chrome://extensions . W Operze przejdź do opera://extensions . W Vivaldi przejdź do vivaldi://extensions . Następnie włącz „Tryb programisty”.

Kliknij „Załaduj rozpakowane rozszerzenie” i wybierz folder, w którym rozpakowałeś moje rozszerzenie.

Przejdź do BabylonJS i otwórz rozszerzenie, aby sprawdzić, czy działa poprawnie.

Mozilla Firefox

Masz tutaj dwie opcje. Pierwszym z nich jest tymczasowe załadowanie rozszerzenia, co jest tak proste, jak w Edge i Chrome.

Otwórz Firefoksa, przejdź do about:debugging i kliknij "Załaduj tymczasowy dodatek". Następnie przejdź do folderu rozszerzenia i wybierz plik manifest.json . Otóż ​​to! Teraz przejdź do BabylonJS, aby przetestować rozszerzenie.

Jedynym problemem związanym z tym rozwiązaniem jest to, że za każdym razem, gdy zamykasz przeglądarkę, będziesz musiał ponownie załadować rozszerzenie. Drugą opcją byłoby użycie opakowania XPI. Możesz dowiedzieć się więcej na ten temat w „Pakowanie rozszerzeń” w sieci Mozilla Developer Network.

Odważny

Publiczna wersja Brave nie ma wbudowanego „trybu programisty”, który pozwalałby załadować niepodpisane rozszerzenie. Musisz stworzyć swoją własną wersję, wykonując czynności opisane w „Ładowanie rozszerzeń Chrome w Brave”.

Jak wyjaśniono w tym artykule, po sklonowaniu Brave będziesz musiał otworzyć plik extensions.js w edytorze tekstu. Znajdź poniższe wiersze i wprowadź kod rejestracyjny swojego numeru wewnętrznego. W moim przypadku właśnie dodałem dwie ostatnie linijki:

 // 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

Skopiuj rozszerzenie do folderu app/extensions . Otwórz dwa wiersze poleceń w folderze browser-laptop . W pierwszym uruchom npm run watch i poczekaj, aż webpack zakończy tworzenie aplikacji Brave's Electron. Powinien brzmieć „webpack: pakiet jest teraz WAŻNY”. W przeciwnym razie napotkasz pewne problemy.

Następnie w drugim wierszu poleceń uruchom npm start , który uruchomi naszą nieco niestandardową wersję Brave.

W Brave przejdź do about:extensions i powinieneś zobaczyć rozszerzenie wyświetlane i załadowane na pasku adresu.

Debugowanie rozszerzenia w każdej przeglądarce

Wskazówka dla wszystkich przeglądarek : Używając console.log() , po prostu zarejestruj niektóre dane z przepływu rozszerzenia. W większości przypadków, korzystając z narzędzi programistycznych przeglądarki, będziesz mógł kliknąć plik JavaScript, który go zarejestrował, aby go otworzyć i debugować.

Microsoft Edge

Aby debugować część skryptu klienta, żyjącą w kontekście strony, wystarczy otworzyć F12 . Następnie kliknij zakładkę „Debugger” i znajdź folder swojego rozszerzenia.

Otwórz plik skryptu, który chcesz debugować — w moim przypadku dareangel.client.js — i debuguj swój kod jak zwykle, ustawiając punkty przerwania itp.

Jeśli Twoje rozszerzenie tworzy osobną kartę, aby wykonać swoje zadanie (np. Page Analyzer, który nasz zespół Vorlon.js opublikował w sklepie), po prostu naciśnij F12 na tej karcie, aby ją debugować.

Jeśli chcesz debugować wyskakującą stronę, najpierw musisz uzyskać identyfikator swojego rozszerzenia. Aby to zrobić, po prostu przejdź do właściwości rozszerzenia, a znajdziesz właściwość ID:

Następnie musisz wpisać w pasku adresu coś w rodzaju ms-browser-extension://ID_of_your_extension/yourpage.html . W naszym przypadku byłby to ms-browser-extension://DareAngel_vdbyzyarbfgh8/dashboard.html . Następnie po prostu użyj F12 na tej stronie:

Google Chrome, Opera, Vivaldi, Odważny

Ponieważ Chrome i Opera opierają się na tej samej bazie kodu Blink, dzielą ten sam proces debugowania. Mimo że Brave i Vivaldi są rozwidleniami Chromium, przez większość czasu korzystają z tego samego procesu debugowania.

Aby debugować część skryptu klienta, otwórz narzędzia programistyczne przeglądarki na stronie, którą chcesz debugować (naciskając F12 , Control + Shift + I lub ⌘ + ⌥ + I , w zależności od używanej przeglądarki lub platformy).

Następnie kliknij zakładkę „Skrypty treści” i znajdź folder swojego rozszerzenia. Otwórz plik skryptu, który chcesz debugować, i debuguj swój kod, tak jak robisz to z dowolnym kodem JavaScript.

Wyskakująca strona interfejsu użytkownika, której używamy, jest bardzo prosta i wyświetla listę obrazów zwróconych przez skrypt treści wewnątrz kontenera flexbox. Ładuje skrypt start.js , który natychmiast tworzy instancję dareangel.dashboard.js , aby wysłać wiadomość do skryptu zawartości, aby uzyskać adresy URL obrazów w aktualnie widocznej karcie.

Oto kod, który znajduje się na stronie interfejsu użytkownika, żądając adresów URL do skryptu treści:

 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 = "
 Proszę wygenerować klucz Computer Vision w drugiej zakładce.
 ";
                    this._targetDiv.insertBefore (komunikat ostrzegawczy, this._targetDiv.firstChild);
                    browser.tabs.create({ active: false, url: "https://www.microsoft.com/cognitive-services/en-US/sign-up?ReturnUrl=/cognitive-services/en-us/subscriptions?productId =%2fprodukty%2f54d873dd5eefd00dc474a0f4" });
                }
            });
            this._targetDiv.appendChild(newImageHTMLElement);
        });
    });
});

Tworzymy elementy obrazu. Każdy obraz wyzwoli zdarzenie, jeśli ma fokus, wysyłając zapytanie do interfejsu Computer Vision API w celu sprawdzenia.

Odbywa się to za pomocą prostego wywołania XHR:

 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

Poniższe artykuły pomogą Ci zrozumieć, jak działa ten interfejs API Computer Vision:

• „Analiza obrazu w wersji 1.0”, Microsoft Cognitive Services
• „Computer Vision API, v1.0”, Microsoft Cognitive Services
  Pokazuje to za pomocą interaktywnej konsoli na stronie internetowej, jak wywołać interfejs API REST z odpowiednimi właściwościami JSON oraz obiekt JSON, który otrzymasz w zamian. Warto zrozumieć, jak to działa i jak to nazwiesz.

W naszym przypadku korzystamy z funkcji describe API. W wywołaniu zwrotnym zauważysz również, że w zależności od Twoich opcji spróbujemy użyć interfejsu API Web Speech lub usługi Bing Text-to-Speech .

Oto więc globalny przepływ pracy tego małego rozszerzenia:

Ładowanie rozszerzenia w każdej przeglądarce

Przyjrzyjmy się szybko, jak zainstalować rozszerzenie w każdej przeglądarce.

Warunki wstępne

Pobierz lub sklonuj moje małe rozszerzenie z GitHub gdzieś na dysk twardy.

Zmodyfikuj także dareangel.dashboard.js , aby dodać przynajmniej klucz API Computer Vision. W przeciwnym razie rozszerzenie będzie mogło wyświetlać tylko obrazy wyodrębnione ze strony internetowej.

Microsoft Edge

Po pierwsze, będziesz potrzebować co najmniej rocznicowej aktualizacji systemu Windows 10 (kompilacja systemu operacyjnego 14393+), aby mieć obsługę rozszerzeń w Edge.

Następnie otwórz Edge i wpisz about:flags w pasku adresu. Sprawdź „Włącz funkcje programistyczne rozszerzeń”.

Kliknij „…” na pasku nawigacyjnym Edge'a, a następnie „Rozszerzenia”, a następnie „Załaduj rozszerzenie” i wybierz folder, w którym sklonowałeś moje repozytorium GitHub. Otrzymasz to:

Kliknij to świeżo załadowane rozszerzenie i włącz „Pokaż przycisk obok paska adresu”.

Zwróć uwagę na przycisk „Odśwież rozszerzenie”, który jest przydatny podczas tworzenia rozszerzenia. Nie będziesz zmuszony do usunięcia lub ponownej instalacji podczas procesu rozwoju; wystarczy kliknąć przycisk, aby odświeżyć rozszerzenie.

Przejdź do BabylonJS i kliknij przycisk Dare Angel (DA), aby śledzić to samo demo, jak pokazano na filmie.

Google Chrome, Opera, Vivaldi

W Chrome przejdź do chrome://extensions . W Operze przejdź do opera://extensions . W Vivaldi przejdź do vivaldi://extensions . Następnie włącz „Tryb programisty”.

Kliknij „Załaduj rozpakowane rozszerzenie” i wybierz folder, w którym rozpakowałeś moje rozszerzenie.

Przejdź do BabylonJS i otwórz rozszerzenie, aby sprawdzić, czy działa poprawnie.

Mozilla Firefox

Masz tutaj dwie opcje. Pierwszym z nich jest tymczasowe załadowanie rozszerzenia, co jest tak proste, jak w Edge i Chrome.

Otwórz Firefoksa, przejdź do about:debugging i kliknij "Załaduj tymczasowy dodatek". Następnie przejdź do folderu rozszerzenia i wybierz plik manifest.json . Otóż ​​to! Teraz przejdź do BabylonJS, aby przetestować rozszerzenie.

Jedynym problemem związanym z tym rozwiązaniem jest to, że za każdym razem, gdy zamykasz przeglądarkę, będziesz musiał ponownie załadować rozszerzenie. Drugą opcją byłoby użycie opakowania XPI. Możesz dowiedzieć się więcej na ten temat w „Pakowanie rozszerzeń” w sieci Mozilla Developer Network.

Odważny

Publiczna wersja Brave nie ma wbudowanego „trybu programisty”, który pozwalałby załadować niepodpisane rozszerzenie. Musisz stworzyć swoją własną wersję, wykonując czynności opisane w „Ładowanie rozszerzeń Chrome w Brave”.

Jak wyjaśniono w tym artykule, po sklonowaniu Brave będziesz musiał otworzyć plik extensions.js w edytorze tekstu. Znajdź poniższe wiersze i wprowadź kod rejestracyjny swojego numeru wewnętrznego. W moim przypadku właśnie dodałem dwie ostatnie linijki:

 // 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

Skopiuj rozszerzenie do folderu app/extensions . Otwórz dwa wiersze poleceń w folderze browser-laptop . W pierwszym uruchom npm run watch i poczekaj, aż webpack zakończy tworzenie aplikacji Brave's Electron. Powinien brzmieć „webpack: pakiet jest teraz WAŻNY”. W przeciwnym razie napotkasz pewne problemy.

Następnie w drugim wierszu poleceń uruchom npm start , który uruchomi naszą nieco niestandardową wersję Brave.

W Brave przejdź do about:extensions i powinieneś zobaczyć rozszerzenie wyświetlane i załadowane na pasku adresu.

Debugowanie rozszerzenia w każdej przeglądarce

Wskazówka dla wszystkich przeglądarek : Używając console.log() , po prostu zarejestruj niektóre dane z przepływu rozszerzenia. W większości przypadków, korzystając z narzędzi programistycznych przeglądarki, będziesz mógł kliknąć plik JavaScript, który go zarejestrował, aby go otworzyć i debugować.

Microsoft Edge

Aby debugować część skryptu klienta, żyjącą w kontekście strony, wystarczy otworzyć F12 . Następnie kliknij zakładkę „Debugger” i znajdź folder swojego rozszerzenia.

Otwórz plik skryptu, który chcesz debugować — w moim przypadku dareangel.client.js — i debuguj swój kod jak zwykle, ustawiając punkty przerwania itp.

Jeśli Twoje rozszerzenie tworzy osobną kartę, aby wykonać swoje zadanie (np. Page Analyzer, który nasz zespół Vorlon.js opublikował w sklepie), po prostu naciśnij F12 na tej karcie, aby ją debugować.

Jeśli chcesz debugować wyskakującą stronę, najpierw musisz uzyskać identyfikator swojego rozszerzenia. Aby to zrobić, po prostu przejdź do właściwości rozszerzenia, a znajdziesz właściwość ID:

Następnie musisz wpisać w pasku adresu coś w rodzaju ms-browser-extension://ID_of_your_extension/yourpage.html . W naszym przypadku byłby to ms-browser-extension://DareAngel_vdbyzyarbfgh8/dashboard.html . Następnie po prostu użyj F12 na tej stronie:

Google Chrome, Opera, Vivaldi, Odważny

Ponieważ Chrome i Opera opierają się na tej samej bazie kodu Blink, dzielą ten sam proces debugowania. Mimo że Brave i Vivaldi są rozwidleniami Chromium, przez większość czasu korzystają z tego samego procesu debugowania.

Aby debugować część skryptu klienta, otwórz narzędzia programistyczne przeglądarki na stronie, którą chcesz debugować (naciskając F12 , Control + Shift + I lub ⌘ + ⌥ + I , w zależności od używanej przeglądarki lub platformy).

Następnie kliknij zakładkę „Skrypty treści” i znajdź folder swojego rozszerzenia. Otwórz plik skryptu, który chcesz debugować, i debuguj swój kod, tak jak robisz to z dowolnym kodem JavaScript.

Aby debugować kartę, którą utworzyłoby twoje rozszerzenie, jest to dokładnie to samo, co w Edge: po prostu użyj narzędzi programistycznych.

W Chrome i Operze, aby debugować wyskakującą stronę, kliknij prawym przyciskiem myszy przycisk rozszerzenia obok paska adresu i wybierz „Sprawdź wyskakujące okienko” lub otwórz panel HTML wyskakującego okienka i kliknij prawym przyciskiem myszy, aby „Sprawdź. ” Vivaldi obsługuje tylko kliknięcie prawym przyciskiem myszy, a następnie „Sprawdź” w panelu HTML po otwarciu.

W przypadku Brave jest to ten sam proces, co w przypadku Edge. Najpierw musisz znaleźć identyfikator GUID powiązany z Twoim rozszerzeniem w about:extensions :

A następnie, w osobnej karcie, otwórz stronę, którą chcesz debugować — w moim przypadku chrome-extension://bodaahkboijjjodkbmmddgjldpifcjap/dashboard.html — i otwórz narzędzia programistyczne.

W przypadku układu możesz trochę pomóc, używając Shift + F8 , co pozwoli ci sprawdzić całą klatkę Brave. I odkryjesz, że Brave to aplikacja Electronowa korzystająca z React!

Zwróć uwagę na przykład na atrybut data-reactroot .

Uwaga : musiałem nieco zmodyfikować CSS rozszerzenia dla Brave, ponieważ obecnie domyślnie wyświetla ono wyskakujące okienka z przezroczystym tłem, a także miałem problemy z wysokością mojej kolekcji obrazów. W Brave ograniczyłem się do czterech elementów.

Mozilla Firefox

Mozilla ma naprawdę świetną dokumentację dotyczącą debugowania rozszerzeń internetowych.

W przypadku części skryptu klienta jest to samo, co w Edge, Chrome, Opera i Brave. Po prostu otwórz narzędzia programistyczne na karcie, którą chcesz debugować, a znajdziesz sekcję moz-extension://guid z kodem do debugowania:

Jeśli chcesz debugować kartę, którą utworzy Twoje rozszerzenie (takie jak rozszerzenie Vorlon.js' Page Analyzer), po prostu użyj narzędzi programistycznych:

Wreszcie, debugowanie wyskakującego okienka jest nieco bardziej złożone, ale jest dobrze wyjaśnione w sekcji „Debugowanie wyskakujących okienek” dokumentacji.

Publikowanie rozszerzenia w każdym sklepie

Każdy dostawca ma szczegółową dokumentację dotyczącą procesu, który należy wykonać, aby opublikować rozszerzenie w swoim sklepie. Wszyscy przyjmują podobne podejście. Musisz spakować rozszerzenie w konkretnym formacie pliku — w większości przypadków w kontenerze podobnym do ZIP. Następnie należy złożyć go w dedykowanym portalu, wybrać model wyceny i poczekać na zakończenie procesu recenzji. Jeśli zostanie zaakceptowane, Twoje rozszerzenie będzie można pobrać w samej przeglądarce przez każdego użytkownika, który odwiedza sklep z rozszerzeniami.

Oto różne procesy:

• Google: „Opublikuj w Chrome Web Store”
• Mozilla: „Publikowanie swojego rozszerzenia internetowego”
• Opera: „Wytyczne wydawnicze”
• Microsoft: „Pakowanie rozszerzeń Microsoft Edge”

Należy pamiętać, że przesyłanie rozszerzenia Microsoft Edge do Sklepu Windows jest obecnie ograniczone możliwościami. Skontaktuj się z zespołem Microsoft Edge z prośbą o dołączenie do Sklepu Windows, a oni rozważą Twoją przyszłą aktualizację.

Próbowałem podzielić się tym, czego nauczyłem się podczas pracy nad naszym rozszerzeniem Vorlon.js Page Analyzer i tym małym dowodem koncepcji.

Niektórzy programiści pamiętają trud pracy z różnymi implementacjami, aby zbudować swoje rozszerzenie — niezależnie od tego, czy oznaczało to używanie różnych katalogów kompilacji, czy pracę z nieco innymi interfejsami API rozszerzeń, czy też stosowanie zupełnie innych metod, takich jak rozszerzenia XUL dla Firefoksa lub BHO i ActiveX przeglądarki Internet Explorer.

Wspaniale jest widzieć, że dzisiaj, korzystając z naszych zwykłych umiejętności w zakresie JavaScript, CSS i HTML, możemy tworzyć wspaniałe rozszerzenia przy użyciu tej samej bazy kodu i we wszystkich przeglądarkach!

Zapraszam do pingowania mnie na Twitterze w celu uzyskania opinii.