Aké rozšírenia prehliadača sú napísané. Píšeme rozšírenie pre prehliadač Google Chrome. Prispejme k rozvoju webu

Všetky položky v Internetovom obchode Chrome sú rozdelené na aplikácie a rozšírenia. Urobíme oboje. Aplikácia, ktorú sme vytvorili, sa zobrazí ako ikona na novej karte prehliadača a umožní vám rýchlo spustiť vašu stránku. Rozšírenie je špeciálne tlačidlo na paneli nástrojov, kliknutím na ktoré sa zobrazí panel s najnovšími aktualizáciami stránok.

Vytváranie aplikácie pre Google Chrome

1. Stiahnite si archív so šablónou rozšírenia z tohto odkazu.

2. Rozbaľte zips na akékoľvek miesto, ktoré vám vyhovuje. Vo vnútri je súbor manifest.json a ikona ikona.png.

3. Otvorte súbor manifest.json v poznámkovom bloku a upravte jeho obsah. Do riadku 2 musíte zadať názov svojej stránky, do riadku 3 - jej popis (až 132 znakov), do riadku 5 a 7 - adresu stránky. Vykonané zmeny uložíme.

4. Ikonu z archívu zmeníme na náš obrázok vo formáte PNG o veľkosti 128 * 128.

Vytváranie rozšírenia pre Google Chrome

Aj keď je rozšírenie funkčne veľmi odlišné od aplikácie, algoritmus na jeho zostavenie nie je oveľa komplikovanejší.

1. Príponu získame z tohto odkazu.

2. Rozopnite zips. Otvorte súbor manifest.json v poznámkovom bloku a prilepte názov svojho webu, jeho Stručný opis a názov okna rozšírenia (riadky 2, 3 a 8).

3. Otvorte súbor labnol.js a zadajte adresu informačného kanála RSS vašej stránky.

4. Ikonu z archívu nahradíme naším obrázkom vo formáte PNG vo veľkosti 128 * 128.

Publikácia

Rozšírenie a aplikácia, ktorú sme vytvorili, sa dajú použiť dvoma spôsobmi. Ak vlastníte stránky a chcete na svoje stránky získať viac používateľov, môžete svoju prácu odoslať do Internetového obchodu Chrome. Za týmto účelom zabalíme súbory rozšírení a doplnky do vlastného archívu, prejdeme na stránku Chrome Dashboard a nahráme našu prácu do obchodu Google. Tu budete požiadaní, aby ste nahrali snímku obrazovky, poskytli rozšírený popis a poskytli niektoré ďalšie možnosti. Stránka je v ruštine, takže to ľahko zistíte. Upozorňujeme, že ak chcete zverejniť rozšírenie, musíte byť overeným vlastníkom lokality, pre ktorú ste rozšírenie vytvorili. Okrem toho budete musieť zaplatiť vstupný poplatok vo výške 5 USD za publikáciu.

Ak ste zhromaždili rozšírenia iba na osobné použitie, napríklad na pohodlné sledovanie aktualizácií svojej obľúbenej stránky, jednoducho otvorte stránku s rozšíreniami vo svojom prehliadači a povoľte režim vývojára. Potom stlačte tlačidlo Načítať rozbalené rozšírenie a zadajte cestu k priečinku so súbormi.

Pomocou navrhovanej metódy bude môcť každý vlastník stránok alebo blogu vytvoriť a umiestniť značkové rozšírenie pre svoj zdroj do adresára rozšírení prehliadača Google Chrome. Návštevníkom to pomôže byť vždy aktuálny najnovšie aktualizácie, čo na vašu stránku privedie ďalších návštevníkov a zvýši jej obľúbenosť.

Najsmerodajnejší ľudia v tejto oblasti sú Wladimir Palant (napísal AdBlock Plus), ... Rozšírenia pre Chrome sa píšu ľahšie ako pre Firefox. Je zaujímavé, že najpopulárnejším rozšírením pre Chrome je "Tyuryaga VKontakte" (podľa štatistík Yandex).

Úlohou je vyvinúť rozšírenie, ktoré bude reagovať na otvorenie určitých HTML stránok v prehliadači. Napríklad na úpravu HTML kódu stránky lokality pre pohodlnejšie používanie tejto lokality.
Riešenie testované na Google Chrome 24.xa Chromium 6.x (Debian 6.0.6, amd64).

Riešenie problému

Zhrnutie hlavných problémov, ktoré sa vyskytnú v priebehu písania rozšírenia crx.

Ako získať rozšírenie?
Ako nastaviť časovač?

Ako získať rozšírenie?

Pre minimálnu príponu stačia 4 súbory:

128.png background.js content.js manifest.json

Kde manifest.json:

( "manifest_version": 2, "name": "DomainCheck extension", "version": "0.1", "background": ( "scripts": ["background.js"] ), "content_scripts": [ ( "zhody ": [ "*://*/*" ], "js": [ "obsah..png" ) // žiadne web_accessible_resources )

Súbor background.js obsahuje kód, ktorý sa spustí pri spustení prehliadača. V tomto skripte môžete „zavesiť“ obsluhu načítania obsahu dokumentu (document.location.href).

Chrome generuje stránku _generated_background_page.html sám:

Na interakciu medzi background.js a skriptom obsahu možno použiť správy (požiadavka/správa) a chrome.extension.getBackgroundPage(). Pozrite si tiež prehľad architektúry rozšírení prehliadača Chrome. Hovorí sa, že „obsahový skript je nejaký JavaScript, ktorý sa spúšťa v kontexte stránky, ktorá sa načítala do prehliadača“.

Poznámka: Je ťažké ladiť stránku na pozadí (background.js) v prehliadači Chromium, pretože neexistuje žiadna resp. na stránke Rozšírenia v režime vývojára.

Ako skontrolovať aktuálnu URL, orezať ju a vypočítať hash?

Ako nastaviť handler na DOMContentLoaded je popísané na developer.chrome.com. Pozrite si aj dokumentáciu k stránkam na pozadí (background.js).

Na vloženie HTML kódu do stránky môžete využiť rady z článku o Habrém (pozri tam zmienku o globálnej premennej dokumentu), ale musíme si porovnať aj aktuálnu URL so zoznamom.

Je document.location.href zastaraný?

Príklad zo stackoverflow.com na získanie plne kvalifikovaného názvu domény:

var url = "http://www.domain.ru/tmp/file.txt?abc=1&cde=2#123" var getLocation = function(href) ( var l = document.createElement("a"); l. href = href; return l; ); varl = getLocation(url); alert(l.hostname)

Subdoménu 2. úrovne si môžete vybrať takto:

varl = getLocation(url); var d = l.názov hostiteľa; function cutd(str) ( var re = /.*?\.([\w\d-\u0100-\uffff-\.]+\.[\w\d-\u0100-\uffff-\.]+ )/; return str.replace(re,"$1"); ) alert(cutd(d));

(pozri nápovedu na stackoverflow.com).

injekcia sha1.js...

Ako nastaviť časovač?

Pozrite si vzorové rozšírenia: príklad stránky udalosti, background.js:

chrome.alarms.create((delayInMinutes: 0,1)); chrome.alarms.onAlarm.addListener(function() ( alert("Čas vypršal!"); ));

Táto chyba v prehliadači Chromium bola ukončená 9. januára 2013, ale zatiaľ sa neobjavila v nových zostavách pre Windows.

Ak sa predsa len rozhodnete používať „moderné“ budíky, ako správne nastaviť časovač budíka s ľubovoľným trvaním / periódou je popísané na stackoverflow.com.

Pre kompatibilitu so staršími prehliadačmi je lepšie použiť window.setInterval() v background.js:

var i = 0; window.setInterval(function() ( alert(i); i++ ), 2*1000); // v milisekundách

Funkcia setTimeout() je jeden „budík“.

Zakázať-Povoliť rozšírenia prehliadača Chrome spúšťajú background.js novým spôsobom. *) musíte to isté zaškrtnúť aj pri opustení režimu? a spať.

Ako stiahnuť config.xml/time.txt a ako ich analyzovať?

Ak sťahujete jednoducho cez XMLHttpRequest, môže sa zobraziť nasledujúca správa: „XMLHttpRequest nemôže načítať http://website/config.xml. Pôvodný web http://www.google.ru nie je povolený Access-Control-Allow-Origin. ". To znamená, že pri zadávaní požiadavky medzi doménami ste nepovolili možnosť CORS, .htaccess:

Sada hlavičiek Access-Control-Allow-Origin "*"

Môžete povoliť žiadosti z viacerých domén Rozšírenie pre Chrome a prostredníctvom povolení v manifest.json:

( "manifest_version": 2, ... "permissions": [ "http://site/" ],

Oba tieto prípady však nefungujú pre rozbalené rozšírenia. Chromium. V prípade zbalených rozšírení sa v prehliadači Chromium vo verziách 6.0 – 7.0 niekedy uvádza „Bad magic number“ (v čistom prehliadači Chrome sa táto chyba nepozoruje).
Poznámka: Zabezpečenie CORS je možné v prehliadači Chromium obísť pomocou možnosti --disable-web-security:

$ chromium-browser --disable-web-security http://domain/path

Doplnenie: V prípade prehliadača Chromium je potrebné upraviť riadky v súbore manifest.json takto (výslovne špecifikovať doménu a pridať do cesty hviezdičku):

( "povolenia": [ "http://site/*" ],

Aby webový inšpektor (?) v prehliadači Chrome neprisahal, keď je internet zakázaný pomocou XMLHttpRequest(), môžete to urobiť takto:

varreq = null; try ( req = new XMLHttpRequest(); ) catch(err) () // pozrite si radu na stackoverflow.com

(toto je napísané na radu stackoverflow.com). ...

Na ladenie analýzy môžete použiť console.log("string"). Reťazce umožňujú návrat vozíka s "\n".

Analýza XML na JavaScript v rozšírení Chrome sa vykonáva takto:

varxml = req.responseXML.documentElement; var ts = xml.getElementsByTagName("timeout"); vartimeout = ts.textContent; if (ts) (console.log("timeout="+timeout);) var ds = xml.getElementsByTagName("doména"); if (ds) (pre (var i = 0; i< ds.length; i++) { console.log("domain: "+ds[i].textContent); } }

Ako používať globálne atómové premenné a tabuľkové údaje v rozšírení Chrome?

Ak chcete synchronizovať údaje rozšírenia pomocou rozhrania Storage API, potrebujete Verzie Chrome>= 20. V manifeste (manifest.json) musíte napísať nasledovné:

"premissions": ["storage"]

Ako píše google skupina „Chromium HTML5“: „Obrátil som svoju pozornosť na Web SQL Database, ale zdá sa, že Web SQL už nie je v „aktívnej údržbe“, čo ma vedie k presvedčeniu, že bude vynechaný zo špecifikácie HTML“. Pozri W3C Web SQL Database, pozn. Môžete skúsiť použiť Základné koncepty – na rozšírenie priestoru pre databázu môžete použiť oprávnenia: neobmedzené úložisko v manifest.json. Na používanie „Neobmedzeného úložiska“ sú k dispozícii nasledujúce Offline API: 1) App Cache; 2) Systém súborov; 3) IndexedDB; 4) WebSQL (zastarané). Príklad použitia IndexedDB v prehliadači Chrome nájdete na stránke . Príklad práce s IndexedDB nájdete na stránke gist.github.com:

window.indexedDB = window.indexedDB || window.webkitIndexedDB; var req = indexedDB.open("moja db") req.onerror = function() ( console.log("error"); )

Umiestnenie súborov IndexedDB,
Windows: C:\Users\\AppData\Local\Google\Chrome\User Data\Default\IndexedDB,
Linux: /home//.config/google-chrome/Default/IndexedDB/chrome-xxx.indexeddb.leveldb/:

$ sudo ls -la /home/anonymous/.config/google-chrome/Default/IndexedDB/chrome-extension_ojeihbjghbabiocoglbfhdebhhckdnol_0.indexeddb.leveldb/ celkovo 24 drwx------ 2 anonym 4096: 08.02.07 drwx------ 3 anonymný anonym 4096 7. február 03:08 .. -rw-r--r-- 1 anonym anonym 285 7. február 03:08 000003.log -rw-r--r-- 1 anonym anonym 16. február 7 03:08 AKTUÁLNY -rw------- 1 anonym anonym 0 7. február 03:08 LOCK -rw-r--r-- 1 anonym anonym 46. február 03:08 LOG -rw-r --r-- 1 anonym anonym 32. február 7 03:08 MANIFEST-000002

Príklady používania IndexedDB si môžete pozrieť na Mozilla Developer Network.

Vložiť Vysoké číslo záznamy v IndexedDB sú kontrolované na stackoverflow.com.

Ak chcete pridať položky do IndexedDB, použite

indexedDB.db.transaction().objectStore().put(())

V priečinku databázy IndexedDB sú staré databázy uložené ako súbory .sst a nové (aktuálne) databázy sú uložené ako súbory .log.

setVersion() je zastarané. Ale je tu jeden trik [o onupgradeneeded()]: ...

Ako hovorí blog Parashurama Narasimhana: „Pre Chrome: V prípade chrome sa funkcia onupgradeneeded nezavolá. Zavolá sa funkcia onsuccess databázy. Tu sa kontroluje existencia metódy setVersion. Ak metóda existuje a špecifikovaná verzia je väčšia ako verzia databázy, zavolá sa metóda setVersion. Úspech volania požiadavky setVersion vyvolá používateľovu metódu onupgradeneeded s transakciou verzie. Akonáhle je metóda dokončená, versionTrasnaction sa potvrdí zatvorením databázy. Databáza sa znova otvorí s najnovšou verziou a tá sa odovzdá používateľovi zadefinovanému v prípade úspechu." (aby som zavolal onupgradeneeded(), urobím db.setVersion("3")).

Ako načítať údaje v content.js:

dbreq.onupgradeneeded = function(event) ( console.log("dbreq.onupgradeneeded"); var db = event.target.result; var tx = db.transaction(["test_db"], "len na čítanie"); var store = tx.objectStore("todo");

Na otvorenie databázy použite kód z axemclion+jepp (funkcia openReqShim).

Keď otvoríme indexovanú databázu, ktorá neexistuje, vytvorí sa s číslom verzie, verzia = 0. Toto zavolá postupne onupgradeneeded() a onsuccess(). Pri prvom volaní onupgradeneeded() je verzia už = 1. Keď otvoríme [existujúcu databázu] druhýkrát, onupgradeneeded() sa už nevolá a číslo verzie = 1. (?nezvyšuje sa) Iba dbreq. volá sa onsuccess().

Ešte moment. Hovorí: „V prehliadači Chrome pred 23. rokom musíte takúto transakciu vytvoriť manuálne volaním setVersion() – API, ktoré bolo zo špecifikácie odstránené. Staršiu špecifikáciu nájdete na: http://www.w3.org/ TR/2011/WD-IndexedDB-20110419/“, teda aby ste sa vyhli chybe „NotFoundError: DOM IDBDatabase Exception 8“ v protokoloch prehliadača Chrome, musíte zavolať setVersion().

V prehliadači Chromium 6.0.472.63 (59945) implementácia IndexedDB nie je stabilná, takže je zakázaná a nefunguje =)

Vo všeobecnosti musíte použiť background.js + iframe + exchange so skriptami obsahu cez správy

Ako zvládnuť udalosť otvorenia stránky?

"content_scripts": [ ( "zhody": [ "*://*/*" ], "js": [ "content.js" ], "run_at": "document_start" ) ], ...

content.js:

document.addEventListener("DOMContentLoaded", funkcia () ( alert("Abc "+document.location.href); ));

Ako naformátovať HTML kód stránky?

Pozrite si písanie rozšírení Firefoxu.

Ako zabaliť rozšírenie a kam ho umiestniť?

Ak chcete pridať rozšírenie do Internetového obchodu Chrome, musíte spoločnosti Google zaplatiť vstupný poplatok 5 USD (potom môžete pridať ľubovoľný počet rozšírení). Môžete platiť cez VISA, MasterCard, AMEX alebo DISCOVER (navyše pri platbe musíte uviesť celú mailová adresa a meno a priezvisko).

Ak chcete hostiť rozšírenie, potrebujete účet Google atď. Budete potrebovať snímku obrazovky a reklamný obrázok. Kód rozšírenia budete musieť aktualizovať manuálne prostredníctvom rovnakého Internetového obchodu Chrome (ako tomu rozumiem, neexistuje automatická aktualizácia podľa adresy URL, ako vo Firefoxe). V súbore manifest.json je potrebné aktualizovať verziu rozšírenia. Niekoľko minút po pridaní bude rozšírenie dostupné vo vyhľadávaní rozšírení pre Chrome.

Balenie rozšírenia pre Linux:

#!/bin/bash 7z a -tzip ../domainck-chromium.zip ./* mv ../domainck-chromium.zip ../domainck-chromium.crx

Kľúčové slová: Chromium vytvára pre okná ako, stránka na stiahnutie google chrome, Vzorové rozšírenia prehliadača Google Chrome.

iMacros je rozšírenie, ktoré pomáha pri testovaní webových stránok. Namiesto toho, aby vývojár sám robil rovnaké akcie na stránke, potrebuje iba napísať požadovanú postupnosť akcií v iMacro a spustiť rozšírenie, keď je to potrebné.

Rozšírenie je schopné pracovať so stránkami implementovanými pomocou technológií Java, Flash, Flex, Ajax a Silverlight.

2. Font Playground

Rozšírenie pre tých, ktorí sa radi „hrajú s fontmi“ – umožňuje experimentovať s celým radom fontov z knižnice Google Fonts bez toho, aby ste museli meniť kód stránky. Zmeniť môžete nielen samotné písmo, ale aj jeho veľkosť, štýl písania a pod.

3. Projekt Naptha

Rozšírenie pre Google Chrome, ktoré umožňuje vyberať a kopírovať text aj z obrázkov, bude podľa Cretive Bloq užitočné pre každého, kto sa niekedy pri svojej práci musel aspoň raz potýkať s vloženým textom.

4.Aké písmo

Rozšírenie, ktoré vám umožňuje okamžite určiť, ktoré písmo je použité na konkrétnej stránke, bez toho, aby ste museli vykonávať takmer akékoľvek ďalšie akcie – podržaním myši nad nápisom.

5. YPomalý

YSlow je nástroj, ktorý nielen skontroluje rýchlosť načítania konkrétnej webovej stránky, ale tiež povie vývojárovi, čo ju spomaľuje. Za týmto účelom rozšírenie kontroluje, či stránka spĺňa 23 z 34 pravidiel výkonu formulovaných tímom Yahoo.

6. Webový vývojár

Celá sada užitočných nástrojov na správu prvkov lokality – napríklad na analýzu webových zdrojov a rozložení, testovanie kódu a okamžitú zmenu nastavení a vzhľad stránky.

7. Kontrolný zoznam pre vývojárov webu

Rozšírenie pre automatická kontrolači stránka spĺňa základné princípy SEO, či je dostatočne produktívna a užívateľsky prívetivá. Výsledky kontroly sú prezentované vo forme akéhosi kontrolného zoznamu - môžete vidieť viac detailné informácie a odporúčania pre každú z nevybavených položiek, ako aj okamžité opravy chýb.

8. Automatické ukladanie nástrojov DevTools

Pustite dnu automatický režim uložte všetky zmeny vykonané v kóde stránky pomocou nástrojov Chrome DevTools. Ako poznamenáva autor materiálu, nástroj pomáha vývojárom ušetriť veľa času.

9. Instant Wireframe

Rozšírenie, s ktorým môžete ľubovoľnú stránku "premeniť" na štrukturálnu schému rozloženia materiálu - wireframe. Umožňuje vývojárom a webovým dizajnérom oboznámiť sa s rozložením ľubovoľnej stránky na webe bez toho, aby museli opustiť prehliadač.

10. Emulátor zvlnenia

Ripple Emulator je rozšírenie emulátora pre prehliadač Google Chrome, ktoré vám umožňuje testovať webové stránky na rôznych miestach mobilné platformy s rôznym rozlíšením obrazovky. Dá sa použiť v spojení s inými rozšíreniami na testovanie a ladenie zdrojov.

11. Pruh

Streak je rozšírenie, ktoré vám umožňuje otáčať sa Poštová schránka na Gmaile do CRM systému. Môžete sledovať stav transakcií a rokovaní, ktoré prebiehajú v e-mail s protistranami, použite Streak na spracovanie požiadaviek používateľov produktu a sledovanie opráv odoslaných chýb atď.

12. Vyhľadajte Stackoverflow

Rozšírenie pre rýchle vyhľadávanie na populárnom zdroji pre vývojárov Stack Overflow.

13. Príručka PHP Ninja

Umožňuje okamžitý prístup k dokumentácii PHP 5.5 z prehliadača.

14. Perfektný pixel

PerfectPixel je rozšírenie pre Google Chrome. Umožňuje vám „prekryť“ priesvitnú mriežku na webovej stránke a skontrolovať voči nej dané vzdialenosti. Môžete tiež prekryť iné obrázky – napríklad pôvodné rozloženie –, aby ste sa uistili, že výsledná stránka sa s ním presne zhoduje:

15. Code Cola

Nástroj na prezeranie zdrojového kódu stránok a úpravu CSS kódu.

Potiahnutím jazdca môžete zmeniť tiene, kruhy a podobne. Po vykonaní zmien môžete skopírovať výsledný kód a nahradiť ho v kóde lokality.

16 Chrom Sniffer

Rozšírenie prehliadača, ktoré určuje, ktoré knižnice JavaScript, rámec alebo CMS sa používajú na zdroji.

17. Prepínač User-Agent

User-Agent Switcher je rozšírenie, ktoré vám umožní „zamaskovať“ prehliadač Google Chrome pod internet Explorer, Opera alebo akýkoľvek iný prehliadač.

18.IE Tab

Vstavaný emulátor Internet Explorer pre Chrome.

19 Obr Opica

Jednoduchý a bezplatný online editor obrázkov. Umožňuje „zachytiť“ obrázky alebo urobiť snímky obrazovky prehliadača – a okamžite ich upraviť pomocou rozšírenia pre Chrome.

20 Chróm daltonizovať

Rozšírenie, ktoré pomáha prispôsobiť webové služby pre farboslepých používateľov – ukazuje vývojárovi, ako stránku vidia tí, ktorí trpia touto chorobou. Umožňuje webovým dizajnérom a vývojárom vytvárať dostupnejšie služby.

21. Pravítko strán

Jednoduchý nástroj, ktorý pomáha určiť výšku, šírku a polohu ľubovoľného prvku na stránke.

22. Skontrolujte Moje odkazy

Rozšírenie, ktoré kontroluje webovú stránku, či neobsahuje nefunkčné alebo nesprávne odkazy.

23. Flickr Tab

Rozšírenie, ktoré pomáha nielen vo vývoji, ale pri hľadaní inšpirácie a dobré fotky. Zobrazí jeden obrázok Flickr na novú kartu v prehliadači Google Chrome. Keď naň kliknete, používateľ prejde na stránku autora, kde sa môže zoznámiť s jeho ďalšími dielami.

24 Google Art Project

Rozšírenie prehliadača podobné predchádzajúcemu doplnku v tomto zozname – len namiesto fotiek z Flickru na novej karte používateľ vidí uznávané umelecké diela – napríklad obrazy od Van Gogha alebo Maneta.

25. Šetrič dát

Oficiálne rozšírenie od spoločnosti Google pre kompresiu návštevnosti, ktoré zahŕňa šetrenie návštevnosti Prehliadač Google Chrome.

Napíšte rozšírenie pre google chrome nenáročný. Ale pri písaní prvého rozšírenia môžu (a vznikajú) otázky. Väčšina návodov na písanie prvého rozšírenia sa spolieha na použitie manifestu prvej verzie, ktorý bude v blízkej budúcnosti zastaraný.

Tento článok sa bude týkať:

Ako urobiť manifest v.2
Ako pracovať so vzdialenými zdrojmi
Ako pracovať s cookies
Ako pracovať s lokálnym úložiskom
Ako pracovať s upozorneniami

Úvod

Ku koncu článku budeme mať pripravené rozšírenie organizátora, v ktorom bude pole na pridanie novej úlohy a tiež zoznam úloh na aktuálny deň. Označme všetky požiadavky na organizátora:

Musíte mať pole na pridanie udalosti (dátum, čas, udalosť)
Mali by sa zobraziť všetky úlohy pre aktuálny deň zoradené podľa času
Všetky minulé udalosti by sa mali zobraziť prečiarknuté
Musí obsahovať pole na zadanie času, počas ktorého sa má upozornenie zobraziť, ako aj začiarkavacie políčko, ktoré povoľuje a zakazuje zobrazovanie upozornení
vzadu určený čas pred udalosťou by sa malo zobraziť upozornenie na nadchádzajúcu udalosť

Manifest

Začnime vytvárať rozšírenie od úplného začiatku, teda od manifestu. Manifest je rovnaký súbor, ktorý obsahuje všetky parametre rozšírenia. Názov, popis, verzia, povolenie na prístup na stránky, povolenie na používanie súborov cookie, upozornenia, lokálny obchod. Stručne povedané, manifest je mozog rozšírenia. Vytvorte súbor manifest.json. Manifest je jediný súbor, ktorý musí mať preddefinovaný názov, všetky ostatné súbory môžu byť pomenované akokoľvek. Tento súbor má tri povinné polia:

manifest.json

( "name": "Rozšírenie organizátora", // Názov rozšírenia "version": "1.0", // Verzia rozšírenia. "manifest_version": 2 // Verzia manifestu )

Platí tu pár pravidiel:

Verzia manifest musí byť celé číslo, to znamená, že musí byť napísané ako 2, nie ako "2".
Verzia rozšírenia musí byť reťazec, ale obsahuje iba čísla a bodky, to znamená, že „1.0“ je dobré a 1.0 a „0.9 beta“ sú zlé.

S požadovanými poliami - to je všetko, prejdime k vytvoreniu kontextového okna pre rozšírenie. Ak chcete otvoriť okno kliknutím na ikonu, musíte do manifestu pridať pole „browser_action“

manifest.json

( … "browser_action": ( "default_title": "Otvoriť organizér", // Názov. Môžete ho vidieť, keď umiestnite kurzor myši na ikonu v prehliadači "default_icon": "icon_small.png", // Cesta k ikone rozšírenia "default_popup": " popup.html" // Cesta k vyskakovacej stránke ) )

Teraz vytvoríme vyskakovacie okno. Toto je obvyklé html stránku, ktorý môže mať akúkoľvek veľkosť a farbu, žiadne triky. Súbor pomenujeme „popup.html“. Tento súbor nestačí vytvoriť – musí byť uvedený v manifeste. Tak sme to urobili: "default_popup": "popup.html".

popup.html

Funguje to!

Pridanie rozšírenia prehliadača

Teraz je čas otestovať funkčnosť nášho rozšírenia. Ak to chcete urobiť, stiahnite si rozšírenie do prehliadača. Otvorte ponuku rozšírení v prehliadači Chrome. Vtáčika sme prepli do „režimu vývojára“.

Potom sa objavia tri tlačidlá. Kliknite na „Načítať rozbalené rozšírenie...“. Vyberte priečinok so súbormi s príponou. Potom sa zobrazí naše rozšírenie. Ak je všetko správne, kliknutím na ikonu sa zobrazí okno:

Prepojovacie skripty

Teraz sa môžeme začať zaujímať. Zahrnieme dva súbory javascript. Prvým je popup.js, druhým je jquery. S prvým nebudú žiadne problémy, ale pripojíme jquery nie lokálne, ale vzdialené, prevzaté na ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js . Problémy vyplývajú zo skutočnosti, že rozšírenie štandardne nemá prístup k zdrojom tretích strán. Ak chcete získať prístup, musíte ho zadať v manifeste. Prístup k niečomu je uvedený v poli „povolenia“. Pre vzdialené skripty a css tiež musíte zadať dostupné vzdialené zdroje.

manifest.json

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

Teraz zahrňme tieto skripty do popup.html

popup.html

Skladovanie

Pomocou úložiska v prehliadači Chrome môžete ukladať používateľské údaje. A práve v úložisku bude naše rozšírenie ukladať nadchádzajúce udalosti. Sú na to dva dôvody. Po prvé, údaje uložené v úložisku je možné synchronizovať, ak sa prihlásite do prehliadača. A po druhé, údaje môžu byť uložené nielen ako reťazec, ako v súboroch cookie, ale v akejkoľvek forme, to znamená, že môžete ukladať polia aj objekty. Aby to fungovalo, otvorme prístup k úložisku v manifeste.

manifest.json

( ... "oprávnenia": [ ... "úložisko" ] ... )

Teraz prerobme kontextové okno. Vyskakovacie okno bude obsahovať pole s dnešným dátumom, tri vstupy pre dátum, čas a popis novej udalosti, tlačidlo na pridanie novej udalosti, ako aj zoznam všetkých udalostí na dnešný deň.

popup.html

Dátum

dátum	Čas	Úloha

A hneď pridajte zobrazenie dátumu do bloku #dnes_dátum.

popup.js

$(function()( var today = new Date(); $("#today_date").html(today.getDate()+"."+(parseInt(today.getMonth())+1)+"." + today.getFullYear()); )

Malo by to vyzerať takto:

Takže, keď kliknete na tlačidlo „+“, mali by sme pridať udalosť. Na začiatku súboru deklarujeme globálne premenné úložisko – objekt na prácu s úložiskom, ako aj globálne pole úloh na ukladanie udalostí.

popup.js

var storage = chrome.storage.sync; var tasky = new Array(); $(function()( … $("#add_task").click(function()( var new_task = new Object(); new_task.date = validateField($("#new_date")).val(), "date" ); new_task.time = validateField($("#new_time").val(), "time"); new_task.task = $("#new_task").val(); if(!new_task.task || ! new_task.date || !new_task.task)( return false; ) task = new_task;storage.set(( task:tasks )); )); ));

Overovacia funkcia skontroluje, či je dátum napísaný vo formáte d.m.rrrr, čas je vo formáte hh:mm a či popis udalosti obsahuje aspoň tri znaky.

popup.js

Var validateField = function(val, type)( if(type == "date")( var date = val.split("."); var year = new Date(); year = year.getFullYear(); if( date.length == 3 && parseInt(date) == dátum && dátum<= 31 && parseInt(date) == date && date <= 12 && parseInt(date) == date && date >= year)(návratová hodnota;) ) else if(type == "čas")( var time = val.split(":"); if(time.length == 2 && parseInt(time) == čas && čas< 24 && parseInt(time) == time && time < 60){return val;} } else if(type == "task" && type.length >= 3)( return val; ) return null; )

Vymysleli sme dodatok, prejdime k prijímaniu udalostí na dnes. Ak to chcete urobiť, musíte získať všetky udalosti z databázy, vybrať zo všetkých iba dnešné udalosti a zoradiť ich podľa času vo vzostupnom poradí.

popup.js

$(function()( ... var now_hours = today.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 = today_tasks[i].time.replace(":", ""); var add = this_time > now_time ? "" : " class="done""; var add_html=" "+today_tasks[i].time+""+today_tasks[i].task+""; $("ul").append(add_html); ) ) ) )); … ));

Funkcia getTodayTasks() vracia iba udalosti s dnešným dátumom zo všeobecného zoznamu.

popup.js

Var getTodayTasks = function(tasks)( var today_tasks = new Array(); var today = new Date(); var today_date = today.getDate()+"."+(today.getMonth() + 1)+ "." + dnes.getFullYear(); for(var i v úlohách)( if(úlohy[i].dátum == dnešný_dátum)( dnešné_úlohy = úlohy[i]; ) ) if(dnes_úlohy.dĺžka > 0)( dnešné_úlohy = zoradiťÚlohy( dnešné_úlohy); ) vrátiť dnešné_úlohy; )

Funkcia sortTasks() triedi udalosti vzostupne podľa času.

popup.js

Var sortTasks = function(tasks)( if(tasks.length > 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 = úlohy[i]; úlohy[i] = úlohy; úlohy = dočasná; swapované = pravda; ) ) ) ) vrátiť úlohy; )

Upozornenia

Je čas prispôsobiť si zobrazovanie upozornení na obrazovke. Do vyskakovacieho okna pridáme špeciálne začiarkavacie políčko. Ak je toto políčko začiarknuté, upozornenia sa budú zobrazovať, ak nie je začiarknuté, nebudú sa zobrazovať. Pridáme aj textový vstup. Číslo v tomto vstupe ukazuje, ako dlho pred udalosťou sa bude upozornenie zobrazovať. To znamená, že ak máme udalosť naplánovanú na 19:00, tento textový vstup bude mať 5, čo znamená, že upozornenie sa zobrazí o 18:55. Pridajme kód s týmito vstupmi na popup.html

popup.html

Zobraziť upozornenia

Teraz sa pozrime, ako to bude fungovať. Po kliknutí na začiarkavacie políčko sa skontroluje jeho začiarknutý atribút a hodnota atribútu sa zapíše do súboru cookie „show_notifications“. Prejdime k zadávaniu textu. Zmenou jej hodnoty sa nová hodnota overí, ak je to celé číslo a nie viac ako 120, zapíšeme novú hodnotu do súboru cookie „when_to_notify“.

Aby nám to ale fungovalo, musíme si otvoriť prístup k cookies. Ak to chcete urobiť, prejdite na manifest.json a pridajte do „povolenia“

manifest.json

( ... "povolenia": [ ... "cookies" ] ... )

Teraz môžete spustiť skript. Poďme na popup.js. Najprv nastavíme počiatočné hodnoty na vstupoch. Štandardne nie je začiarkavacie políčko začiarknuté, to znamená, že upozornenia sa nezobrazujú a čas je 0. Po kliknutí na začiarkavacie políčko sa zmení hodnota súboru cookie „show_notifications“. Pri zmene hodnoty v textovom poli sa zmení hodnota súboru cookie „when_to_notify“.

popup.js

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

Pozrime sa bližšie na funkcie. Začnime funkciami práce s cookies. V tomto prípade boli hotové funkcie prevzaté z w3schools.com.

popup.js

Var setCookie = function(c_name,value,exdays)( /* *Prevzaté z http://www.w3schools.com/js/js_cookies.asp */ var exdate=new Date(); exdate.setDate(exdate.getDate( ) + exdays); var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString()); document.cookie=c_name + "=" + c_value; ) var getCookie = function(c_name)(Zavolajte Vasya P. /* *Prevzaté z http://www.w3schools.com/js/js_cookies.asp */ var i,x,y,ARRcookies=document.cookie.split(" ;"); pre (i=0;i

Poďme sa zaoberať funkciou setCheckbox(). Prijme súbor cookie „show_notifications“ a skontroluje, či je prijatá hodnota „pravda“ (text, áno), potom je začiarknutý parameter začiarkavacieho políčka pravdivý, v opačnom prípade je nepravda.

popup.js

Var setCheckbox = function()( var val = getCookie("show_notifications") document.getElementById("show_notifications").checked = ((val == "true") ? true: false); )

Teraz zvážte setWhenToNotify(). Prijíma novú hodnotu časovača. Ak je táto hodnota celé číslo a je menšia alebo rovná 120 minútam, súbor cookie „when_to_notify“ sa nastaví na novú hodnotu. Ak premenná neprejde touto validáciou, potom sa na vstup vráti predchádzajúca hodnota z cookies „when_to_notify“.

popup.js

Var setWhenToNotify = function(val)( var last_val = getCookie("when_to_notify"); last_val = last_val != "undefined"? last_val: 0; val = (parseInt(val)==val && val<=120) ? val: last_val; setCookie("when_to_notify", val); $("#when_to_notify").val(val); }

Prejdime k samotným notifikáciám. Ak to chcete urobiť, otvorte prístup k upozorneniam a pripojte background.js. Je to súbor na pozadí, ktorý je potrebné pripojiť, pretože ak sú upozornenia volané z popup.js, upozornenia sa zobrazia iba vtedy, ak je otvorené vyskakovacie okno.

manifest.json

( ... "povolenia": [ ... "notifications" ], "background": ( "scripts": ["background.js"] ), "web_accessible_resources": ["icon_small.png"], ... )

Posledný riadok poskytuje prístup k vzdialenému súboru. Faktom je, že obrázok zobrazený v upozornení musí byť pre rozšírenie dostupný na diaľku. V tomto prípade je súbor lokálny, ale stále musíte otvoriť prístup. Teraz sa pozrime na background.js. Poďme deklarovať premennú úložiska a prázdne pole úloh. Ďalej, raz za minútu, skript dostane zoznam dnešných udalostí a dostane od nich zoznam úloh, ktoré by mali nastať po určenom čase. Potom sa pre každú takúto úlohu zobrazí upozornenie.

background.js

var storage = chrome.storage.sync; var tasky = new Array(); setInterval(function() ( storage.get("tasks",function(items)( if(items.tasks && getCookie("show_notifications") == "true")(úlohy) = getTodayTasks(items.tasks); if(window .webkitNotifications)( var texty = getNextTask(úlohy); for(var i v textoch)( show(texts[i]); ) ) ) )); ), 60000);

Funkcie getTodayTasks() a getCookie() pochádzajú z popup.js. Začnime teda funkciou getNextTask(). Funkcia porovnáva aktuálny čas a čas udalosti, ak sa rovná hodnote uloženej v cookie „when_to_notify“, potom sa do ďalšieho poľa pridá reťazec z času udalosti a jeho popis. Po skontrolovaní všetkých udalostí vráti pole ako ďalšie.

background.js

Var getNextTask = function(tasks)( var now = new Date(); now = now.getTime(); var next = new Array(); for(var i in tasks)( var date = tasks[i].date. split("."); var time = task[i].time.split(":"); var task_date = new Date(parseInt(date), parseInt(date-1), parseInt(date), parseInt(time ), parseInt(time), 0, 0); task_date = task_date.getTime(); var delta = Math.round((task_date-now)/60000); if(delta == getCookie("when_to_notify"))( ďalej = úlohy[i].čas + " - " + úlohy[i].úloha; ) ) návrat ďalej; )

Funkcia show() zobrazí notifikáciu s daným textom.

background.js

Var show = function(text) ( var notification = window.webkitNotifications.createNotification("icon_small.png","Rozumiem", text); notification.show(); )

Výsledkom tohto skriptu bude nasledujúce upozornenie:

Doslov

Ako sme sľúbili, na konci článku máme pripravené rozšírenie organizátora pre Google Chrome.
Teraz poďme pridať rozšírenie do Internetového obchodu Chrome. Musíte si stiahnuť rozšírenie zabalené v archíve .zip. Najprv poďme do Internetového obchodu. Ak to chcete urobiť, prejdite na kartu "Aplikácie" v prehliadači Chrome a kliknite na tlačidlo "Web Strore".

Teraz prejdeme do menu. Ak to chcete urobiť, kliknite na šesť a otvorte „Panel pre vývojárov“

Stlačte veľké tlačidlo „Pridať novú položku“. Potom budete musieť vybrať archív zip s rozšírením a kliknúť na „nahrať“

Ďalej je potrebné vyplniť krátky formulár s popisom rozšírenia. Teraz je na výber, či rozšírenie uložíte ako koncept alebo ho zverejníte. Nemôžete ho len tak zverejniť, pretože registrácia v Internetovom obchode stojí 5 USD. Registračný poplatok musí byť zaplatený raz za účet, nie za predĺženie. Po zaplatení je možné rozšírenie zverejniť, ale aj tu sa musíte pripraviť na to, že bude validované niekoľko dní.

Vytváranie aplikácie pre Google Chrome

1. Stiahnite si archív so šablónou rozšírenia z tohto odkazu.

2. Rozbaľte zips na akékoľvek miesto, ktoré vám vyhovuje. Vo vnútri je súbor manifest.json a ikona ikona.png.

4. Ikonu z archívu zmeníme na náš obrázok vo formáte PNG o veľkosti 128 * 128.

Vytváranie rozšírenia pre Google Chrome

Aj keď je rozšírenie funkčne veľmi odlišné od aplikácie, algoritmus na jeho zostavenie nie je oveľa komplikovanejší.

1. Príponu získame z tohto odkazu.

2. Rozopnite zips. Otvorte súbor manifest.json v poznámkovom bloku a vložte názov svojej lokality, jej krátky popis a názov okna rozšírenia (riadky 2, 3 a 8).

3. Otvorte súbor labnol.js a zadajte adresu informačného kanála RSS vašej stránky.

4. Ikonu z archívu nahradíme naším obrázkom vo formáte PNG vo veľkosti 128 * 128.

Publikácia

Pomocou navrhovanej metódy bude môcť každý vlastník stránok alebo blogu vytvoriť a umiestniť značkové rozšírenie pre svoj zdroj do adresára rozšírení prehliadača Google Chrome. Návštevníkom to pomôže zostať v obraze s najnovšími aktualizáciami, čo privedie na váš web ďalších návštevníkov a zvýši jeho popularitu.