Jeśli zastanawiasz się, jak zrobić rozszerzenie Chrome, rozszerzenie Chrome jest Świetne dla podstawowych implementacji. Jednak korzystanie z bardziej zaawansowanych funkcji wymaga dużo googlowania i przepełnienia stosu. Stwórzmediate rozszerzenie Chrome, które współdziała ze stroną: znajdzie pierwszy zewnętrzny link na stronie i otworzy go w nowej karcie.

json

manifest.plik json przekazuje Chrome ważne informacje o tobie, takie jak jego nazwa i uprawnienia, których potrzebuje.,

najbardziej podstawowym możliwym rozszerzeniem jest katalog z plikiemmanifest.json.Stwórzmy katalog i umieśćmy następujący JSONinto manifest.json:

{ "manifest_version": 2, "name": "My Cool Extension", "version": "0.1" }

To jest najbardziej podstawowy możliwy manifest.json, ze wszystkimi wymaganymi polami filledin. manifest_version powinno być zawsze 2, ponieważ Wersja 1 jest wspierana od stycznia 2014. Jak dotąd nasze rozszerzenie nie robi absolutnie nic,ale i tak załadujmy je do Chrome.,

załaduj rozszerzenie do Chrome

aby załadować rozszerzenie w Chrome, otwórzchrome://extensions/ w przeglądarce i kliknij „tryb programisty” w prawym górnym rogu. Teraz kliknij „Load unpackedextension …” i wybierz katalog rozszerzenia. Powinieneś teraz zobaczyć swoje zmiany na liście.

gdy zmienisz lub dodasz kod w swoim rozszerzeniu, po prostu wróć na tę stronę i załaduj stronę. Chrome przeładuje rozszerzenie.

Skrypty zawartości

skrypt zawartości to „plik JavaScript uruchamiany w kontekście stron internetowych.,”Oznacza to, że skrypt treści może wchodzić w interakcję ze stronami internetowymi, które przeglądarka wyświetla. Nie każdy plik JavaScript w rozszerzeniu Chrome może to zrobić; zobaczymy później.

dodajmy skrypt o nazwiecontent.js: 

// content.js alert("Hello from your Chrome extension!")

aby wstrzyknąć skrypt, musimy poinformować o nim nasz plikmanifest.json.,

dodaj to do pliku manifest.json:

"content_scripts": , "js": } ]

To mówi Chrome, aby wstrzyknąć content.js na każdej odwiedzanej stronie za pomocą specjalnego <all_urls> URL wzorca. Jeśli chcemy wprowadzić skrypt tylko na niektórych stronach, możemy użyć wzorców dopasowania. Oto kilka przykładów wartości"matches":

Przeładuj rozszerzenie Chrome. Każda odwiedzana strona wyświetla teraz alert. Let ' slog pierwszy URL na stronie zamiast.,

Logowanie adresu URL

jQuery nie jest konieczne, ale ułatwia wszystko. Najpierw pobierz plik jQuery z jQuery CDN i umieść go w folderze rozszerzenia. Idownload the latest minified version, jquery-2.1.3.min.js. Aby go załadować, Dodaj do manifest.json przed "content.js"., Twój cały manifest.json powinien wyglądać tak:

{ "manifest_version": 2, "name": "My Cool Extension", "version": "0.1", "content_scripts": , "js": } ] }

teraz, gdy mamy jQuery, użyjmy go do zalogowania adresu URL pierwszego linku zewnętrznego na stronie content.js:

// content.js var firstHref = $("a").eq(0).attr("href"); console.log(firstHref);

zauważ, że nie musimy używać jQuery, aby sprawdzić, czy dokument został załadowany. Bydefault, Chrome wstrzykuje Skrypty zawartości po zakończeniu DOM.

Wypróbuj – na każdej odwiedzanej stronie powinieneś zobaczyć wynik w konsoli.,

działania przeglądarki

gdy rozszerzenie dodaje małą ikonkę obok paska adresu, jest to przeglądarka. Twoje rozszerzenie może nasłuchiwać kliknięć tego przycisku, a następnie dosomething.

umieść ikonę.png z samouczka rozszerzenia Google w folderze rozszerzeniadodaj to do manifest.json:

"browser_action": { "default_icon": "icon.png" }

aby użyć akcji przeglądarki, musimy dodać przekazywanie wiadomości.

przekazywanie wiadomości

skrypt treści ma dostęp do bieżącej strony, ale jest ograniczony w API dostęp itcan., Na przykład nie może nasłuchiwać kliknięć w akcji przeglądarki. Musimy dodać inny typ skryptu do naszego rozszerzenia, skrypt w tle, który ma dostęp do każdego API Chrome, ale nie może uzyskać dostępu do bieżącej strony. AsGoogle to ujął:

Skrypty zawartości mają pewne ograniczenia. Nie mogą używać interfejsów API chrome.*, z wyjątkiem extension, i18n, runtime I storage.,

tak więc skrypt zawartości będzie mógł wyciągnąć adres URL z bieżącej strony, ale będzie musiał przekazać ten adres URL do skryptu tła, aby zrobić coś użytecznego z nim. Aby się komunikować, użyjemy tego, co Google nazywa przekazywaniem wiadomości, co pozwala skryptom wysyłać i słuchać wiadomości. Jest to jedyny sposób na interakcję skryptów i skryptów w tle.,

Dodaj następujący tekst, aby powiedziećmanifest.jsono skrypcie w tle: 

"background": { "scripts": }

teraz dodamybackground.js:

to wysyła dowolny ładunek JSON do bieżącej karty. Klucze jsonpayload może być cokolwiek, ale wybrałem "message" dla uproszczenia. Teraz musimy to zrobić w content.js:

zauważ, że cały nasz poprzedni kod został przeniesiony do słuchacza, więc jest on uruchamiany tylko po odebraniu ładunku., Za każdym razem, gdy klikniesz ikonę przeglądania, powinieneś zobaczyć adres URL logowany do konsoli. Jeśli nie działa, spróbuj przeładować rozszerzenie, a następnie ponownie załadować stronę.

otwarcie nowej karty

możemy użyć chrome.tabs API, aby otworzyć nową kartę:

chrome.tabs.create({"url": "http://google.com"});

ale chrome.tabs może być używany tylko przez background.js, więc będziemy musieli dodać więcej wiadomości, ponieważ background.js może otworzyć kartę, ale nie może pobrać theurl., Oto pomysł:

  1. słuchaj kliknięcia na działanie przeglądarki w background.js. Po kliknięciu Wyślij Zdarzenie clicked_browser_action na adres content.js.
  2. gdycontent.js otrzyma Zdarzenie, chwyta adres URL pierwszego linku na stronie. Następnie wysyła open_new_tab z powrotem do background.js z adresem URL.
  3. background.js nasłuchujeopen_new_tab I otwiera nową kartę z givenURL po otrzymaniu wiadomości.,

kliknięcie w przeglądarkę spowoduje uruchomieniebackground.js, które wyśle wiadomość docontent.js, które wyśle adres URL z powrotem dobackground.js, które otworzy nową kartę z podanym adresem URL.

Po pierwsze, musimy powiedzieć content.js, aby wysłać URL do background.js., Zmieńcontent.js aby użyć tego kodu:

teraz musimy dodać kod, aby powiedzieć background.js aby nasłuchać tego zdarzenia:

teraz po kliknięciu ikony akcji przeglądarki otwiera ona nową kartę z pierwszymzewnętrznym adresem URL na stronie.

pełnecontent.jsIbackground.js znajdują się powyżej., Oto pełna manifest.json:

a oto pełna struktura katalogów:

. ├── background.js ├── content.js ├── icon.png ├── jquery-2.1.3.min.js └── manifest.json

więcej informacji na temat tworzenia rozszerzenia Chrome

aby uzyskać więcej informacji, Wypróbuj oficjalną dokumentację rozszerzenia Chrome.