Všetky položky v Internetovom obchode Chrome sú rozdelené na aplikácie a rozšírenia. Urobíme oboje. Aplikácia, ktorú vytvoríme, 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 s nástrojmi, kliknutím na ktoré sa zobrazí panel s najnovšími aktualizáciami stránok.

Vytvorenie aplikácie pre Google Chrome

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

2. Rozbaľte ho na akékoľvek vhodné miesto. 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 2. riadku musíte zadať názov vašej lokality, do 3. riadka jej popis (do 132 znakov) a do 5. a 7. riadku adresu lokality. Uložte vykonané zmeny.

4. Zmeňte ikonu z archívu na vlastný obrázok vo formáte PNG, veľkosť 128*128.

Vytváranie rozšírenia pre Google Chrome

Aj keď je rozšírenie funkčne výrazne odlišné od aplikácie, algoritmus jeho zostavenia nie je o nič komplikovanejší.

1. Získajte šablónu rozšírenia z tohto odkazu.

2. Rozopnite zips. Otvorte súbor manifest.json v programe Poznámkový blok a vložte názov svojej lokality, jej stručný popis a názov okna rozšírenia (riadky 2, 3 a 8).

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

4. Ikonu z archívu nahraďte vlastným obrázkom vo formáte PNG, veľkosť 128*128.

Publikácia

Rozšírenie a aplikácia, ktorú sme vytvorili, sa dajú použiť dvoma spôsobmi. Ak ste vlastníkom webovej stránky a chcete na ňu prilákať ďalších používateľov, môžete svoju prácu zverejniť v Internetovom obchode Chrome. Ak to chcete urobiť, zabaľte súbory rozšírení a doplnkov do ich vlastného archívu, prejdite na stránku panela Chrome Dashboard a odovzdajte svoju prácu do obchodu Google. Tu budete vyzvaní, aby ste nahrali snímku obrazovky, poskytli rozšírený popis a špecifikovali niektoré ďalšie parametre. Stránka je v ruštine, takže jej ľahko porozumiete. Upozorňujeme, že na zverejnenie rozšírenia musíte byť overeným vlastníkom lokality, pre ktorú ste rozšírenie vytvorili. Okrem toho budete musieť zadať vstupný poplatok 5 USD za publikáciu.

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

Pomocou navrhovanej metódy bude môcť každý vlastník webovej stránky 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.

Vždy som chcel ľuďom povedať o zaujímavých príležitostiach (technológiách), ktoré môžu byť teraz dostupné každému, ale z nejakého dôvodu nie sú dostupné každému. Áno, ukázalo sa, že je to tautológia, ale plne odráža moje vnútorné rozhorčenie nad touto pre mňa pálčivou témou. Nech je to akokoľvek, reč teraz nebude o tom, ako sa hovorí. Dnes si povieme niečo o vytváraní rozšírení pre prehliadač Google Chrome (ďalej len Chrome).

Rozšírenie, ktoré budeme v tomto článku vyvíjať, nájdete v Internetovom obchode Google Chrome, len s tým rozdielom, že má pokročilé funkcie. Okrem toho je na GitHub zdrojový kód, opäť s upozornením, že všetko je tam napísané v CoffeeScripte a tu bude príbeh napísaný JavaScriptom. Mimochodom, nie som fanúšik ani zástanca CoffeeScript, ale je to celkom zaujímavá a užitočná vec - odporúčam vám to vyskúšať.

Ak ste niekedy uvažovali nad myšlienkou vytvorenia rozšírenia pre prehliadače Chrome, Firefox, Maxthon a ďalšie, pravdepodobne ste si už všimli, že minimálne úsilie, ktoré musíte vynaložiť, je pre prehliadač Chrome. Môžete si to overiť v dokumentácii k príslušným prehliadačom.

Formulácia problému

Písanie rozšírenia začína jeho popisom a nastavením úloh, ktoré bude riešiť. Keďže som sám sebe šéfom a môžem zmeškať termíny, koľkokrát chcem, nemusím písať technické špecifikácie – stačí mi porozumieť:

• Rozšírenie by malo skryť všetky komentáre na sociálnej sieti VK;
• Rozšírenie musí byť schopné zobrazovať komentáre;
• Rozšírenie musí byť schopné zobrazovať komentáre na konkrétnych stránkach;

Na prvý pohľad je všetko jednoduché a my to zvládneme. V rámci článku však implementujeme len prvé dva body.

Predvídam otázky, ktorých obsah môže byť asi takýto: „Prečo skrývať komentáre, ak je to celý zmysel sociálnej siete?!“ No, je to férová otázka, ktorá si zaslúži podrobnú odpoveď:

Okolnosti sa ukázali tak, že v poslednom čase, keď vidím komentáre na VK, chcem dať komentátorom hory facepalmov. Odoberám veľké množstvo rôznych verejných stránok, tematických (vývoj webu) a nie toľko. A nech sa to zdá akokoľvek zvláštne, stávam sa najštedrejším v skupinách s obsahom, ktorý je pre mňa zaujímavý, a nie mačkami (v mojom prípade pandy). Nikde inde som v komentároch nevidel také množstvo neprofesionálnych a nepekných informácií, ktoré by sa aj hádali. Navyše, komentáre v news feede nevyzerajú esteticky. Vo všeobecnosti povedané a urobené.

Rozširovací rám

Najpríjemnejším prekvapením pre mňa bolo, že hneď na začiatku cesty nás víta popisnosť akcií. Jednoducho povedané, musíme popísať našu aplikáciu, jej práva a možnosti – na to slúži súbor manifest.json.

Najprv musíte vyplniť tri povinné polia:

( "manifest_version": 2, // Počnúc Chrome 18 sadou 2, inak 1 (takéto staré položky nie sú podporované) "name": "My Extension", // Názov rozšírenia "version": "versionString" // Verzia rozšírenia )

Ak je s názvom všetko jasné a verzia manifestu je ešte jednoduchšia, musíte sa bližšie pozrieť na verziu rozšírenia.

Všetci sme teda zvyknutí na to, že verzia niečoho pozostáva z troch čísel oddelených bodkami – Major.Minor.Patch (Význam čísla). S npm, bowerom a inými pôžitkami je rozhovor krátky: buď takto, alebo vôbec. Google však ponúka nasledujúce možnosti:

"verzia": "1" "verzia": "1.0" "verzia": "2.10.2" "verzia": "3.1.2.4567"

Viac informácií o všetkých poliach v súbore manifestu nájdete v dokumentácii.

V našom prípade bude súbor manifestu vyzerať takto:

( "manifest_version": 2, "name": "__MSG_app_name__", "short_name": "VKCommentBlocker", "description": "__MSG_app_description__", "version": "0.1.0", "default_locale": "ru", " povolenia": [ "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" ), "pozadie": ( "trvalé": false, "page": "background.html" ), "content_scripts": [ ( "zhody" : [ "http://vk.com/*", "https://vk.com/*" ], "css": [ "styles/commentblocker.css" ] ) ], "web_accessible_resources": [ "styles /commentblocker_on.css" ])

Z toho, čo sa predtým neuvažovalo

• __MSG_key__ je prístup prehliadača Chrome k internacionalizácii aplikácií (i18n). Dá sa použiť v súbore manifestu aj v iných súboroch (dokonca aj CSS).
• web_accessible_resources - pole ciest zdrojov, ktoré budú následne použité v kontexte webových stránok. Bez uvedenia cesty v nej nemožno na webových stránkach nič použiť, ak sa takéto správanie očakáva.

Zdroje rozšírenia

Obrovským plusom pre karmu Chrome je, že teraz môžeme rozšírenie povoliť, samozrejme, ak boli vytvorené všetky zdroje špecifikované v manifest.json.

Myslím si, že nemá cenu sa zameriavať na to, čo je v súboroch commentblocker.css a commentblocker_on.css. Uvediem iba prvý, v ktorom sú uvedené všetky selektory, ktoré obsahujú komentáre:

@charset "utf-8"; .wall_module .reply_link_wrap .reply_link (viditeľnosť: skryté !important; ) .wall_module .replies_wrap, #wl_replies_wrap, #wl_reply_form_wrap, #mv_comments_wrap, #mv_your_comment, #pv_comments, #pv_comments!comments #pv_comments!comments #pv_comments! prístavný mravec; viditeľnosť: skrytý ! dôležité; ) body:after ( pozícia: pevné; obsah: "__MSG_mode_enable__"; hore: 5px; vpravo: 5px; výplň: 6px 12px; farba pozadia: #ffc; okraj: 1px plný #ddd; z-index: 9999 ;)

V súbore commentblocker_on.css je, ako asi tušíte, opak pravdou. Všimnite si, že priamo v CSS používam riadok s obsahom jazykového kľúča: "__MSG_mode_enable__" . Je čas vytvoriť súbor, kde budú tieto kľúče uložené.

V koreňovom adresári nášho rozšírenia vytvoríme adresár _locales a v ňom vnorené adresáre en a ru. Ďalej popíšeme naše kľúče v súbore messages.json.

( "app_name": ( "message": "Blokovanie komentárov VK" ), "app_description": ( "message": "Pohodlný spôsob, ako skryť komentáre v informačnom kanáli a skupinách." ), "browser_action": ( "správa" ": " Prepnúť typ komentára" ), "mode_enable": ( "message": "Žiadne komentáre!" ), "mode_disable": ( "message": "S komentármi!" ) )

Okrem poľa správy existujú ďalšie polia, o ktorých sa môžete dozvedieť z dokumentácie.

Teraz vytvoríme súbory background.html, najskôr takto:

Pozadie

Všetko je tu rovnaké ako v bežnom HTML – nič neobvyklé. Mimochodom, nemusíte vytvárať súbor background.html, pretože sa generuje automaticky na základe polí v manifest.json .

Spustenie rozšírenia

Rozšírenie môžete spustiť bez písania jediného riadku JavaScriptu. Ak to chcete urobiť, musíte prejsť cez ponuku:

• Nastavenie a správa prehliadača Google Chrome (Hamburger)
• Ďalšie nástroje
• Rozšírenia
• Začiarknite políčko vedľa položky „režim vývojára“
• Stiahnite si rozbalené rozšírenie
• Vyberte priečinok s príponou

Rozšírenie sa načítalo a objavilo sa v ponuke. Áno, áno, toto je „B“.

Zdá sa, že rozšírenie, ktoré sme práve vytvorili, nemá v hlave nič (nemá logiku) a všetky komentáre na stránkach sociálnej siete s písmenom „B“ sú teraz skryté. Odpoveď je v manifest.json, kde v poli "content_scripts": () sme uviedli, na ktorých stránkach (http://vk.com/* a https://vk.com/*) bude súbor commentblocker.css automaticky zahrnúť, čím sa skryjú všetky komentáre. Odporúčam vám prečítať si viac o matematických vzorcoch. Na pohľad je to také jednoduché, ale pod kapotou je to takmer sivý valach so všetkými zvončekmi a píšťalkami.

Takže bez napísania jediného riadku kódu už máme rozšírenie, ktoré vykonáva hlavnú úlohu, ktorá mu bola pridelená.

Oživenie expanzie

Zostáva dokončiť druhý bod úlohy, a to implementovať možnosť zobrazenia komentárov. Stručne povedané, musíme vložiť súbor commentblocker_on.css, ktorý prepíše pravidlá súboru commentblocker.css. A tu sa nám ponáhľa na pomoc náš všemocný JavaScript.

Pamätáte si, čo som povedal o background.html? Áno, áno, o tom, že to nemusí byť vytvorené. Poďme mierne zmeniť manifest.json:

... "background": ( "persistent": false, "scripts": [ "scripts/commentblocker.js" ] ), ...

Práve ste pripojili súbor JavaScript. Nič zvláštne. Poďme k tomuto súboru.

JS nemôžete len tak vložiť na stránku. A rovnaký problém existuje nielen so skriptami. Preto musíme použiť špeciálnu injekciu executeScript.

Najprv musíte k ikone rozšírenia pridať obsluhu udalosti kliknutia:

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

Kde toggleComments je funkcia, ktorá vloží náš súbor CSS na stránku:

Var toggleComments = function() ( var extensionLink; (document.getElementById("extension") == null) ? (extensionLink = document.createElement("link"), extensionLink.href = chrome.extension.getURL("/styles/ commentblocker_on.css"), extensionLink.id = "extension", extensionLink.type = "text/css", extensionLink.rel = "stylesheet", document.getElementsByTagName("head").appendChild(extensionLink)) : (dokument. getElementsByTagName("head").removeChild(document.getElementById("rozšírenie"))) );

Myslím, že stačia slová, že tento kúsok kódu skontroluje, či je náš CSS na stránke prepojený a vyvodí závery o potrebe povoliť alebo zakázať.

Mimochodom, nie je k dispozícii veľa podujatí, ktoré pokrývajú iný rozsah potrieb. Existujú napríklad také udalosti:

• onCreated - vytvorenie karty.
• onUpdated - aktualizácia karty.
• onRemoved - zatvorenie karty.

Stojí za zmienku, že udalosť onUpdated sa volá dvakrát:

• Aktualizácia stránky;

Na StackOverflow odporúčajú skontrolovať stav stránky:

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

Teraz, keď kliknete na ikonu, pripojí sa súbor štýlu, ktorý zobrazí komentáre a opätovným kliknutím na ikonu ich opäť skryjete.

závery

Mimochodom, stojí za zmienku moju plnú verziu rozšírenia VK Comment Blocker, ktorá je k dispozícii v

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).

Výzvou je vyvinúť rozšírenie, ktoré bude reagovať na určité HTML stránky otvárané v prehliadači. Napríklad upravte kód HTML stránky lokality, aby bolo jej používanie pohodlnejšie.
Riešenie bolo testované na Google Chrome 24.xa Chromium 6.x (Debian 6.0.6, amd64).

Riešenie problému

Zhrnutie hlavných otázok, ktoré vznikajú pri písaní rozšírenia crx.

Ako zaregistrovať rozšírenie?

Ako nastaviť časovač?

Ako zaregistrovať rozšírenie?

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

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

Kde je 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).

Samotný prehliadač Chrome generuje stránku _generated_background_page.html:

Na komunikáciu medzi súborom background.js a skriptom obsahu môžete 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í, že „obsahový skript je nejaký JavaScript, ktorý sa spúšťa v kontexte stránky, ktorá sa načíta do prehliadača“.

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

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

Ako nainštalovať handler na DOMContentLoaded je popísané na developer.chrome.com. Pozrite si aj dokumentáciu o stránkach na pozadí (background.js).

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

Je document.location.href zastaraný?

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

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; ); var l = getLocation(url); alert(l.hostname)

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

var l = 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 tip 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, no zatiaľ sa neobjavila v najnovší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/obdobím 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úšťa súbor background.js novým spôsobom. *) musím pri vstupe do režimu skontrolovať to isté? a spať.

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

Ak jednoducho stiahnete cez XMLHttpRequest, môže sa vám zobraziť nasledujúca správa: „XMLHttpRequest nemôže načítať http://site/config.xml. Pôvod http://www.google.ru nie je povolený pre 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 "*"

Žiadosti z viacerých domén môžete povoliť v rozšírení Chrome a prostredníctvom povolení v súbore 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 zobrazuje „Bad magic number“ (v čistom prehliadači Chrome táto chyba nie je pozorovaná).
Poznámka: Ochranu 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: pre Chromium musíte zmeniť riadky v manifest.json na nasledujúce (výslovne špecifikujte doménu a pridajte hviezdičku do cesty):

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

Ak chcete zabrániť tomu, aby sa webový inšpektor(?) v prehliadači Chrome sťažoval na XMLHttpRequest(), keď je internet vypnutý, môžete to urobiť takto:

var req = 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("line"). Reťazce akceptujú návrat vozíka pomocou "\n".

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

var xml = req.responseXML.documentElement; var ts = xml.getElementsByTagName("timeout"); var timeout = 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 verziu prehliadača Chrome >= 20. Do manifestu (manifest.json) musíte napísať nasledovné:

"premissions": ["storage" ]

Ako píšu v skupine Google "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." Pozrite si W3C Web SQL Database, poznámka pre ďalšie podrobnosti. 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. Príklad práce s IndexedDB nájdete na gist.github.com:

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

Indexované umiestnenie súborov DB,
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.

Vkladanie veľkého množstva záznamov do IndexedDB je pokryté na stackoverflow.com.

Ak chcete pridať položky do IndexedDB, musíte použiť

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) ako súbory .log.

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

Ako je uvedené v blogu 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. Po dokončení metódy sa verzia transakcie 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 databázu IndexedDB, ktorá neexistuje, vytvorí sa s číslom verzie, verzia = 0. V tomto prípade sa onupgradeneeded() a onsuccess() volajú postupne. Prvýkrát, keď voláme onupgradeneeded(), verzia je 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 jedna vec. Hovorí sa, že „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) nie je implementácia IndexedDB 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 umiestniť rozšírenie do Internetového obchodu Chrome, musíte spoločnosti Google zaplatiť vstupný poplatok 5 USD (potom môžete umiestniť ľubovoľný počet rozšírení). Platiť môžete cez VISA, MasterCard, AMEX alebo DISCOVER (navyše pri platbe musíte uviesť celú poštovú adresu a meno a priezvisko).

Na umiestnenie rozšírenia 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 som pochopil, neexistuje žiadna 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šírení pre Linux:

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

Kľúčové slová: Chromium builds pre Windows HOWTO, Stránka na stiahnutie Google Chrome, Vzorové rozšírenia prehliadača Google Chrome.

Na internete je veľa stránok, ktoré poskytujú možnosť posúvania stránky nahor bez použitia myši alebo posúvača. Zároveň však stále existujú lokality, kde takáto implementácia neexistuje. "Prečo neskúsiť napísať skript, ktorý by takéto tlačidlo pridal na všetky stránky?" - Pomyslel som si a pustil sa do realizácie. Takéto skripty sa nazývajú používateľské skripty a majú príponu *.user.js. Prečítať si ju môžete napríklad na Habré. Žiaľ, bez nástrah to nejde. Existujú určité rozdiely v implementácii userjs pre rôzne prehliadače. Zameriam sa na popis implementácie nášho skriptu userjs ako rozšírenia pre prehliadač Google Chrome.

manifest.json

Súbor požadovaný pre rozšírenie Google Chrome je manifest.json ktorý popisuje parametre, cesty k externým súborom (*.js, *.css atď.), podporu verzií atď. na rozšírenie. Môžete si prečítať viac o súbore. V našom prípade súbor manifest.json vyzerá takto:

( "manifest_version": 2, "content_scripts": [ ( "exclude_globs": , "include_globs": [ "*" ], "js": [ "jquery.js", "backTopUserJS.user.js" ], "css ": [ "css/style.css" ], "zhody": [ "http://*/*", "https://*/*" ], "run_at": "document_end" ) ], "converted_from_user_script ": true, "description": "Späť na začiatok rozšírenie používateľského skriptu pre prehliadač Google Chrome", "name": "backTopUserJS", "version": "1" )

Pre pohodlie používame knižnicu JQuery, ktorú sme umiestnili vedľa súboru manifest.json a hlavného súboru skriptu (v našom prípade backTopUserJS.user.js). Jeho obsah je nasledovný:

// ==UserScript== // @name backTopUserJS // @author Aleksandr Filatov // @licencia MIT // @verzia 1.0 // ==/UserScript== function main() ( var disp = $(window).scrollTop () > 400 ? "blok" : "none"; var $upButton = $("

"); $(document).find("body").append($upButton); $upButton.click(function () ( $("html, body").animate(( scrollTop: 0), "slow" ); )); $(okno).scroll(funkcia () ( if ($(okno).scrollTop() > 400) $upButton.fadeIn("pomaly"); inak $upButton.fadeOut("pomaly"); )); ); var script = document.createElement("script"); script.appendChild(document.createTextNode("("+ hlavné +"))();")); (document.body || document.head document.documentElement).appendChild(script);

Myslím si, že scenár je dostatočne jasný na to, aby sa dal podrobne zvážiť. Len posledné 3 riadky stoja za vysvetlenie. V skutočnosti ide o malý hack, ktorý vloží náš skript do kódu stránky lokality. Ak niekto z vás nájde lepší spôsob, môže napísať svoje opravy do komentárov :)

Inštalácia rozšírenia v prehliadači

V prehliadači Google Chrome si môžete nainštalovať vlastné skripty, podobne ako v iných prehliadačoch, no keďže Googlu záleží na našej bezpečnosti, musia byť zabalené do rozšírení prehliadača. Pozrime sa na inštaláciu krok za krokom.

Vytvorte priečinok pre naše rozšírenie takto: C:\MyChromeExtensionUserJS

Pre každé rozšírenie si vytvoríme vlastný adresár, napríklad v našom prípade ho nazveme C:\MyChromeExtensionUserJS\backTopUserJS . Pridajte do tohto adresára súbory rozšírenia.

Prejdite na „O prehliadači Google Chrome“ -> karta „Rozšírenia“ alebo do panela s adresou napíšte chrome://extensions/

Začiarknite políčko „Režim vývojára“

Kliknite na tlačidlo „Načítať rozbalené rozšírenie“ a vyberte adresár nášho rozšírenia. Kliknite na „OK“.

Rozšírenie je nainštalované a pripravené na použitie. Ak chcete rozšírenia aktualizovať po vykonaní zmien, jednoducho kliknite na tlačidlo „Aktualizovať rozšírenie“ alebo v režime vývojára stlačte klávesovú skratku Ctrl+R.

Spodná čiara

Zdroje skriptov si môžete pozrieť na github. Skript netvrdí, že je ideálny, ale slúži len ako príklad a podnet na písanie vlastných skriptov pre Google Chrome.