- Instruktaż
Habré ma już kilka artykułów na temat tworzenia rozszerzeń dla chrome, podzielę się swoim doświadczeniem, poruszając główne rzeczy i miejsca, w których napotkałem trudności.
Co jest potrzebne do stworzenia rozszerzenia w pigułce:
1) Podstawowa znajomość Javascript
2) Podstawowa znajomość HTML
3) 5$
Pokażę ci, jak stworzyć rozszerzenie dla chrome na moim własnym przykładzie, stworzonym do liczenia "straconego czasu" w Internecie. Oznacza to, że to rozszerzenie zlicza czas spędzony w witrynach z możliwością określenia odwiedzanych witryn według kategorii: czas użyteczny lub stracony czas.
Tak więc zaczynam tworzenie rozszerzenia, tworząc folder dla samego rozszerzenia, w którym będziemy umieszczać wszystkie utworzone przez nas pliki. Nazwę to „straconym czasem”. Następnie tworzę plik manifest.json, wygląda on tak:
manifest.json
("manifest_version": 2, "name": "Lost Time", "version": "1.0", "icons": ("128": ""), "content_scripts": [("trafi": ["* : // * / * "]," js ": [" content.js "])]," background ": (" scripts ": [" background.js "])," uprawnienia ": [" http: / /losttime.su/* "]," browser_action ": (" default_title ":" LostTime "," default_icon ":" "," default_popup ":" popup.html "))
Niektóre linie powinny być intuicyjne, ale musisz wiedzieć:
- Wartość manifest_version musi wynosić „2”;
- W content_scripts piszemy, który skrypt zostanie uruchomiony na wszystkich stronach oddzielnie;
- W tle napisz ogólny skrypt (skrypt działający w tle), który jest uruchamiany podczas uruchamiania przeglądarki;
- W uprawnieniach podajemy adres strony, z której będą pobierane informacje.
Wszystko, czego użyję, nie jest dla Ciebie konieczne, jeśli logicznie po prostu tego nie potrzebujesz. ...
Samo okno, które można zobaczyć po kliknięciu ikony rozszerzenia, to strona: popup.html.
To wygląda tak:
popup.html
Aby było jaśniej, umieściłem opis kodu w samym HTML. Organizuję menu w prosty sposób: umieściłem wewnętrzny link do rozszerzenia na zdjęciu.
Odkąd zacząłem pisać o popup.html, od razu opowiem o popup.js.
Dla mnie wygląda to bardzo prosto:
popup.js
var xhr \u003d new XMLHttpRequest (); xhr.open ("GET", "http://losttime.su/?tmpl\u003dlogin&token\u003d"+localStorage [" lostlogin "], prawda); // na podaną stronę jest żądanie GET xhr.onreadystatechange \u003d function () (if (xhr.readyState \u003d\u003d 4) // jeśli wszystko poszło dobrze, zrób to, co jest w nawiasach (var dannie \u003d document.getElementById ("dannie "); dannie.innerHTML \u003d xhr.responseText; // dodaj otrzymany kod do bloku z id \u003d dannie)) xhr.send ();
Wstawiłem też opis kodu.
Jest to konstrukcja opisana powyżej, która umożliwia pobieranie i wyświetlanie treści z Twojej witryny, a może nie z Twojej witryny. Ale co jest ważne, aby wiedzieć:
- W pliku manifestu pamiętaj o wpisaniu adresu witryny, z której będą pobierane informacje w polu uprawnień.
- Plik popup.js jest powiązany ze skryptem background.js, ponieważ dane przechowywane w pamięci lokalnej w background.js są również widoczne w pliku popup.js.
Zanim przyjrzymy się plikowi skryptowemu background.js, przyjrzyjmy się plikowi skryptu, który działa na każdej stronie osobno: content.js
Dla mnie wygląda to tak:
content.js
function onBlur () (// okno traci fokus chrome.runtime.sendMessage ((site: sait, time: localStorage)); // wyślij wiadomość do background.js localStorage \u003d "0";) window.onblur \u003d onBlur; // jeśli okno traci fokus, funkcja sec () // uruchamia się co sekundę (if (document.webkitVisibilityState \u003d\u003d "visible") // jeśli strona jest aktywna (localStorage \u003d parseInt (localStorage, 10) +1; // update dane strony w pamięci lokalnej)) var sait \u003d location.hostname; // jaką stroną jest skrypt na localStorage \u003d "0"; setInterval (sec, 1000); // uruchamiaj funkcję co sekundę
Uważam, że najciekawszym punktem mojego scenariusza powinno być:
chrome.runtime.sendMessage ((strona: sait, time: localStorage));
W tym miejscu wysyłana jest wiadomość do skryptu działającego w tle, czyli dwie zmienne: site: sait - zawiera adres strony, na której skrypt
time: localStorage - Ilość czasu spędzonego w tym skrypcie.
background.js
chrome.runtime.onMessage.addListener (function (request, sender, sendResponse) (var a \u003d request.site; // dane o witrynie var b \u003d request.time; // dane o spędzonym czasie // tutaj robimy z te dane, co chcesz.));
W rzeczywistości jest tutaj. Nie będę niczego szczegółowo analizować, tk. w zasadzie nie jest to konieczne. Aby zrealizować plan, wystarczy znać ilustracyjny przykład. Jeśli dodasz jakiekolwiek dane do pamięci lokalnej w skrypcie background.js (a także pliki cookie, plik SQL sieci Web), te same dane mogą zostać użyte w skrypcie popup.js.
Właściwie to wszystko, co chciałem ci powiedzieć o tworzeniu rozszerzenia, ale poruszymy jeszcze jeden punkt, w którym miałem trudności.
Na stronie ustawień musiałem uporządkować przeciąganie i upuszczanie witryn w różnych kolumnach.
Dlatego Ponieważ dane są wstawiane przez InnerHtml, ta funkcja nie będzie wyglądać tak po prostu. Oto, co musiałem zorganizować:
$ ("# dannie"). on ("mouseover", ".sait", function () ($ (this) .css (("border": "3px solid #ffffff"));)); $ ("# dannie"). on ("mouseout", ".sait", function () ($ (this) .css (("border": "3px solid black"));)); $ ("# dannie"). on ("mousedown", ".sait", function () ($ (this) .css (("border": "3px solid black"));)); $ ("# dannie"). on ("mouseover", ".sait", function () ($ (". sait"). draggable ((helper: "clone"));));
zamiast zwykłego:
$ (". sait"). mouseover (function () ($ ("#" + this.id) .css (("border": "3px solid #ffffff"));)); $ (". sait"). mouseout (function () ($ ("#" + this.id) .css (("border": "3px solid black"));)); $ (". sait"). mousedown (function () ($ ("#" + this.id) .css (("border": "0px solid black"));)); $ (". sait"). draggable ((helper: "clone",));
W Internecie jest wiele witryn, które umożliwiają przewijanie strony w górę bez użycia myszy lub paska przewijania. Ale jednocześnie nadal istnieją witryny, w których nie ma takiej implementacji. „Dlaczego nie spróbować napisać skryptu, który dodaje ten przycisk do wszystkich witryn?” - pomyślałem i zacząłem wdrażać. Takie skrypty nazywane są skryptami użytkownika i mają rozszerzenie * .user.js. Możesz przeczytać na przykład o Habré. Niestety nie może obejść się bez „pułapek”. Istnieją pewne różnice w implementacji userjs dla różnych przeglądarek. Skupię się na opisaniu implementacji naszego skryptu userjs jako rozszerzenia przeglądarki Google Chrome.
manifest.json
Wymagany plik dla rozszerzenia Google Chrome to manifest.json który opisuje parametry, ścieżki do plików zewnętrznych (* .js, * .css itp.), obsługę wersji itp. do rozbudowy. Możesz przeczytać więcej o pliku. W naszym przypadku plik manifest.json wygląda następująco:
("manifest_version": 2, "content_scripts": [("exclude_globs" :, "include_globs": ["*"], "js": ["jquery.js", "backTopUserJS.user.js"], "css ": [" css / style.css "]," dopasowuje ": [" http: // * / * "," https: // * / * "]," run_at ":" koniec_dokumentu ")]," convert_from_user_script ": prawda," opis ":" Rozszerzenie skryptu użytkownika u góry strony dla Google Chrome "," nazwa ":" backTopUserJS "," wersja ":" 1 ")
Dla wygody korzystamy z biblioteki JQuery, którą umieszczamy obok pliku manifest.json i głównego pliku skryptu (w naszym przypadku jest to backTopUserJS.user.js). Jego zawartość jest następująca:
// \u003d\u003d UserScript \u003d\u003d // @name backTopUserJS // @author Aleksandr Filatov // @license MIT // @version 1.0 // \u003d\u003d / UserScript \u003d\u003d function main () (var disp \u003d $ (window) .scrollTop ()\u003e 400? "Block": "none"; var $ upButton \u003d $ ("
"); $ (dokument) .find (" body "). append ($ upButton); $ upButton.click (function () ($ (" html, body "). animate ((scrollTop: 0)," wolno " );)); $ (okno) .scroll (function () (if ($ (okno) .scrollTop ()\u003e 400) $ upButton.fadeIn ("wolno"); else $ upButton.fadeOut ("wolno"); ));); var script \u003d document.createElement ("script"); script.appendChild (document.createTextNode ("(" + main + ") ();")); (document.body || document.head | | document.documentElement) .appendChild (skrypt);
Myślę, że scenariusz jest na tyle jasny, że można go szczegółowo zbadać. Warto wyjaśnić tylko ostatnie 3 wiersze. W rzeczywistości jest to mały hack, który wstawia nasz skrypt do kodu strony witryny. Jeśli ktoś z Was znajdzie lepszy sposób, możecie napisać swoje poprawki w komentarzach :)
Instalowanie rozszerzenia w przeglądarce
W Google Chrome możesz instalować niestandardowe skrypty, tak jak inne przeglądarki, ale ponieważ Google dba o nasze bezpieczeństwo przy Tobie, muszą być opakowane w rozszerzenia przeglądarki. Przeanalizujmy krok po kroku instalację.
Utwórz folder dla naszego rozszerzenia, taki jak to C: \\ MyChromeExtensionUserJS
Dla każdego rozszerzenia tworzymy własny katalog, na przykład w naszym przypadku nazwijmy go C: \\ MyChromeExtensionUserJS \\ backTopUserJS. Dodaj pliki rozszerzeń do tego katalogu.
Przejdź do „Google Chrome - informacje” -\u003e zakładka „Rozszerzenia” lub wpisz chrome: // extensions / w pasku adresu
Sprawdzamy „Tryb programisty”
Wciśnij przycisk „Załaduj rozpakowane rozszerzenie” i wybierz katalog naszego rozszerzenia. Kliknij OK".
Rozszerzenie jest zainstalowane i gotowe do pracy. Aby zaktualizować rozszerzenia po wprowadzeniu zmian, po prostu kliknij przycisk „Aktualizuj rozszerzenie” lub, w trybie programisty, skrót klawiaturowy Ctrl + R.
Wynik
Możesz przeglądać źródła skryptów na github. Skrypt nie twierdzi, że jest idealny, ale służy tylko jako przykład i impuls do pisania własnych niestandardowych skryptów dla Google Chrome.
Czas zobaczyć, jak to się robi w Chrome.
Dlaczego SEO potrzebują jakichkolwiek wtyczek do Chrome, odpowiem na to pytanie na końcu artykułu
Ale najpierw powiem ci, jaka jest różnica podczas pisania HelloWorld dla Opery i Chrome
W Chrom w przypadku Hello World zajęło mi to 3 pliki
Dla Opera zajęło mi 5 plików:
Całkowita kwota kodu dla Chrom: ~ 1800 bajtów
Dla Opera: 2100 bajtów
W związku z tym, kiedy pisałem HelloWorld dla Chrome, byłem bardzo szczęśliwy, że było mniej do zrobienia. Jedyną wygodną rzeczą w operze jest to, że możesz po prostu przeciągnąć plik wtyczki do Opery i będzie tam działać natychmiast, aw Chrome musisz walczyć w trybie programisty, naciskając przycisk aktualizacji.
A więc napiszmy naszą pierwszą wtyczkę do Chrome:
1. utwórz plik manifest.json: (pobrany z pliku)
{
"Nazwa": "Mój zegar online",
„Wersja”: „1.0”,
"Opis": "mój zegar online",
„Browser_action”: (
"Default_icon": "favicon.ico",
„Popup”: „popup.html”
}
}
2. Zapiszmy dowolną ikonę aplikacji w tym samym folderze
3. I utwórz zawartość pliku popup.html:
tam włączamy tryb programisty: 
Pojawiają się przyciski:
Ładujemy rozpakowane rozszerzenie, tam musimy wskazać folder z naszym rozszerzeniem. i Voila!
Nasza wtyczka znajduje się na pasku narzędzi. Kliknij na nią i działa!
Teraz, po wyedytowaniu kodu źródłowego, wprowadź zmiany do wtyczki i kliknij przycisk Odśwież w ustawieniach wtyczki: 
Wszystko. Następnie czytamy API, cieszymy się i piszemy własną wtyczkę dla Chrome. Szczerze mówiąc, bardzo podobało mi się pisanie wtyczek dla Chrome, bardzo fajne, szczególnie po Operze i na pewno po FireFoxie i naprawdę przestałem po IE.
Jeśli jeszcze nie wiesz, po co pisać wtyczki do Chrome'a, to powiem Ci, jeśli masz jakąś małą lub już dużą usługę - napisz dla niej przydatną rzecz w postaci wtyczki, launchera, pullera zdarzeń, itp. a ruch z samego Google trafi do Ciebie. Spryskują cię plecy. Wypróbuj, a potem powiedz innym, a najlepiej na tej stronie, podaj link o swoim doświadczeniu w pisaniu wtyczek i efekcie napływu użytkowników do serwisu. Wraz z napływem odwiedzających Puzomerki będą rosły w Twojej witrynie, ale kto jeszcze może nie wiedzieć, dlaczego są potrzebne.
To jeden z najlepszych sposobów na rozwój strony internetowej.
Wszystkie elementy w Chrome Web Store są podzielone na aplikacje i rozszerzenia. Zrobimy jedno i drugie. Stworzona przez nas aplikacja pojawi się w postaci ikony w nowej zakładce przeglądarki i pozwoli na szybkie uruchomienie Twojej strony. Rozszerzenie to specjalny przycisk na pasku narzędzi, którego kliknięcie spowoduje wyświetlenie panelu z najnowszymi aktualizacjami witryny.
Składanie aplikacji dla Google Chrome
1. Pobierz archiwum z szablonem rozszerzenia z tego linku.
2. Rozpakuj go w dogodnym dla siebie miejscu. Wewnątrz jest teczka manifest.json i ikona icon.png.
3. Otwórz plik manifest.json w notatniku i edytuj jego zawartość. Nazwę swojej witryny należy wpisać w linii 2, w linii 3 - jej opis (do 132 znaków), w liniach 5 i 7 - adres strony. Zapisujemy wprowadzone zmiany.
4. Zmień ikonę z archiwum na swój obraz w formacie PNG o rozmiarze 128 * 128.
Tworzenie rozszerzenia dla Google Chrome
Chociaż rozszerzenie różni się funkcjonalnie od aplikacji, algorytm kompilacji nie jest dużo bardziej skomplikowany.
1. Pobierz szablon rozszerzenia dla tego linku.
2. Rozpakuj. Otwórz plik manifest.json w notatniku i wklej nazwę swojej witryny, jej krótki opis i tytuł okna rozszerzenia (linie 2, 3 i 8).
3. Otwórz plik labnol.js i wskaż adres strumienia RSS Twojej witryny.
4. Zastąp ikonę z archiwum swoim obrazem w formacie PNG o rozmiarze 128 * 128.
Publikacja
Z rozszerzenia i aplikacji można korzystać na dwa sposoby. Jeśli jesteś właścicielem witryny i chcesz przyciągnąć do niej dodatkowych użytkowników, możesz opublikować swoją pracę w Chrome Web Store. Aby to zrobić, pakujemy każde rozszerzenie i pliki dodatków do naszego archiwum, przechodzimy do strony Panelu Chrome i przesyłamy naszą pracę do sklepu Google. Tutaj zostaniesz poproszony o przesłanie zrzutu ekranu, podanie rozszerzonego opisu i kilku innych parametrów. Strona jest w języku rosyjskim, więc możesz ją łatwo rozgryźć. Pamiętaj, że aby opublikować rozszerzenie, musisz być zweryfikowanym właścicielem witryny, dla której zostało ono utworzone. Ponadto będzie wymagana opłata wpisowa w wysokości 5 USD za publikację.
Jeśli zebrałeś rozszerzenia tylko do użytku osobistego, na przykład w celu wygodnego śledzenia aktualizacji swojej ulubionej witryny, po prostu otwórz stronę rozszerzeń w przeglądarce i włącz Tryb programisty. Następnie naciśnij przycisk Załaduj rozpakowane rozszerzenie i określ ścieżkę do folderu z plikami.
Korzystając z proponowanej metody, każdy właściciel witryny lub bloga będzie mógł utworzyć i umieścić markowe rozszerzenie dla swojego zasobu w katalogu rozszerzeń przeglądarki Google Chrome. Dzięki temu odwiedzający będą na bieżąco z najnowszymi aktualizacjami, co przyciągnie dodatkowych odwiedzających do Twojej witryny i zwiększy jej popularność.
Pisanie prostego rozszerzenia przeglądarki Chrome
Z archiwów developerWorks
Duane O "Brian
Data archiwizacji: 25.02.2019 | Pierwsza publikacja: 13.03.2013
Każda przeglądarka ma swoich zwolenników i przeciwników - oraz swoje zalety i wady. Łączy ich to, że ludzie spędzają coraz więcej czasu w przeglądarkach. Z tej serii artykułów dowiesz się, jak napisać własne rozszerzenie dla przeglądarki Chrome, Firefox, Internet Explorer i Safari. Czytelnik jest proszony o zbudowanie tego samego prostego rozszerzenia dla każdej przeglądarki, aby mógł poczuć, na co to się przekłada, jak trudne lub łatwe jest rozwiązanie pewnych typowych zadań i co jest potrzebne do dystrybucji jego rozszerzenia. Ten artykuł dotyczy rozszerzenia przeglądarki Chrome.
Ta zawartość nie jest już aktualizowana ani obsługiwana. Cały artykuł jest dostarczany „tak jak jest” w formacie PDF. Ze względu na szybki rozwój technologii niektóre kroki i ilustracje mogą ulec zmianie.
