✅ Programuj i twórz rozszerzenia dla Chrome

Spisie treści

1. Jak stworzyć i zaprogramować rozszerzenie do Chrome
2. Przykład rozszerzeń dla Chrome

Ten samouczek zostanie podzielony na 3 sekcje: Pierwsza sekcja, w której wyjaśnimy różne koncepcje dotyczące rozszerzeń w Chrome, ich strukturę i podstawowe tworzenie rozszerzenia. W drugiej części skupimy się na tworzeniu rozszerzeń do tej wspaniałej przeglądarki, takiej jak Google Chrome, robiąc kilka praktycznych przykładów. Na koniec w trzeciej sekcji wyjaśnimy zaawansowane opcje tworzenia rozszerzeń i sposób ich publikowania w sklepie internetowym Google Chrome, aby był dostępny dla ogółu społeczeństwa.

Co to są rozszerzenia w Google Chrome?Rozszerzenia to małe programy, które mogą modyfikować i poprawiać funkcjonalność przeglądarki, w tym przypadku Chrome. Są one opracowywane przy użyciu technologii internetowych, takich jak HTML, Javascript i CSS.

Rozszerzenia mają niewielki lub żaden interfejs użytkownika. Na przykład poniższy obrazek pokazuje ikonę kłódki, która po kliknięciu otwiera mały interfejs.

To konkretne rozszerzenie służy do szyfrowania i odszyfrowywania wiadomości e-mail za pomocą klucza PGP. Rozszerzenia to pliki spakowane w jeden, które użytkownik pobiera i instaluje. To opakowanie, w przeciwieństwie do zwykłych aplikacji internetowych, nie musi zależeć od treści internetowych.

Jak wspomniano powyżej, rozszerzenia umożliwiają dodawanie funkcji do Chrome bez zagłębiania się w kod natywny. Nowe rozszerzenia można tworzyć za pomocą podstawowych technologii, z którymi pracuje większość programistów tworzących strony internetowe: HTML, CSS i Javascript.

1. Jak stworzyć i zaprogramować rozszerzenie do Chrome

Na początek stworzymy proste rozszerzenie, które pobiera obraz z Google, używając adresu URL bieżącej strony jako wyszukiwanego hasła. Zrobimy to, implementując element interfejsu użytkownika, który nazywamy chrome.browserAkcja, co pozwala nam umieścić ikonę tuż obok menu chrome, którą można kliknąć, aby uzyskać szybki dostęp. Kliknięcie tej ikony otworzy wyskakujące okienko zawierające obraz uzyskany z bieżącej strony, który będzie wyglądał tak:

Aby rozpocząć naszą praktykę, stworzymy katalog o nazwie Przeglądarka zdjęć, w tym uwzględnimy wszystkie pliki, z którymi będziemy pracować. Jako edytor programistyczny możesz użyć jednego z własnych preferencji, w moim przypadku użyję edytora Chrome Dev, który możesz pobrać pod następującym adresem:

Edytor Chrome dla deweloperów

Pierwszą rzeczą, której będziemy potrzebować, jest utworzenie pliku manifestu o nazwie manifest.json. Ten manifest to nic innego jak plik metadanych w formacie JSON, który zawiera właściwości, takie jak nazwa, opis, numer wersji jego rozszerzenia i tak dalej. Na poziomie zaawansowanym użyjemy go, aby zadeklarować Chrome, co ma zrobić rozszerzenie i jakie uprawnienia są wymagane, aby wykonać określone czynności.

Format pliku manifestu jest następujący:

 {// Wymagane "manifest_version": 2, "name": "My Extension", "version": "versionString", // Zalecane "default_locale": "es", "description": "Opis tekstowy", " ikony ”: {…}, // Wybierz jedną (lub nie)” akcja_przeglądarki ”: {…}," akcja_strony ”: {…}, // Opcjonalne" autor ”:…," automatyzacja ”:…," tło ”: {// Zalecane "persistent": false}, "background_page":…, "chrome_settings_overrides": {…}, "chrome_ui_overrides": {"bookmarks_ui": {"remove_bookmark_shortcut": true, "remove_button": true}}, " chrome_url_overrides ”: {…}”,„ commande ”: {…}”,„ content_capabilities ”:…”,„ content_scripts ”: [{…}],„ content_security_policy ”„ policyString ”,„ przekonwertowany_from_user_script ”:…”,„ współobecność ”:… , "current_locale":…, "devtools_page": "devtools.html", "event_rules": [{…}], "externally_connectable": {"matches": ["*: //*.example.com/*" ]}, "file_browser_handlers": […], "file_system_provider_capabilities": {"configurable": true, "multiple_mounts": true, "source": "network"}, " homepage_url ":" http: // ścieżka / do / strony głównej "," import": [{" id ":" aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa "}]"," incognito ":" łączenie lub dzielenie "," input_components "," klucz " : "publicKey", "minimum_chrome_version": "versionString", "nacl_modules": […], "oauth2":…, "offline_enabled": true, "omnibox": {"keyword": "aString"}, "opcjonalne_uprawnienia" : ["tabs"], "options_page": "options.html", "options_ui": {"chrome_style": true, "page": "options.html"}, "permissions": ["tabs"], " platformy ”:…”," wtyczki ”: […],” wymagania ”: {…}," sandbox ”: […]," short_name ":" Krótka nazwa "," podpis ",":…," sprawdzanie pisowni ",":…, "storage": {"managed_schema": "schema.json"}, "system_indicator":…, "tts_engine": {…}, "update_url": "http: //ścieżka/do/updateInfo.xml", "nazwa_wersji ":" aString "," web_accessible_resources ": […]}

Następnie opiszę funkcję, która spełnia najważniejsze etykiety:

W wymagane:

wersja_manifestu: Jest to wersja manifestu, reprezentowana przez liczbę całkowitą, która określa wersję formatu pliku. Począwszy od Chrome 18 programiści muszą podać liczbę 2.

mniam: Jest to nazwa, którą będzie miało Twoje rozszerzenie. Musi zawierać maksymalnie 45 znaków, nazwa jest głównym elementem definicji rozszerzenia i jest to pole obowiązkowe. Jest wyświetlany w następujących miejscach:

a) W puszce instalacyjnej.
b) W interfejsie użytkownika, w którym administrowane jest rozszerzenie.
c) W sklepie wirtualnym Chrome.

wersja: Musi składać się z jednej do czterech liczb całkowitych oddzielonych kropkami, które identyfikują wersję rozszerzenia. Oto kilka przykładów prawidłowych wersji:

"Wersja 1"
"Wersja": "1.0"
„Wersja”: „2.10.2”
„Wersja”: „3.1.2.4567”

Zalecana:

default_locale: Określa podkatalog _locales (języki), który zawiera domyślne ciągi dla tego rozszerzenia. Musisz umieścić wszystkie ciągi widoczne dla użytkownika w pliku o nazwie messages.json. Za każdym razem, gdy dołączasz nowy język, musisz dodać nowy plik wiadomości.json w katalogu _locales / localecode, gdzie localecode to kod języka, podobnie jak en to angielski i dotyczy języka hiszpańskiego.

Przykład umiędzynarodowionego rozszerzenia z obsługą języka angielskiego (en), hiszpańskiego (es) i koreańskiego (ko) będzie następujący:

opis: Zawiera ciąg w postaci zwykłego tekstu (bez HTML lub innego formatu) o maksymalnej długości 132 znaków, który opisuje funkcjonalność rozszerzenia.

Ikony: Umożliwia dodanie jednej lub więcej ikon reprezentujących rozszerzenie. Zawsze powinna być dostarczona ikona 128x128px. Będzie on używany podczas instalacji i w Chrome Web Store. Rozszerzenia muszą również zawierać ikonę 48x48, która jest używana na stronie zarządzania rozszerzeniami Chrome (chrome: // extensions). Możesz też określić ikonę 16x16, która będzie używana jako favicon dla stron rozszerzenia.

Ikony powinny być zasadniczo w formacie PNG, ponieważ zapewnia najlepszą obsługę przezroczystości. Mogą być jednak w dowolnym formacie obsługiwanym przez WebKit, w tym BMP.webp, GIF.webp, ICO i JPEG.webp. Oto przykład specyfikacji ikon:

 "icons": {"16": "icon16.png.webp", "48": "icon48.png.webp", "128": "icon128.png.webp"},

Przykład

Wybierz jeden (lub żaden):

działanie_przeglądarki: Użyj działania przeglądarki, aby umieścić ikony na głównym pasku narzędzi u góry przeglądarki Google Chrome, po prawej stronie paska adresu. Dodatkowo możesz dodać tooltip (pływająca wiadomość), znaczek (pływający tekst na ikonie) i popup (pływające okno).

Przykład użycia przeglądarka_akcja:

 {"name": "Moje rozszerzenie",… "browser_action": {"default_icon": {// opcjonalne "19": "images / icon19.png.webp", // opcjonalne "38": "images / icon38.png.webp" // opcjonalnie}, "default_title": "Google Mail", // opcjonalnie; pokazuje podpowiedź "default_popup": "popup.html" // opcjonalnie}, …}

page_action: Użyj tego interfejsu API, aby umieścić swoją ikonę w pasku adresu.

Przykład użycia:

 {"name": "Moje rozszerzenie",… "page_action": {"default_icon": {// opcjonalne "19": "images / icon19.png.webp", // opcjonalne "38": "images / icon38.png.webp" // opcjonalnie}, "default_title": "poczta Google", // opcjonalnie; pokaż w opisie "default_popup": "popup.html" // opcjonalnie},…}

Były

Opcjonalny:

Tło: Częstą potrzebą w rozszerzeniach jest posiadanie jednej strony do wykonywania długich sekwencji w celu zarządzania niektórymi zadaniami lub statusami. To jest strona HTML działająca w połączeniu z rozszerzeniem. Rozpoczyna się, gdy rozszerzenie zaczyna działać i aktywuje tylko jedną jego instancję na raz. Zamiast korzystać z Tła, zaleca się użycie strony wydarzenia.

W typowym rozszerzeniu ze stroną w tle interfejs użytkownika, na przykład działanie_przeglądarki lub działanie_strony, oraz niektóre opcje strony działają jako widok rozszerzenia. Gdy widok musi znać jakiś stan (zamknął okno, zaktualizował stronę …), wysyła żądanie stanu do strony, która jest znaleziona jako Tło. Gdy strona Tło powiadamia, że nastąpiła zmiana stanu, informuje widok o konieczności zaktualizowania lub podjęcia działań.

Jego format jest następujący:

 {"name": "Moje rozszerzenie",… "background": {"scripts": ["background.js"]},…}

Format

Strony wydarzeń: Przed zdefiniowaniem poniższego atrybutu konieczne jest wyjaśnienie, o co chodzi na stronach zdarzeń. Powszechną potrzebą aplikacji i rozszerzeń jest posiadanie jednego, długo działającego skryptu do obsługi niektórych zadań lub stanów. Taki jest cel stron wydarzeń. Strony wydarzeń ładują się tylko wtedy, gdy są potrzebne. Kiedy nie robi czegoś aktywnie, jest rozładowywany z pamięci podręcznej, zwalniając pamięć i inne zasoby systemowe.

Korzyści w zakresie wydajności są znaczne, szczególnie w przypadku urządzeń o niskim poborze mocy. Dlatego zaleca się używanie większej liczby stron wydarzeń niż tła.

Deklaracja strony zdarzenia w pliku manifestu wyglądałaby następująco:

 {"name": "Moje rozszerzenie", … "background": {"scripts": ["eventPage.js"], "persistent": false}, …}

Jak widać, różnica w porównaniu z Background jest atrybutem trwałym, który będzie miał status fałszywy.

chrome_settings_overrides: Służy do nadpisywania niektórych wybranych konfiguracji w Chrome. Ten interfejs API jest dostępny tylko dla systemu Windows.

Niektóre z tych konfiguracji mogą być stroną główną (stroną główną przeglądarki, dostawcą wyszukiwania (dostawcą wyszukiwania) itp.

Przykład konfiguracji:

 {"name": "Moje rozszerzenie",… "chrome_settings_overrides": {"homepage": "http://www.homepage.com", "search_provider": {"name": "name .__ MSG_url_domain__", "keyword " : "słowo kluczowe .__ MSG_url_domain__", "search_url": "http: //www.foo.__MSG_url_domain__/s? q = {searchTerms}", "favicon_url": "http: //www.foo.__MSG_url_domain__/favicon. ico" , "suggest_url": "http: //www.foo.__MSG_url_domain__/suggest? q = {searchTerms}", "instant_url": "http: //www.foo.__MSG_url_domain__/instant? q = {searchTerms}" , " image_url ":" http: //www.foo.__MSG_url_domain__/image? q = {searchTerms} "," search_url_post_params "," search_lang = __ MSG_url_domain__ "," sugestia_url_post_params ":"suger_lang = __ MSG_url_main = " MSG_url_domain =" instant_url_params_url_domain " __MSG_url_domain__ "," image_url_post_params ":" image_lang = __ MSG_url_domain__ "," Alternative_urls ": [" http: //www.moo.__MSG_Terml_domain__ "," www:_/s? .noo.__MSG_url_url_ ?q = {searchTerms} "]"," kodowanie ":" UTF-8 "," is_default "," prawda}," startup_pages ": [" http://www.st artup.com "]}", default_locale ":" de ", …}

chrome_ui_overrides: Ta właściwość rozszerzenia służy do zastępowania niektórych ustawień w interfejsie użytkownika Chrome. Jak na przykład znaczniki. Jego konfiguracja wygląda następująco:

 {"name": "Moje rozszerzenie",… "chrome_ui_overrides": {"bookmarks_ui": {"remove_button": "true", "remove_bookmark_shortcut": "true"}},…}

W tym przypadku gwiazdka, którą przeglądarka ma dla ulubionych, jest eliminowana.

chrome_url_overrides: Jest to sposób na zastąpienie pliku HTML z rozszerzenia dla strony, którą zwykle udostępnia przeglądarka Google Chrome. Dodatkowo możesz również nadpisać jego kod CSS i JavaScript.

Rozszerzenie o tej konfiguracji może zastąpić jedną z następujących stron Chrome:

Menedżer zakładek: Jest to strona, która pojawia się, gdy użytkownik wybierze opcję z menu menedżera zakładek w menu Chrome lub na Macu, element Menedżer zakładek w menu Zakładki.

POWIĘKSZAĆ

Historia (historia): Jest to strona, która pojawia się, gdy użytkownik wybierze historię z menu Chrome lub, na Macu, element pokazuje pełną historię z menu znajdującego się w opcji historii.

POWIĘKSZAĆ

Nowa karta (nowa karta): Jest to strona, która pojawia się, gdy użytkownik tworzy nową kartę lub okno w przeglądarce. Możesz również uzyskać dostęp do tej strony, umieszczając następujący adres w pasku adresu: chrome: // newtab

POWIĘKSZAĆ

NotatkaPojedyncze rozszerzenie może nadpisać tylko jedną stronę. Na przykład rozszerzenie nie może nadpisać zakładek, a tym samym strony historii.

 {"name": "Moje rozszerzenie",… "chrome_url_overrides": {"newtab": "mypage.html" // opcje to nowa karta, historia, zakładki},…}

polecenia: Ten interfejs API poleceń służy do dodawania skrótów klawiaturowych, które wyzwalają akcję w rozszerzeniu. Na przykład akcja otwierająca akcję przeglądarki lub wysyłanie polecenia do rozszerzenia.

 {"name": "Moje rozszerzenie",… "commands": {"toggle-feature-foo": {"suggested_key": {"default": "Ctrl + Shift + Y", "mac": "Command + Shift + Y "}," description ":" Przełącz funkcję foo "}"," _execute_browser_action ": {" sugeruje_key": {" windows ":" Ctrl + Shift + Y "," mac ":" Command + Shift + Y ", "chromeos": "Ctrl + Shift + U", "linux": "Ctrl + Shift + J"}}, "_execute_page_action": {"suggested_key": {"default": "Ctrl + Shift + E", "windows ":" Alt + Shift + P "," mac ":" Alt + Shift + P "}}},…}

Na stronie Tło możesz powiązać kontroler dla każdego polecenia zdefiniowanego w pliku manifest.js (z wyjątkiem „_execute_browser_action'T'_execute_page_action') przez onCommand.addListener.

Na przykład:

 chrome.commands.onCommand.addListener (funkcja (polecenie) {console.log ('Polecenie naciśnięte:', polecenie);});

content_scripts: Są to pliki javascript, które są wykonywane w kontekście stron internetowych. Korzystając ze standardowego Document Object Model (DOM), mogą odczytywać szczegóły stron internetowych odwiedzanych przez przeglądarkę lub wprowadzać w nich zmiany.

 {"name": "Moje rozszerzenie",… "content_scripts": [{"matches": ["http://www.google.com/*"], "css": ["mystyles.css"], " js ": [" jquery.js "," myscript.js "]}],…}

content_scripts: Aby zwiększyć bezpieczeństwo naszych rozszerzeń i uniknąć potencjalnych problemów związanych z wykonywaniem skryptów między witrynami, w systemie rozszerzeń Chrome zastosowano ogólną koncepcję Polityka bezpieczeństwa treści (CSP). Wprowadza to bardzo surowe zasady, które domyślnie zwiększają bezpieczeństwo rozszerzeń. Ogólnie rzecz biorąc, CSP działa jako mechanizm czarnej i białej listy dla zasobów ładowanych lub wykonywanych przez jego rozszerzenia.

 {…, "Content_security_policy": "script-src 'self' https://example.com; object-src 'self'"…}

To były jedne z najważniejszych atrybutów. Dla naszej początkowej praktyki zdefiniujemy nasz plik manifest.json w następujący sposób:

 {"manifest_version": 2, "name": "Przykład uruchamiania", "description": "To rozszerzenie wyświetla obraz z grafik Google bieżącej strony", "version": "1.0", "browser_action": {" default_icon ":" icon.png.webp "," default_popup "," popup.html "}"," uprawnienia ": [" activeTab "," https://www.googleapis.com/ "]}

Jak widać w naszym przykładowym manifeście, zadeklarowaliśmy browser_action, uprawnienie activeTab do wyświetlania adresu URL bieżącej karty, a host otrzymał uprawnienie, w ten sposób można uzyskać dostęp do interfejsu Google API w celu wyszukiwania zewnętrznych obrazów.

Z kolei podczas definiowania działania przeglądarki znajdują się 2 pliki zasobów: icon.png.webp i popup.html. Oba zasoby muszą istnieć w pakiecie rozszerzeń, więc utwórzmy je teraz:

ikona.png.webp Zostanie wyświetlony obok skrzynki wielofunkcyjnej, czekając na interakcję użytkownika. To tylko plik PNG o wymiarach 19 pikseli na 19 pikseli.

popup.html zostanie wyświetlony w wyskakującym okienku, które jest tworzone w odpowiedzi na kliknięcie przez użytkownika ikony. Jest to standardowy plik HTML, a jego zawartość wygląda następująco:

Wyskakujące okienko rozszerzenia Getting

POWIĘKSZAĆ

2. Upewnij się, że pole wyboru trybu programisty w prawym górnym rogu jest zaznaczone.

3. Kliknij opcję Prześlij rozpakowane (rozpakowane) rozszerzenie, aby wyświetlić okno dialogowe wyboru pliku.

POWIĘKSZAĆ

4. Przejdź do katalogu, w którym znajdują się pliki rozszerzeń, i wybierz go.

Alternatywnie możesz przeciągnąć katalog zawierający projekt i upuścić go w oknie rozszerzeń Chrome. Spowoduje to załadowanie rozszerzenia w Twojej przeglądarce.

W ten sposób stworzymy proste rozszerzenie dla Google Chrome. W kolejnej części zagłębimy się w budowę rozszerzeń w połączeniu z frameworkami programistycznymi, takimi jak jquery i Bootstrap, co pozwoli nam usprawnić nasz rozwój.

2. Przykład rozszerzeń dla Chrome

W tej sekcji przeprowadzimy kilka przykładów, które pozwolą nam w pełni zrozumieć wiele funkcjonalności, które istnieją podczas budowania rozszerzenia dla Google Chrome.

Ćwiczenie 1 – niebieskie tło
W tym przykładzie zrobimy proste rozszerzenie, w którym dowiemy się, jak możemy modyfikować zawartość stron, które ładujemy w naszej przeglądarce. W takim przypadku zmodyfikujemy kolor tła załadowanej strony i zmienimy go na niebieski.

Jak wyjaśniłem w pierwszej części tego samouczka, możesz użyć dowolnego IDE programistycznego, w moim przypadku użyję edytora Chrome Dev.

POWIĘKSZAĆ

Na początek utworzymy nowy katalog o nazwie Niebieskie tło i stworzymy projekt o tej samej nazwie.

POWIĘKSZAĆ

Wewnątrz stworzymy nasz pierwszy plik manifest.json który będzie zawierał definicje naszego rozszerzenia.

POWIĘKSZAĆ

Nasze archiwum manifest.json musi zawierać następujący kod:

 {"manifest_version": 2, "name": "Niebieskie Tło", "description": "To rozszerzenie zmieniło kolor tła bieżącej strony", "version": "1.0", "browser_action": {"default_icon" : "icon.png.webp", "default_title": "Ustaw tę stronę jako niebieską"}, "permissions": ["activeTab"], "background": {"scripts": ["background.js"], "persistent": false }}

Ponieważ nasze rozszerzenie jest proste, będzie zawierało tylko ikonę, która po naciśnięciu spowoduje wykonanie akcji. Jak widać w pliku manifest.json określamy nazwę i jej opis, w działanie_przeglądarki Definiujemy ikonę, która będzie wyświetlana na pasku naszej przeglądarki Google Chrome oraz tytuł, który będzie się wyświetlał po ustawieniu wskaźnika myszy nad tą ikoną. Odnośnie uprawnień zdefiniujemy, że będzie to zrobione tylko w aktywnej zakładce. Plik, który będzie działał w tle, będzie naszym plikiem tło.js który nie będzie trwały, ponieważ zostanie wykonany dopiero po kliknięciu rozszerzenia.

Tworzymy naszą ikonę i zapisujemy ją w katalogu projektu zgodnie z definicją w manifest.json. W tym przypadku w katalogu głównym projektu.

Następnie tworzymy plik JavaScript o nazwie tło.js w tym samym katalogu z następującym kodem:

 // wywoływane, gdy użytkownik kliknie rozszerzenie chrome.browserAction.onClicked.addListener (function (tab) {console.log ('Zmiana' + tab.url + 'to blue!'); chrome.tabs.executeScript ({ code: ' document.body.style.backgroundColor = "niebieski"'});});

Pozostawiając cały projekt w następujący sposób:

POWIĘKSZAĆ

Aby uruchomić nasze rozszerzenie, wystarczy nacisnąć przycisk odtwarzania znajdujący się na górnym pasku edytora Chrome Dev.

POWIĘKSZAĆ

Po jego naciśnięciu rozszerzenie zostanie automatycznie załadowane w przeglądarce Google Chrome.

Zobaczmy nasze rozszerzenie w akcji, klikając wykonaną przeze mnie ikonę (niebieskie tło z białą literą A), stronę, którą załadowałem w bieżącej zakładce, w moim przypadku moje konto użytkownika w Solvetic (http://www .solvetic… .berth-ramncgev /) zmieni tło na niebieskie. Należy zauważyć, że zmieni się tylko kolor elementu BODY, a nie DIV, które zawiera, ponieważ tak zdefiniowałem go w moim tło.js.

POWIĘKSZAĆ

Praktyka 2 - Wiele kolorów
W tym przykładzie pokażę, jak usprawnić naszą pracę z IDE i kodu. w Edytor Chrome dla deweloperów, klikamy w przycisk +, aby utworzyć nowy projekt, tym razem zmienimy typ projektu, wybierając opcję Aplikacja JavaScript dla Chrome.

POWIĘKSZAĆ

Jak widać, automatycznie generuje całą strukturę naszego projektu. Z naszym plikiem manifest.json z najczęstszymi definicjami.

POWIĘKSZAĆ

Do tego pliku dodamy krótki opis na etykiecie opis umieszczenie tekstu, który chcesz, w moim przypadku „Rozszerzenie umożliwiające zmianę koloru tła”. Na potrzeby tego projektu stworzymy 2 ikony, jedną 16x16 pikseli, a drugą 128x128 pikseli, jak widać w strukturze, zostaną one zapisane w katalogu aktywa.

Pod tagiem dodamy następujący kod minimalna_wersja_chrome:

 "permissions": ["tabs", "http: // * / *", "https: // * / *"], "browser_action": {"default_title": "Zmień stronę na wiele kolorów.", " default_popup ":" popup.html "},

Jak widać, definiujemy wyskakujące okienko lub widok, który będzie zawierał cały kod HTML, który użytkownik zobaczy po kliknięciu naszego rozszerzenia. Następnie dodamy następujący kod:

 "content_scripts": [{"matches": [""], "css": ["assets / bootstrap / css / bootstrap.min.css"], "js": ["assets / jquery.min.js", "main.js"], "run_at": "document_start"}]

content_scripts- Zawiera pliki JavaScript (js) i arkusze stylów (css), które będą wykonywane w kontekście strony internetowej. Może zawierać następujące właściwości:

mecze: Obowiązkowe. Określ, do której strony skrypt zostanie wstrzyknięty.

wyklucz_dopasowania: Opcjonalny. Strony, które zostaną wykluczone, aby skrypt nie został wstrzyknięty.

match_about_blank: Opcjonalny. Ta wartość to Boolean i wskazuje, czy skrypt zostanie wstawiony na pustą stronę (about: blank i about: srcdoc).

css: Opcjonalny. Jest to układ, który wskazuje listę plików css, które zostaną wstawione na żądanej stronie w przeglądarce.

js: Opcjonalny. Jest to układ z listą plików JavaScript, które zostaną wstawione na żądanej w przeglądarce stronie.

run_at: Opcjonalny. Jest to ciąg tekstowy, który kontroluje, kiedy pliki js zostaną załadowane. Jego wartość może być:
document_start: Pliki są wstrzykiwane po dowolnym pliku css, ale przed zbudowaniem DOM lub wykonaniem dowolnego innego skryptu.

document_end: Pliki są wstrzykiwane natychmiast po zakończeniu DOM, ale przed załadowaniem jakichkolwiek zasobów, takich jak obrazy i ramki.

dokument_bezczynny: Przeglądarka wybiera czas wstrzykiwania skryptów pomiędzy document_end, a zaraz po wyzwoleniu zdarzenia przez window.onload Ta opcja jest domyślnie skonfigurowana.

Na końcu naszego pliku manifest.json Powinno wyglądać następująco:

POWIĘKSZAĆ

Jak widać, dodaliśmy kilka nowych rzeczy w nieruchomości css Zdefiniowaliśmy framework Bootstrap, który nie ułatwi programowania na poziomie stylu. Obserwowani na nieruchomości js Definiujemy bibliotekę JavaScript JQUERY, która nie pozwoli nam pracować w szybszy i łatwiejszy sposób wszystkiego, co dotyczy JavaScript. Nasz plik index.html powinien wyglądać tak:

 Wielokolorowe wyskakujące okienkoczerwonyNiebieskiZielonyŻółty

W pliku index.html po prostu tworzymy odniesienia do naszych plików Bootstrap, Jquery i main.js. W body definiujemy kontener bootstrap z jego elementami div, które będą służyć jako przyciski dla różnych opcji kolorystycznych.

Dla pliku main.js użyjemy zdarzenia click, które zostanie wykonane po naciśnięciu przycisku myszy na każdej klasie „col-md-12”, pobierając kolor tła elementu, który został wybrany i przypisując go do ciała strona została otwarta. Następnie zostanie wykonane zdarzenie window.close (); które zamykają okno naszego rozszerzenia. Kod zdefiniowany dla main.js wygląda następująco:

 $ (dokument) .ready (function () {$ (. col-md-12"). click (function () {var color = $ (this) .css ("background-color"); chrome.tabs. executeScript (null, {code: "$ ('body'). css ('background-color', '" + color + "')"}); window.close ();});});

Wynik podczas wykonywania naszego rozszerzenia będziemy mogli zwizualizować ikonę, którą dla niego stworzyliśmy na górnym pasku.

Kliknięcie naszego rozszerzenia spowoduje wyświetlenie następującego wyskakującego okienka:

A po wybraniu jednej z opcji wynik będzie następujący:

POWIĘKSZAĆ

Ćwiczenie 3 – Historia
W tym przykładzie zastosujemy wszystko, co widać powyżej, stworzymy rozszerzenie, które po kliknięciu wyświetli nam wyskakujące okienko z listą najczęściej odwiedzanych stron z naszej przeglądarki, dając bezpośredni dostęp do tych stron. Jedyną inną rzeczą w tym przykładzie jest to, że poprosimy o zgodę jednego z interfejsów API Chrome na dostęp do najczęściej oglądanych stron z Chrome. Nazwa tego interfejsu API to chrome.topWitryny.

Na początek zamierzamy Edytor Chrome dla deweloperów i stworzyliśmy nasz projekt pod nazwą TopHistoria a w typie projektu wybieramy opcję JavaScript Chrome App.

Następnie nasz plik manifest.json Powinno wyglądać następująco:

 {"manifest_version": 2, "name": "TopHistorial", "short_name": "TopHistorial", "description": "Pokaż listę najczęściej oglądanych stron w naszej przeglądarce", "version": "0.0.1", " minimum_chrome_version ":" 38 "," uprawnienia": [" topSites "]"," browser_action": {" default_icon ":" icon.png.webp "," default_popup ":" popup.html "}"," content_scripts": [{" pasuje do ": [" "]," css ": [" asset / bootstrap / css / bootstrap.min.css "]," js ”: [" asset / jquery.min.js "," main.js "], "run_at": "document_start"}]}

Jak widać, dodaliśmy nowy atrybut do manifestu, aby móc uzyskać pozwolenie na API Chrome: Zadeklaruj uprawnienia, jest używany w większości interfejsów Chrome API w twoim rozszerzeniu, musisz go najpierw zadeklarować, umieszczając pole uprawnienia w swoim manifeście. Każde uprawnienie może być ciągiem tekstowym należącym do poniższej listy (podzielonej na 3 obrazy):

Jeśli chodzi o nasz plik popup.html Powinno wyglądać następująco:

 Wielokolorowe wyskakujące okienko

Nasze archiwum main.js zawierające zapytanie API i obsługę zdarzenia kliknięcia, będzie reprezentowane w następujący sposób:

 $ (document) .ready (function () {function openpage () {chrome.tabs.create ({url: $ (this) .attr ("href")});} function buildPopupDom (mostVisitedURLs) {for (var i = 0; i <mostVisitedURLs.length; i ++) {$ ("# top_list"). Dołącz ('
„+ mostVisitedURLs [i] .title +”
'); } $ (".linki"). bind ("klik", openpage); } chrome.topSites.get (buildPopupDom); });

Na poziomie strukturalnym nasz projekt powinien wyglądać następująco:

Podczas wykonywania naszego rozszerzenia będziemy mogli zobaczyć ikonę u góry przeglądarki, która w moim przypadku projektuje ją na niebiesko, po kliknięciu otwiera się wyskakujące okienko z listą stron, do których najczęściej odwiedzałem z mojego przeglądarka uporządkowana według liczby odwiedzin, które wykonałem.

POWIĘKSZAĆ

Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt