Jak zrobić dodatek do przeglądarki za pomocą JavaScript. Napisanie rozszerzenia dla Google Chrome

iMacros to rozszerzenie pomagające w testowaniu stron internetowych. Zamiast samodzielnie wykonywać te same czynności na stronie, programista musi jedynie zarejestrować wymaganą sekwencję działań w iMacros i w razie potrzeby uruchomić rozszerzenie.

Rozszerzenie może współpracować z witrynami zaimplementowanymi przy użyciu technologii Java, Flash, Flex, Ajax i Silverlight.

Rozszerzenie dla tych, którzy lubią „bawić się czcionkami” - pozwala eksperymentować z całą gamą czcionek z biblioteki Google Fonts bez konieczności wprowadzania zmian w kodzie strony. Możesz zmienić nie tylko samą czcionkę, ale także jej rozmiar, styl pisania i tak dalej.

Rozszerzenie do przeglądarki Google Chrome, które umożliwia zaznaczanie i kopiowanie tekstu nawet ze zdjęć, zdaniem Cretive Bloq przyda się każdemu, kto choć raz w swojej pracy miał do czynienia z osadzonym tekstem.

Rozszerzenie, które pozwala błyskawicznie określić, która czcionka jest używana na danej stronie, bez wykonywania niemal żadnych dodatkowych czynności - poprzez najechanie kursorem myszy na napis.

YSlow to narzędzie, które nie tylko sprawdza prędkość ładowania konkretnej strony internetowej, ale także informuje programistę, co ją spowalnia. W tym celu rozszerzenie sprawdza witrynę pod kątem zgodności z 23 z 34 reguł wydajności opracowanych przez zespół Yahoo.

Cały zestaw przydatnych narzędzi do zarządzania elementami serwisu - na przykład do analizy zasobów i układu sieci, testowania kodu oraz błyskawicznej zmiany parametrów i wygląd strony.

Rozszerzenie automatycznie sprawdzające, czy witryna spełnia podstawowe zasady SEO, czy jest wystarczająco wydajna i przyjazna dla użytkownika. Wyniki testu prezentowane są w formie swoistej listy kontrolnej – widać więcej szczegółowe informacje i rekomendacje dla każdego z niezrealizowanych elementów, a także natychmiastowe korygowanie błędów.

Umożliwia automatyczne zapisywanie wszelkich zmian wprowadzonych w kodzie strony za pomocą Chrome DevTools. Jak twierdzi autor materiału, narzędzie pomaga programistom oszczędzać pieniądze duża liczba czas.

Rozszerzenie, za pomocą którego możesz „zamienić” dowolną stronę w schemat strukturalny układu materiału - model szkieletowy. Umożliwia programistom i projektantom stron internetowych zapoznanie się z układem dowolnej strony w Internecie bez opuszczania przeglądarki.

Ripple Emulator to rozszerzenie emulatora dla przeglądarki Google Chrome, które umożliwia testowanie stron internetowych na różnych urządzeniach platformy mobilne z różnymi rozdzielczościami ekranu. Można go używać w połączeniu z innymi rozszerzeniami do testowania i debugowania zasobów.

Streak to rozszerzenie, które pozwala na skręt skrzynka pocztowa do Gmaila w systemie CRM. Możesz śledzić status transakcji i negocjacji, które toczą się w e-mail z kontrahentami, użyj Streak do przetwarzania żądań od użytkowników produktu i śledzenia poprawek przesłanych błędów i tak dalej.

Rozszerzenie dla szybkie wyszukiwanie w popularnym zasobie dla programistów Stack Overflow.

Umożliwia natychmiastowy dostęp do dokumentacji PHP 5.5 z poziomu przeglądarki.

PerfectPixel to rozszerzenie dla przeglądarki Google Chrome. Pozwala „nałożyć” na stronę internetową półprzezroczystą siatkę i sprawdzić względem niej określone odległości. Możesz nałożyć inne obrazy – np. oryginalny układ – aby mieć pewność, że wynikowa strona będzie dokładnie do niego pasować:

Narzędzie do przeglądania kodu źródłowego stron i edycji kodu CSS.

Możesz zmieniać cienie, obwody pudełek itd., przeciągając suwak. Po dokonaniu zmian możesz skopiować powstały kod i zastąpić go w kodzie witryny.

Rozszerzenie przeglądarki, które wykrywa, które biblioteki JavaScript, framework lub CMS są używane w zasobie.

User-Agent Switcher to rozszerzenie umożliwiające „maskowanie” przeglądarki Google Chrome jako Internet Explorera, Opera lub inna przeglądarka.

Wbudowany emulator przeglądarki Internet Explorer dla przeglądarki Chrome.

Proste i darmowy edytor internetowy obrazy. Umożliwia „przechwytywanie” obrazów lub wykonywanie zrzutów ekranu przeglądarki – i natychmiastową edycję za pomocą rozszerzenia do Chrome.

Rozszerzenie, które pomaga dostosować usługi internetowe dla użytkowników cierpiących na daltonizm – pokazując programiście, jak witryna jest przeglądana przez osoby cierpiące na tę chorobę. Umożliwia projektantom i programistom stron internetowych tworzenie bardziej dostępnych usług.

Proste narzędzie, które pomaga określić wysokość, szerokość i położenie dowolnego elementu na stronie.

Rozszerzenie sprawdzające stronę internetową pod kątem uszkodzonych lub nieprawidłowych linków.

Rozszerzenie, które pomaga nie tyle w rozwoju, ile w znajdowaniu inspiracji i dobrych zdjęć. Pokazuje jeden obraz z Flickr na każdej nowej karcie w przeglądarce Google Chrome. Klikając w niego użytkownik przechodzi na stronę autora, gdzie może zapoznać się z innymi jego dziełami.

Rozszerzenie przeglądarki podobne do poprzedniej wtyczki z tej listy - tylko zamiast zdjęć z Flickra w nowej zakładce użytkownik widzi uznane dzieła sztuki - na przykład obrazy Van Gogha czy Maneta.

Oficjalne rozszerzenie od Google do kompresji ruchu, które umożliwia oszczędzanie ruchu w przeglądarce Google Chrome.

Rozszerzenia i wtyczki są użytecznym uzupełnieniem istniejących funkcji na stronie i w przeglądarce. Za ich pomocą możesz nagrywać dźwięk i obraz z ekranu, umożliwiać wykrywanie błędów i wiele więcej.
W tym artykule przyjrzymy się tworzeniu najprostszego rozszerzenia - programu uruchamiającego ulubione strony. Chociaż aplikacja będzie prymitywna, nadal będzie ujawniać proces tworzenia i pobierania rozszerzenia dla Google Chrome.

Wskazana jest znajomość HTML, CSS i JS (w przypadku konieczności rozszerzenia zestawu funkcji) na bardzo podstawowym poziomie, aby lepiej zrozumieć materiał, ale w każdym przypadku wyjaśnimy kod.

Każde rozszerzenie Chrome musi mieć plik manifest.json. Służy jedynie do opisu funkcji aplikacji, ogólnego opisu, numeru wersji i uprawnień. Więcej informacji na temat tego pliku znajdziesz na blogu zespołu Chrome.

Tutaj wszystko jest bardzo proste:

( "wersja_manifestu": 2, "nazwa": "Uruchamiacz Tprogera", "opis": "Uruchamiacz Tprogera", "wersja": "1.0.0", "ikony": ("128": "icon_128.png" ) , "browser_action": ( "default_icon": "icon.png", "default_popup": "popup.html" ), "permissions": ["activeTab"] )

Po opisaniu naszego rozszerzenia w pliku manifest.json możemy spokojnie przejść do kolejnego etapu, czyli znacznikowania.

Najpierw napiszmy podstawowy kod HTML:

Powyżej napisaliśmy framework dla wtyczki, teraz jest on zupełnie pusty i trzeba podać nazwę, linki do ikon i czcionkę. Można to zrobić za pomocą tagu linku, pamiętaj, że nie jest on zamknięty:

Szybki program uruchamiający Tproger Media

Nie zapomnij określić kodowania, w przeciwnym razie litery cyrylicy nie będą wyświetlane.

Przejdźmy do drugiego bloku kodu, czyli znacznika body i jego zawartości.

Aby rozszerzenie wyglądało piękniej i wygodniej niż obecnie, należy dodać style CSS.

/* Modalna struktura dokumentu */ /*ogólne ustawienia całego dokumentu*/ html, body (font-family: "Open Sans", bezszeryfowy; rozmiar czcionki: 14px; margines: 0; min-height: 180px; dopełnienie: 0; szerokość: 380px; ) /*ustaw ustawienia nagłówków pierwszego poziomu*/ h1 (rodzina czcionek: „Menlo”, monospace; rozmiar czcionki: 22px; waga czcionki: 400; margines: 0; kolor : #2f5876 ; ) a:link, a:visited ( kolor: #000000; kontur: 0; dekoracja tekstu: brak; ) /*ustaw szerokość obrazu*/ img ( szerokość: 30px; /*szerokość obrazu*/ ) .modal-header (align-items: center; /*wyrównaj elementy do środka*/ border-bottom: 0,5px solid #dadada; /*właściwości dolnej linii podziału*/ wysokość: 50px; ) .modal-content ( padding: 0 22px; /* dopełnienie u góry i u dołu, u góry i po lewej stronie*/ .modal-icons ( border-top: 0,5px solid #dadada; /*właściwości górnej linii podziału*/ wysokość: 50 pikseli; szerokość: 100%; ) .logo ( dopełnienie: 16 pikseli ; /* dopełnienie ze wszystkich stron*/ ) .logo-icon ( Vertical-align: text-bottom; /*wyrównaj do dołu tekstu*/ margines-prawy: 12px; /*ustawia wcięcie elementów obrazka*/ ) .version ( kolor: #444; rozmiar czcionki: 18px; )

Podstawowe ustawienia dokumentu są ustawione, przejdźmy do kolejnego fragmentu kodu, w którym wykorzystany zostanie Flexbox, o którym była mowa na początku artykułu.

Flex-container ( display: flex; /*wyświetla kontener jako element blokowy*/ justify-content: space-between; /*równomierne wyrównanie elementów*/ padding: 10px 22px; ) /*ustaw ustawienia kontenerów z ikonami* / . flex ( krycie: 1; /*parametr krycia ikony*/ szerokość: 120px; ) .flex:hover ( krycie: 0,4; /*poziom krycia po najechaniu kursorem na element*/ ) .flex .fa ( rozmiar czcionki: 40 pikseli; kolor: #2f5876;

W komentarzach staraliśmy się jak najbardziej szczegółowo wyjaśnić stosunkowo złożone kwestie. Teraz musimy tylko załadować nasze rozszerzenie do Przeglądarka Chrome i będzie działać, a jeśli przejdzie moderację, pojawi się w sklepie z rozszerzeniami (wtyczkami).

Dodajmy teraz plik z rozszerzeniem .js na wypadek, gdybyśmy nagle potrzebowali rozszerzyć funkcjonalność dodatku do przeglądarki.

Tproger Media Quick Launcher /*tutaj dodaliśmy style*/

Program uruchamiający Tproger /* Modalna struktura dokumentu */ /*ogólne ustawienia całego dokumentu*/ html, body (rodzina czcionek: „Open Sans”, bezszeryfowa; rozmiar czcionki: 14px; margines: 0; minimalna wysokość: 180px ; dopełnienie: 0; szerokość: 380px; ) /*ustaw ustawienia nagłówków pierwszego poziomu*/ h1 (rodzina czcionek: „Menlo”, monospace; rozmiar czcionki: 22px; waga czcionki: 400; margines: 0 ; kolor: #2f5876; ) a:link, a:odwiedzono ( kolor: #000000; kontur: 0; dekoracja tekstu: brak; ) /*ustaw szerokość obrazu*/ img ( szerokość: 30px; /*szerokość obrazu* / ) .modal -header ( wyrównanie elementów: środek; /*wyrównanie elementów do środka*/ border-bottom: 0,5px solid #dadada; /*właściwości dolnej linii podziału*/ wysokość: 50px; ) .modal-content ( dopełnienie: 0 22px; /*dopełnienie powyżej i poniżej, u góry i po lewej*/ .modal-icons ( border-top: 0,5px solid #dadada; /*właściwości górnej linii podziału*/ wysokość: 50px; szerokość: 100%; ) .logo ( dopełnienie: 16 pikseli; /*dopełnienie ze wszystkich stron*/ ) .logo-icon ( wyrównanie w pionie: dół tekstu; /*wyrównaj do dołu tekstu*/ margines-prawy: 12px; /*ustawia wcięcie elementów obrazka*/ .version ( kolor: #444; rozmiar czcionki: 18px; ) .flex-container ( display: flex; /*wyświetla kontener jako element blokowy*/ justify-content : odstęp-pomiędzy; /*równomierne wyrównanie elementów*/ padding: 10px 22px; ) /*ustaw ustawienia kontenerów z ikonami*/ .flex ( opacity: 1; /* parametr krycia ikony */ szerokość: 120px; ) .flex :hover ( krycie : 0,4; /*poziom krycia po najechaniu myszką na element*/ ) .flex .fa ( rozmiar czcionki: 40px; kolor: #2f5876; ) Program uruchamiający Tproger (1.0.0)

Szybki dostęp do witryn z zawartością typowego programisty

Po weryfikacji możesz rozpocząć publikację rozszerzenia. Aby to zrobić, musisz mieć następujące pliki i foldery:

Aby pobrać rozszerzenie do sklepu należy wejść do menu, najechać myszką na „ dodatkowe ustawienia", a następnie wybierz "rozszerzenia" lub wpisz chrome://extensions/ w pasku adresu.

Zawsze chciałem opowiadać ludziom o ciekawe możliwości(technologie), które mogą być obecnie dostępne dla wszystkich, ale z jakiegoś powodu nie są dostępne dla wszystkich. Tak, okazało się to tautologią, ale w pełni odzwierciedla moje wewnętrzne oburzenie na ten palący dla mnie temat. Tak czy inaczej, rozmowa nie będzie teraz dotyczyć tego, jak mówią. Dzisiaj porozmawiamy o tworzeniu rozszerzeń dla Przeglądarka Google Chrome (zwany dalej Chrome).

Rozszerzenie, które będziemy rozwijać w tym artykule, można znaleźć w sklepie Google Chrome Web Store, z tą tylko różnicą, że ma zaawansowaną funkcjonalność. Oprócz tego istnieje kod źródłowy na GitHubie, ponownie z zastrzeżeniem, że wszystko jest tam napisane w CoffeeScript, a tutaj cała historia zostanie opowiedziana w JavaScript. Swoją drogą nie jestem fanem ani zwolennikiem CoffeeScriptu, ale jest to dość ciekawa i przydatna rzecz - radzę spróbować.

Jeśli kiedykolwiek zastanawiałeś się nad pomysłem stworzenia rozszerzenia dla Chrome, Firefox, Maxthon i innych przeglądarek, prawdopodobnie już zauważyłeś, że minimalny wysiłek, jaki musisz włożyć, dotyczy Chrome. Możesz to sprawdzić, przeglądając dokumentację odpowiednich przeglądarek.

Pisanie rozszerzenia rozpoczyna się od jego opisu i ustalenia zadań, które będzie rozwiązywać. Ponieważ jestem swoim własnym szefem i mogę nie dotrzymywać terminów tyle razy, ile chcę, nie muszę pisać specyfikacji technicznych – wystarczy, że zrozumiem, że:

• Rozszerzenie powinno ukrywać wszystkie komentarze sieć społecznościowa„VK”;
• Rozszerzenie musi mieć możliwość wyświetlania komentarzy;
• Rozszerzenie musi mieć możliwość wyświetlania komentarzy na określonych stronach;

Na pierwszy rzut oka wszystko jest proste i dajemy radę. Jednak w ramach artykułu zrealizujemy tylko dwa pierwsze punkty.

Przewiduję pytania, których treść mogłaby wyglądać mniej więcej tak: „Po co ukrywać komentarze, jeśli o to właśnie chodzi w sieci społecznościowej?” Cóż, to rozsądne pytanie, które zasługuje na szczegółową odpowiedź:

Okoliczności tak się złożyły ostatnio, kiedy widzę komentarze na VK, mam ochotę dać komentatorom góry facepalmów. Subskrybuję dużą liczbę różnych stron publicznych, tematycznych (tworzenie stron internetowych) i nie tyle. I bez względu na to, jak dziwne może się to wydawać, jestem najbardziej hojny w grupach z treściami, które są dla mnie interesujące, a nie koty (w moim przypadku pandy). Nigdzie indziej nie widziałem takiej ilości nieprofesjonalnych i brzydkich informacji przepływających w komentarzach, a nawet przychodzą im na myśl kłótnie. Poza tym komentarze w kanał informacyjny Nie wyglądają estetycznie. Ogólnie rzecz biorąc, powiedziane i zrobione.

Najbardziej miłym zaskoczeniem było dla mnie to, że już na samym początku podróży wita nas opisowy charakter akcji. Mówiąc najprościej, musimy opisać naszą aplikację, jej prawa i możliwości – służy do tego plik manifest.json.

Przede wszystkim musisz wypełnić trzy wymagane pola:

( "manifest_version": 2, // Począwszy od Chrome 18 zestaw 2, w przeciwnym razie 1 (takie stare rzeczy nie są obsługiwane) "name": "Moje rozszerzenie", // Nazwa rozszerzenia "wersja": "versionString" // Wersja rozszerzenia )

Jeśli z nazwą wszystko jest jasne, a wersja manifestu jest jeszcze prostsza, musisz przyjrzeć się bliżej wersji rozszerzenia.

Wszyscy jesteśmy przyzwyczajeni do tego, że wersja czegoś składa się z trzech liczb oddzielonych kropkami - Major.Minor.Patch (Znaczenie liczby). Z npm, altanką i innymi rozkoszami rozmowa jest krótka: albo w ten sposób, albo wcale. Ale Google oferuje następujące opcje:

„wersja”: „1” „wersja”: „1.0” „wersja”: „2.10.2” „wersja”: „3.1.2.4567”

Więcej informacji na temat wszystkich pól w pliku manifestu można znaleźć w dokumentacji.

W naszym przypadku plik manifestu będzie wyglądał następująco:

(„manifest_version”: 2, „name”: „__MSG_app_name__”, „short_name”: „VKCommentBlocker”, „description”: „__MSG_app_description__”, „version”: „0.1.0”, „default_locale”: „ru”, „ uprawnienia": [ "activeTab" ], "browser_action": ( "default_icon": "icon_16.png", "default_title": "__MSG_browser_action__" ), "icons": ( "16": "icon_16.png", "48 ": "icon_48.png", "128": "icon_128.png" ), "background": ( "persistent": false, "page": "background.html" ), "content_scripts": [ ( "pasuje" : [ "http://vk.com/*", "https://vk.com/*" ], "css": [ "styles/commentblocker.css" ] ) ], "web_accessible_resources": [ "style /commentblocker_on.css" ] )

Z tego, co nie zostało wcześniej uwzględnione

• __MSG_key__ to podejście Chrome do internacjonalizacji aplikacji (i18n). Można go używać zarówno w pliku manifestu, jak i w innych plikach (nawet CSS).
• web_accessible_resources - tablica ścieżek zasobów, które będą później wykorzystywane w kontekście stron internetowych. Bez określenia w nim ścieżki nie można używać niczego na stronach internetowych, jeśli takie zachowanie jest oczekiwane.

Ogromnym plusem dla karmy Chrome jest to, że możemy teraz oczywiście włączyć rozszerzenie, jeśli zostały utworzone wszystkie zasoby określone w manifest.json.

Nie sądzę, że warto skupiać się na tym, co znajduje się w plikach commentblocker.css i commentblocker_on.css. Podam tylko pierwszy, który zawiera listę wszystkich selektorów zawierających komentarze:

@charset "utf-8"; .wall_module .reply_link_wrap .reply_link ( widoczność: ukryty !ważne; ) .wall_module .replies_wrap, #wl_replies_wrap, #wl_reply_form_wrap, #mv_comments_wrap, #mv_twój_komentarz, #pv_comments, #pv_comments_header, #pv_your_comment (wyświetlanie: brak !im ważne; widoczność: ukryta ! ważne; ) treść: po (pozycja: naprawiona; treść: „__MSG_mode_enable__”; u góry: 5 pikseli; po prawej: 5 pikseli; dopełnienie: 6 pikseli 12 pikseli; kolor tła: #ffc; obramowanie: 1 piksele stałe #ddd; indeks Z: 9999 ;)

W pliku commentblocker_on.css, jak można się domyślić, jest odwrotnie. Zauważ, że bezpośrednio w CSS używam linii z zawartością klucza języka: „__MSG_mode_enable__” . Czas utworzyć plik, w którym będą przechowywane te klucze.

W katalogu głównym naszego rozszerzenia tworzymy katalog _locales oraz zagnieżdżone w nim katalogi en i ru. Następnie opisujemy nasze klucze w pliku Messages.json.

( "app_name": ( "message": "VK Comment Blocker" ), "app_description": ( "message": "Wygodny sposób na ukrycie komentarzy w aktualnościach i grupach." ), "browser_action": ( "wiadomość ": " Zmień typ komentarza" ), "mode_enable": ( "message": "Brak komentarzy!"), "mode_disable": ( "message": "Z komentarzami!" ) )

Oprócz pola wiadomości istnieją inne pola, o których możesz dowiedzieć się z dokumentacji.

Teraz tworzymy pliki tła.html, najpierw tak:

Tło

Wszystko tutaj jest takie samo jak w zwykłym HTML-u - nic niezwykłego. Nawiasem mówiąc, nie musisz tworzyć pliku tła.html, ponieważ jest on generowany automatycznie na podstawie pól w manifest.json.

Możesz uruchomić rozszerzenie bez pisania ani jednej linii kodu JavaScript. Aby to zrobić, musisz przejść przez menu:

• Konfigurowanie i zarządzanie przeglądarką Google Chrome (Hamburger)
• Dodatkowe narzędzia
• Rozszerzenia
• Zaznacz pole obok „trybu programisty”
• Pobierz rozpakowane rozszerzenie
• Wybierz folder z rozszerzeniem

Rozszerzenie załadowało się i pojawiło się w menu. Tak, tak, to jest to „B”.

Wydawać by się mogło, że właśnie utworzone przez nas rozszerzenie nie ma nic w głowie (nie ma w tym logiki), a wszystkie komentarze na stronach sieci społecznościowej z literą „B” są teraz ukryte. Odpowiedź kryje się w manifest.json, gdzie w polu „content_scripts”: () wskazaliśmy, na jakich stronach (http://vk.com/* i https://vk.com/*) będzie znajdował się plik commentblocker.css zostaną automatycznie uwzględnione, co spowoduje ukrycie wszystkich komentarzy. Radzę przeczytać więcej na temat wzorców matematycznych. Z wyglądu jest taki prosty, ale pod maską to prawie szary wałach ze wszystkimi bajerami i gwizdkami.

Zatem nie pisząc ani jednej linijki kodu mamy już rozszerzenie, które realizuje przypisane mu główne zadanie.

Pozostaje dokończyć drugi punkt zadania, czyli zaimplementować możliwość wyświetlania komentarzy. Krótko mówiąc, musimy wypchnąć plik commentblocker_on.css, co nadpisze reguły pliku commentblocker.css. I tu z pomocą spieszy nam nasz wszechmocny JavaScript.

Pamiętasz, co mówiłem o tle.html? Tak, tak, o tym, że nie trzeba go tworzyć. Zmieńmy nieco plik manifest.json:

... „tło”: („trwałe”: fałszywe, „skrypty”: [ „scripts/commentblocker.js” ] ), ...

Właśnie podłączyłem plik JavaScript. Nic specjalnego. Przejdźmy do tego pliku.

Nie możesz po prostu wrzucić JS na stronę. Ten sam problem istnieje nie tylko w przypadku skryptów. Dlatego musimy zastosować specjalny zastrzyk ExeScript.

Najpierw musisz dodać moduł obsługi zdarzeń kliknięcia do ikony rozszerzenia:

Chrome.browserAction.onClicked.addListener(function(tab) ( chrome.tabs.executeScript(tab.id, ( code: "(" + toggleComments.toString() + ")();" )); ));

Gdzie toggleComments to funkcja, która wstawi nasz plik CSS na stronę:

Var toggleComments = funkcja() ( var rozszerzenieLink; (document.getElementById("rozszerzenie") == null) ? (extensionLink = document.createElement("link"), rozszerzenieLink.href = chrome.extension.getURL("/styles/ commentblocker_on.css”), rozszerzenieLink.id = „rozszerzenie”, rozszerzenieLink.type = „tekst/css”, rozszerzenieLink.rel = „arkusz stylów”, document.getElementsByTagName("głowa").appendChild(extensionLink)): (dokument. getElementsByTagName("głowa").removeChild(document.getElementById("rozszerzenie"))) );

Myślę, że wystarczą słowa, że ​​ten fragment kodu sprawdza, czy nasz CSS jest podłączony na stronie i wyciąga wnioski o konieczności jego włączenia lub wyłączenia.

Nawiasem mówiąc, nie ma zbyt wielu dostępnych wydarzeń, które zaspokajają inny zakres potrzeb. Istnieją na przykład takie wydarzenia:

• onCreated - utworzenie zakładki.
• onUpdated - aktualizacja zakładki.
• onRemoved - zamknięcie karty.

Warto zauważyć, że zdarzenie onUpdated wywoływane jest dwukrotnie:

• Aktualizacja strony;

Na StackOverflow radzą sprawdzić status strony:

Chrome.tabs.onUpdated.addListener(function(tabId,changeInfo, tab) ( if (changeInfo &&changeInfo.status === „complete”) ( ... ) ));

Teraz, gdy klikniesz na ikonę, zostanie podłączony plik stylu, który wyświetli komentarze, a ponowne kliknięcie ikony spowoduje ich ponowne ukrycie.

Swoją drogą warto wspomnieć o moim pełna wersja Rozszerzenie VK Comment Blocker, które jest dostępne w

Napisz rozszerzenie dla Google Chrome nietrudny. Ale podczas pisania pierwszego rozszerzenia mogą pojawić się pytania (i pojawiają się). Większość podręczników do pisania pierwszego rozszerzenia została zaprojektowana tak, aby korzystać z manifestu pierwszej wersji, która w najbliższej przyszłości nie będzie już obsługiwana.

W tym artykule omówimy:

• Jak stworzyć manifest v.2
• Jak pracować z zasobami zdalnymi
• Jak pracować z plikami cookie
• Jak pracować z lokalną pamięcią masową
• Jak pracować z powiadomieniami

Pod koniec artykułu będziemy mieli gotowe rozszerzenie organizera, które będzie posiadało pole do dodania nowego zadania, a także listę zadań na bieżący dzień. Nakreślmy wszystkie wymagania wobec organizatora:

• Musi mieć pole, aby dodać wydarzenie (data, godzina, wydarzenie)
• Powinien wyświetlać wszystkie zadania na bieżący dzień, posortowane według czasu
• Wszystkie przeszłe wydarzenia powinny być przekreślone
• Powinien posiadać pole do wpisania czasu, przez jaki powiadomienie ma być wyświetlane, a także checkbox zezwalający i zakazujący wyświetlania powiadomień
• Musi wyświetlić powiadomienie o nadchodzącym wydarzeniu na określony czas przed wydarzeniem

Tworzenie rozszerzenia zacznijmy od samego początku, czyli od manifestu. Manifest to ten sam plik, w którym zapisywane są wszystkie parametry rozszerzenia. Nazwa, opis, wersja, zezwolenie na dostęp do stron, zezwolenie na używanie plików cookie, powiadomienia, pamięć lokalna. Ogólnie rzecz biorąc, manifest jest mózgiem ekspansji. Utwórz plik manifest.json. Manifest jest jedynym plikiem, który musi mieć z góry zdefiniowaną nazwę; wszystkie pozostałe pliki mogą być nazywane dowolnie. Ten plik ma trzy wymagane pola:

manifest.json

(„nazwa”: „rozszerzenie Organizatora”, // nazwa rozszerzenia „wersja”: „1.0”, // wersja rozszerzenia. „wersja_manifestu”: 2 // wersja manifestu)

Jest tu kilka zasad:

• Wersja manifestu musi być liczbą całkowitą, to znaczy musi być zapisana jako 2, a nie „2”.
• Wersja rozszerzenia powinna być ciągiem znaków, ale zawierać tylko cyfry i kropki, czyli „1.0” jest dobre, ale 1.0 i „0.9 beta” są złe.

Po wypełnieniu wymaganych pól przejdźmy do tworzenia wyskakującego okienka rozszerzenia. Aby okno otworzyło się po kliknięciu na ikonę, należy dodać do manifestu pole „browser_action”.

manifest.json

( … "browser_action": ( "default_title": "Otwórz organizer", // Tytuł. Jest widoczny po najechaniu kursorem na ikonę w przeglądarce "default_icon": "icon_small.png", // Ścieżka do ikony rozszerzenia " default_popup": " popup.html" // Ścieżka do strony z wyskakującym okienkiem ) )

Stwórzmy teraz wyskakujące okienko. To jest normalne strona HTML, który może mieć dowolny rozmiar i kolor, bez żadnych sztuczek. Nazwijmy plik „popup.html”. Nie wystarczy utworzyć ten plik - należy go określić w manifeście. To właśnie zrobiliśmy: „default_popup”: „popup.html”.

popup.html

To działa!

Teraz przyszedł czas na przetestowanie funkcjonalności naszego rozszerzenia. Aby to zrobić, pobierz rozszerzenie do przeglądarki. Otwórz menu rozszerzeń w przeglądarce Chrome. Ustawiamy ptaka w „trybie programisty”.

Następnie pojawią się trzy przyciski. Kliknij „Załaduj rozpakowane rozszerzenie…”. Wybierz folder z plikami rozszerzeń. Następnie pojawi się nasze rozszerzenie. Jeżeli wszystko się zgadza, to po kliknięciu na ikonę pojawi się okno:

Teraz możemy przejść do przyjemniejszych rzeczy. Połączmy dwa pliki JavaScript. Pierwszy to popup.js, drugi to jquery. Z pierwszym nie będzie problemów, ale podłączymy nie lokalne jquery, a zdalne, pobrane z adresu ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js. Problemy wynikają z tego, że domyślnie rozszerzenie nie ma dostępu do zasobów stron trzecich. Aby uzyskać dostęp należy wskazać to w manifeście. Dostęp do czegoś jest wskazany w polu „uprawnienia”. Ponadto w przypadku zdalnych skryptów i css należy wskazać dostępne zasoby zdalne.

manifest.json

( ... "uprawnienia": [ "https://ajax.googleapis.com/*" ], "content_security_policy": "script-src "self" https://ajax.googleapis.com; object-src "self „” )

Teraz połączmy te skrypty z popup.html

popup.html

Korzystając z pamięci w Chrome, możesz przechowywać dane użytkowników. I to właśnie w pamięci nasze rozszerzenie będzie przechowywać przyszłe wydarzenia. Są ku temu dwa powody. Po pierwsze, dane zapisane w pamięci można zsynchronizować, jeśli zalogujesz się do przeglądarki. Po drugie, dane można przechowywać nie tylko w postaci ciągu znaków, jak w plikach cookie, ale w dowolnej formie, czyli można przechowywać zarówno tablice, jak i obiekty. Aby to zadziałało, otwórzmy dostęp do pamięci w manifeście.

manifest.json

( ... „uprawnienia”: [ ... „przechowywanie” ] ... )

Teraz przeprojektujmy wyskakujące okienko. W wyskakującym oknie pojawi się pole z dzisiejszą datą, trzy wpisy na datę, godzinę i opis nowego wydarzenia, przycisk dodania nowego wydarzenia, a także lista wszystkich wydarzeń na dany dzień.

popup.html

Data

I natychmiast dodaj wyświetlanie daty w bloku #today_date.

popup.js

$(funkcja())( var dzisiaj = nowa data(); $("#data_dzisiaj").html(today.getDate()+"."+(parseInt(dzisiaj.getMonth())+1)+". " + dzisiaj.getFullYear());

Powinno to wyglądać tak:

Zatem po kliknięciu przycisku „+” należy dodać wydarzenie. Na początku pliku zadeklarujemy globalną zmienną Storage - obiekt do pracy z Storage, a także globalną tablicę zadań do przechowywania zdarzeń.

popup.js

Var Storage = chrome.storage.sync; var zadania = nowa tablica(); $(funkcja())( … $("#add_task").click(funkcja())( var nowe_zadanie = nowy obiekt(); nowe_zadanie.data = validField($("#nowa_data").val(), " data" ); nowe_zadanie.time = validField($("#nowy_czas").val(), "czas"); nowe_zadanie.zadanie = $("#nowe_zadanie").val(); nowe_zadanie.data || !nowe_zadanie .task)( return false; ) zadania = nowe_zadanie; przechowywanie.set(( zadania:zadania));

Funkcja walidacyjna sprawdza, czy data jest zapisana w formacie d.m.rrrr, a godzina w formacie gg:mm, a także czy opis zdarzenia zawiera co najmniej trzy znaki.

popup.js

Var validField = funkcja(wartość, typ)( if(typ == "data")( var data = val.split("."); var rok = nowa data(); rok = rok.getFullYear(); if( date.length == 3 && parseInt(data) == data && data = 3)( return val; ) return null )

Załatwiliśmy dodatek, przejdźmy do odbierania wydarzeń na dzisiaj. Aby to zrobić, musimy pobrać wszystkie zdarzenia z bazy danych, wybrać ze wszystkich tylko dzisiejsze wydarzenia i posortować je rosnąco według czasu.

popup.js

$(funkcja())( … var now_hours = dzisiaj.getHours()< 10 ? "0" + today.getHours() : today.getHours(); var now_minutes = today.getMinutes() < 10 ? "0" + today.getMinutes() : today.getMinutes(); var now_time = now_hours + "" + now_minutes; storage.get("tasks",function(items){ if(items.tasks){ tasks = items.tasks; var today_tasks = getTodayTasks(tasks); if(today_tasks.length >0)( for(var i in Today_tasks)( var this_time = dzisiaj_zadania[i].time.replace(":", ""); var add = this_time > now_time ? "" : " class="gotowe""; var add_html = ""+dzisiejsze_zadania[i].time+" "+dzisiejsze_zadania[i].zadanie+""; $("ul").append(add_html); ) ) ) ); … ));

Funkcja getTodayTasks() zwraca z ogólnej listy tylko zdarzenia z dzisiejszą datą.

popup.js

Var getTodayTasks = funkcja(zadania)( var dzisiaj_zadania = nowa tablica(); var dzisiaj = nowa data(); var dzisiaj_data = dzisiaj.getDate()+"."+(dzisiaj.getMonth() + 1)+ "." + dzisiaj.getFullYear(); for(var i w zadaniach)( if(tasks[i].date == dzisiejsza data)( dzisiejsze_zadania = zadania[i]; ) ) if(dzisiejsze_zadania.długość > 0)( dzisiejsze_zadania = sortZadania( dzisiejsze_zadania); zwróć dzisiejsze_zadania)

Funkcja sortTasks() sortuje zdarzenia w porządku rosnącym według czasu.

popup.js

Var sortTasks = funkcja(zadania)( if(zadania.długość > 0)( var swapped = true; while (swapped) ( swapped = false; for (var i=0; i< tasks.length-1; i++) { var this_time = tasks[i].time.replace(":", ""); var next_time = tasks.time.replace(":", ""); if (this_time >next_time) ( var temp = zadania[i]; zadania[i] = zadania; zadania = temp; zamienione = prawda; ) ) ) zwróć zadania; )

Czas skonfigurować wyświetlanie powiadomień na ekranie. Dodajmy specjalny checkbox do wyskakującego okna. Jeśli to pole wyboru jest zaznaczone, powiadomienia będą wyświetlane; jeśli nie jest zaznaczone, nie będą one wyświetlane. Dodamy także możliwość wprowadzania tekstu. Liczba w tym wejściu pokaże, na ile czasu przed wydarzeniem zostanie wyświetlone powiadomienie. Oznacza to, że jeśli mamy wydarzenie zaplanowane na 19:00, ten tekst będzie zawierał 5, co oznacza, że ​​powiadomienie pojawi się o 18:55. Dodajmy kod z tymi danymi wejściowymi do popup.html

popup.html

Pokaż powiadomienia

Teraz zastanówmy się, jak to będzie działać. Po kliknięciu pola wyboru jego zaznaczony atrybut zostanie sprawdzony, a wartość atrybutu zostanie zapisana w pliku cookie „show_notifications”. Przejdźmy do wprowadzania tekstu. Gdy zmieni się jego wartość, nowa wartość zostanie zweryfikowana, jeśli jest liczbą całkowitą i nie większą niż 120, nową wartość zapisujemy w pliku cookie „when_to_notify”.

Aby jednak to zadziałało, musimy otworzyć dostęp do plików cookie. Aby to zrobić, przejdź do manifest.json i dodaj go do „uprawnień”

manifest.json

( ... "uprawnienia": [ ... „pliki cookie” ] ... )

Teraz możesz uruchomić skrypt. Przejdźmy do popup.js. Na początek ustawmy wartości początkowe na wejściach. Domyślnie checkbox nie jest zaznaczony, czyli powiadomienia nie są pokazywane, a czas wynosi 0. Kliknięcie checkboxa powoduje zmianę wartości pliku cookie „show_notifications”. Zmiana wartości w polu tekstowym powoduje zmianę wartości pliku cookie „when_to_notify”.

popup.js

$(funkcja())( setCheckbox(); setWhenToNotify(getCookie("when_to_notify")); ... $("#show_notifications").click(function())( setCookie("show_notifications", document.getElementById(" show_notifications" ).checked); $("#when_to_notify").change(function())( setWhenToNotify($(this).val()); ));

Przyjrzyjmy się bliżej funkcjom. Zacznijmy od funkcji pracy z plikami cookies. W w tym przypadku gotowe funkcje zostały zaczerpnięte ze strony w3schools.com.

popup.js

Var setCookie = funkcja(nazwa_c,wartość,exdays)( /* *Wzięto z http://www.w3schools.com/js/js_cookies.asp */ var exdate=new Date(); exdate.setDate(exdate.getDate( ) + exdays var c_value=escape(wartość) + ((exdays==null) ? "" : "; wygasa="+exdate.toUTCString()); document.cookie=c_name + "=" + c_value; getCookie = funkcja(nazwa_c)(Zadzwoń do Vasyi P. /* *Wzięto z http://www.w3schools.com/js/js_cookies.asp */ var i,x,y,ARRcookies=document.cookie.split(" ; "); dla (i=0;i

Aby było jaśniej, umieściłem opis kodu w samym kodzie HTML. Ja organizuję menu w prosty sposób: umieszczam na obrazku link do wewnętrznego rozszerzenia.

Ponieważ zacząłem zajmować się popup.html, od razu opowiem Ci o popup.js

Wydaje mi się to całkiem proste:

popup.js
var xhr = nowy XMLHttpRequest(); xhr.open("GET", "http://losttime.su/?tmpl=login&token="+localStorage["lostlogin"], true); // tutaj jest żądanie GET do określonej strony xhr.onreadystatechange = funkcja() ( if (xhr.readyState == 4) // jeśli wszystko poszło dobrze, wykonaj to, co jest w nawiasach ( var dannie = document.getElementById(" dannie") ; dannie.innerHTML = xhr.responseText; // dodaj otrzymany kod do bloku z id=dannie ) ) xhr.send();

Zamieściłem także opis kodu.

Jest to projekt opisany powyżej, który pozwala na wyciąganie i wyświetlanie treści z Twojej witryny, a może i nie. Ale co warto wiedzieć:
- W pliku manifestu pamiętaj o wpisaniu w polu uprawnień adresu strony, z której będą pobierane informacje.
- Plik popup.js jest powiązany ze skryptem tła dane wprowadzone do pamięci lokalnej w tle.js są również widoczne w popup.js.

Zanim przyjrzymy się plikowi skryptu tła tło.js, przyjrzyjmy się plikowi skryptu, który działa na każdej stronie osobno: content.js

Dla mnie wygląda to tak:

treść.js
funkcja onBlur() ( // okno traci fokus chrome.runtime.sendMessage((site:sait,time:localStorage)); // wysyła wiadomość do tła.js localStorage = "0"; ) window.onblur = onBlur; // jeśli okno utraci fokus, funkcja sec() // wykonywana co sekundę ( if(document.webkitVisibilityState == "visible") // jeśli strona jest aktywna ( localStorage = parseInt(localStorage,10) +1; // aktualizacja dane witryny w pamięci lokalnej) ) var sait=lokalizacja.nazwa hosta; // na której stronie znajduje się skrypt localStorage = "0";

setInterval(sec, 1000); // uruchamia funkcję co sekundę
Myślę, że najciekawszym punktem mojego scenariusza powinno być:
chrome.runtime.sendMessage((site:sait,time:localStorage));
Tutaj do skryptu działającego w tle wysyłany jest komunikat, a mianowicie dwie zmienne: site:sait - zawiera adres strony, na której skrypt

time:localStorage — ilość czasu spędzonego nad tym skryptem.
tło.js

Tutaj rzeczywiście jest. Nie będę się wdawać w szczegóły, bo... w zasadzie nie jest to konieczne. Wystarczy znać jasny przykład, aby wdrożyć swoje plany. Jeśli dodasz jakieś dane do magazynu lokalnego w skrypcie tła.js (a także pliki cookie, web sql), to te same dane będą mogły zostać wykorzystane w skrypcie popup.js.

To w zasadzie wszystko, co chciałem Wam powiedzieć na temat tworzenia rozszerzenia, ale poruszę jeszcze jeden punkt, z którym miałem trudności.

Na stronie ustawień musiałem zorganizować przeciąganie i upuszczanie witryn w różnych kolumnach.

Ponieważ Jeśli dane zostaną wstawione za pomocą InnerHtml, ta opcja nie będzie się tak wyświetlać. Oto co musieliśmy zorganizować:

$("#dannie").on("mouseover", ".sait", funkcja() ( $(this).css(("border":"3px solid #ffffff")); )); $("#dannie").on("mouseout", ".sait", funkcja() ( $(this).css(("border":"jednolita czerń 3px")); )); $("#dannie").on("mousedown", ".sait", funkcja() ( $(this).css(("border":"jednolita czerń 3px")); )); $("#dannie").on("mouseover", ".sait", funkcja() ( $(.sait").draggable(( pomocnik:"klon" )); ));
zamiast zwykle:
$(.sait").mouseover(function())( $("#"+this.id).css(("border":"3px solid #ffffff")); )); $(.sait").mouseout(function())( $("#"+this.id).css(("border":"jednolity czarny o 3px")); )); $(.sait").mousedown(function())( $("#"+this.id).css(("border":"0px jednolity czarny")); ));