Všechny položky v Internetovém obchodě Chrome jsou rozděleny do aplikací a rozšíření. Uděláme obojí. Aplikace, kterou vytvoříme, se objeví jako ikona na nové kartě prohlížeče a umožní vám rychle spustit vaše stránky. Rozšíření je speciální tlačítko na panelu nástrojů, kliknutím na něj se zobrazí panel s nejnovějšími aktualizacemi webu.

Vytvoření aplikace pro Google Chrome

1. Stáhněte si archiv se šablonou rozšíření z tohoto odkazu.

2. Rozbalte jej na libovolné místo, které vám vyhovuje. Uvnitř je soubor manifest.json a ikona icon.png.

3. Otevřete soubor manifest.json v poznámkovém bloku a upravte jeho obsah. Do řádku 2 musíte zadat název svého webu, do řádku 3 jeho popis (až 132 znaků) a do řádku 5 a 7 adresu webu. Uložte provedené změny.

4. Změňte ikonu z archivu na vlastní obrázek ve formátu PNG o velikosti 128*128.

Vytvoření rozšíření pro Google Chrome

Přestože se rozšíření funkčně výrazně liší od aplikace, jeho algoritmus sestavení není o moc složitější.

1. Získejte šablonu rozšíření z tohoto odkazu.

2. Rozepněte zip. Otevřete soubor manifest.json v programu Poznámkový blok a vložte název svého webu, jeho stručný popis a název okna rozšíření (řádky 2, 3 a 8).

3. Otevřete soubor labnol.js a uveďte adresu zdroje RSS vašeho webu.

4. Nahraďte ikonu z archivu vlastním obrázkem ve formátu PNG o velikosti 128*128.

Vydání

Námi vytvořené rozšíření a aplikace lze použít dvěma způsoby. Pokud jste vlastníkem webu a chcete na něj přilákat další uživatele, můžete svou práci publikovat v Internetovém obchodě Chrome. Chcete-li to provést, zabalte soubory rozšíření a doplňků do jejich vlastního archivu, přejděte na stránku Chrome Dashboard a nahrajte svou práci do obchodu Google. Zde budete požádáni o nahrání snímku obrazovky, poskytnutí rozšířeného popisu a zadání některých dalších parametrů. Stránka je v ruštině, takže ji snadno pochopíte. Upozorňujeme, že pro publikování rozšíření musíte být ověřeným vlastníkem webu, pro který jste rozšíření vytvořili. Kromě toho budete muset zadat vstupní poplatek 5 USD za publikaci.

Pokud jste rozšíření shromáždili pouze pro osobní použití, například pro pohodlné sledování aktualizací vašeho oblíbeného webu, pak jednoduše otevřete stránku rozšíření v prohlížeči a povolte režim vývojáře. Poté klikněte na tlačítko Stáhněte si rozbalené rozšíření a zadejte cestu ke složce se soubory.

Pomocí navrhované metody bude moci každý vlastník webu nebo blogu vytvořit a umístit značkové rozšíření pro svůj zdroj do adresáře rozšíření prohlížeče Google Chrome. Návštěvníkům to pomůže zůstat v obraze s nejnovějšími aktualizacemi, což přivede na váš web další návštěvníky a zvýší jeho popularitu.

Vždy jsem chtěl lidem říkat o zajímavých příležitostech (technologiích), které mohou být nyní dostupné všem, ale z nějakého důvodu nejsou dostupné všem. Ano, ukázalo se, že je to tautologie, ale plně odráží mé vnitřní rozhořčení nad tímto pro mě palčivým tématem. Ať je to jak chce, řeč teď nebude o tom, jak se říká. Dnes si povíme něco o vytváření rozšíření pro prohlížeč Google Chrome (dále jen Chrome).

Rozšíření, které budeme v tomto článku vyvíjet, lze nalézt v Internetovém obchodě Google Chrome, pouze s tím rozdílem, že má pokročilé funkce. Na GitHubu je navíc zdrojový kód, opět s upozorněním, že vše je tam napsáno v CoffeeScriptu a zde bude příběh napsán JavaScriptem. Mimochodem, nejsem fanoušek ani zastánce CoffeeScriptu, ale je to docela zajímavá a užitečná věc - doporučuji vám ji vyzkoušet.

Pokud jste někdy uvažovali o myšlence vytvořit rozšíření pro Chrome, Firefox, Maxthon a další prohlížeče, pravděpodobně jste si již všimli, že minimální úsilí, které musíte vynaložit, je pro Chrome. Můžete si to ověřit v dokumentaci k odpovídajícím prohlížečům.

Formulace problému

Psaní rozšíření začíná jeho popisem a nastavením úkolů, které bude řešit. Vzhledem k tomu, že jsem svým vlastním šéfem a mohu zmeškat termíny, kolikrát chci, nemusím psát technické specifikace – stačí, když pochopím, že:

• Rozšíření by mělo skrýt všechny komentáře na sociální síti VK;
• Rozšíření musí být schopno zobrazovat komentáře;
• Rozšíření musí být schopno zobrazovat komentáře na konkrétních stránkách;

Na první pohled je vše jednoduché a my to zvládneme. V rámci článku však implementujeme pouze první dva body.

Předvídám otázky, jejichž obsah může být asi tento: „Proč skrývat komentáře, když je to celý smysl sociální sítě?!“ No, to je férová otázka, která si zaslouží podrobnou odpověď:

Okolnosti se ukázaly tak, že v poslední době, když vidím komentáře na VK, chci dát komentátorům hory facepalmů. Odebírám velké množství různých veřejných stránek, tematických (vývoj webu) a ne tolik. A bez ohledu na to, jak divné to může vypadat, stávám se nejštědřejší ve skupinách s obsahem, který je pro mě zajímavý, a ne kočky (v mém případě pandy). Nikde jinde jsem v komentářích neviděla takové množství neprofesionálních a ošklivých informací proudit a dokonce uvažují o hádce. Komentáře v news feedu navíc nevypadají esteticky. Obecně řečeno, řečeno a uděláno.

Rozšiřující rám

Nejpříjemnějším překvapením pro mě bylo, že hned na začátku cesty nás vítá popisnost akcí. Jednoduše řečeno, musíme popsat naši aplikaci, její práva a možnosti – k tomu slouží soubor manifest.json.

Nejprve musíte vyplnit tři povinná pole:

( "manifest_version": 2, // Počínaje Chrome 18 sadou 2, jinak 1 (takové staré věci nejsou podporovány) "name": "My Extension", // Název rozšíření "version": "versionString" // Verze rozšíření )

Pokud je s názvem vše jasné a verze manifestu je ještě jednodušší, musíte se blíže podívat na verzi rozšíření.

Takže jsme všichni zvyklí na to, že verze něčeho se skládá ze tří čísel oddělených tečkami - Major.Minor.Patch (Význam čísla). S npm, bower a dalšími lahůdkami je konverzace krátká: buď tímto způsobem, nebo vůbec. Google však nabízí následující možnosti:

"verze": "1" "verze": "1.0" "verze": "2.10.2" "verze": "3.1.2.4567"

Další informace o všech polích v souboru manifestu naleznete v dokumentaci.

V našem případě bude soubor manifestu vypadat takto:

( "manifest_version": 2, "name": "__MSG_app_name__", "short_name": "VKCommentBlocker", "description": "__MSG_app_description__", "version": "0.1.0", "default_locale": "ru", " oprávnění": [ "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" ), "pozadí": ( "trvalé": false, "page": "pozadí.html" ), "content_scripts": [ ( "odpovídá" : [ "http://vk.com/*", "https://vk.com/*" ], "css": [ "styles/commentblocker.css" ] ) ], "web_accessible_resources": [ "styly" /commentblocker_on.css" ])

Z toho, co se dříve neuvažovalo

• __MSG_key__ je pohledem prohlížeče Chrome na internacionalizaci aplikací (i18n). Lze použít jak v souboru manifestu, tak v jiných souborech (i CSS).
• web_accessible_resources - pole cest zdrojů, které budou následně použity v kontextu webových stránek. Bez uvedení cesty v něm nelze na webových stránkách nic použít, pokud se takové chování očekává.

Expanzní zdroje

Obrovským plusem pro karmu Chrome je, že nyní můžeme rozšíření povolit, samozřejmě pokud byly vytvořeny všechny zdroje uvedené v manifest.json.

Myslím, že nemá cenu se zaměřovat na to, co je v souborech commentblocker.css a commentblocker_on.css. Uvedu pouze první, kde jsou uvedeny všechny selektory, které obsahují komentáře:

@charset "utf-8"; .wall_module .reply_link_wrap .reply_link ( viditelnost: skryté !important; ) .wall_module .replies_wrap, #wl_replies_wrap, #wl_reply_form_wrap, #mv_comments_wrap, #mv_your_comment, #pv_comments, display #pv_comments!comments #pv_comments! přístavní mravenec; viditelnost: skrytý ! important; ) body:after ( position: fixed; content: "__MSG_mode_enable__"; top: 5px; right: 5px; padding: 6px 12px; background-color: #ffc; border: 1px solid #ddd; z-index: 9999 ;)

V souboru commentblocker_on.css, jak asi tušíte, je opak pravdou. Všimněte si, že přímo v CSS používám řádek s obsahem jazykového klíče: "__MSG_mode_enable__" . Je čas vytvořit soubor, kde budou tyto klíče uloženy.

V kořenovém adresáři našeho rozšíření vytvoříme adresář _locales a v něm vnořené adresáře en a ru. Dále popíšeme naše klíče v souboru messages.json.

( "app_name": ( "message": "VK Comment Blocker" ), "app_description": ( "message": "Pohodlný způsob, jak skrýt komentáře ve zpravodajském kanálu a skupinách." ), "browser_action": ( "message" ": " Přepnout typ komentáře" ), "mode_enable": ( "message": "Žádné komentáře!" ), "mode_disable": ( "message": "S komentáři!" ) )

Kromě pole zprávy existují další pole, o kterých se můžete dozvědět z dokumentace.

Nyní vytvoříme soubory background.html, nejprve takto:

Pozadí

Vše je zde stejné jako v běžném HTML – nic neobvyklého. Mimochodem, nemusíte vytvářet soubor background.html, protože se generuje automaticky na základě polí v manifest.json .

Spuštění rozšíření

Rozšíření můžete spustit bez psaní jediného řádku JavaScriptu. Chcete-li to provést, musíte projít nabídku:

• Nastavení a správa Google Chrome (Hamburger)
• Další nástroje
• Rozšíření
• Zaškrtněte políčko vedle „režimu pro vývojáře“
• Stáhněte si rozbalené rozšíření
• Vyberte složku s příponou

Rozšíření se načetlo a objevilo se v nabídce. Ano, ano, toto je „B“.

Zdálo by se, že rozšíření, které jsme právě vytvořili, nemá nic v hlavě (nemá žádnou logiku) a všechny komentáře na stránkách sociální sítě s písmenem „B“ jsou nyní skryté. Odpověď se nachází v manifest.json, kde v poli "content_scripts": () jsme uvedli, na kterých stránkách (http://vk.com/* a https://vk.com/*) bude soubor commentblocker.css být automaticky zahrnut, což skryje všechny komentáře. Doporučuji vám přečíst si více o matematických vzorcích. Na pohled je to tak jednoduché, ale pod kapotou je to téměř šedý valach se všemi zvonky a píšťalkami.

Takže bez psaní jediného řádku kódu již máme rozšíření, které provádí hlavní úkol, který je mu přidělen.

Oživení expanze

Zbývá dokončit druhý bod úkolu, a to implementovat možnost zobrazování komentářů. Stručně řečeno, musíme podat soubor commentblocker_on.css, který přepíše pravidla souboru commentblocker.css. A tady nám na pomoc přispěchá náš všemocný JavaScript.

Pamatujete si, co jsem řekl o background.html? Ano, ano, o tom, že nemusí být vytvořen. Pojďme trochu změnit manifest.json:

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

Právě jste připojili soubor JavaScript. Nic zvláštního. Pojďme k tomuto souboru.

JS nemůžete jen tak nacpat na stránku. A stejný problém existuje nejen u skriptů. Proto musíme použít speciální injekci skriptu.

Nejprve musíte k ikoně rozšíření přidat obsluhu události kliknutí:

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

Kde toggleComments je funkce, která vloží náš soubor CSS do stránky:

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

Myslím, že budou stačit slova, že tento kousek kódu kontroluje, zda je naše CSS na stránce propojené a vyvozuje závěry o nutnosti jej povolit či zakázat.

Mimochodem, není k dispozici mnoho akcí, které pokrývají různé spektrum potřeb. Jedná se například o tyto události:

• onCreated - vytvoření karty.
• onUpdated - aktualizace karty.
• onRemoved - zavření karty.

Stojí za zmínku, že událost onUpdated se volá dvakrát:

• Aktualizace stránky;

Na StackOverflow doporučují zkontrolovat stav stránky:

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

Nyní, když kliknete na ikonu, připojí se soubor stylu, který zobrazí komentáře, a opětovné kliknutí na ikonu je opět skryje.

závěry

Mimochodem, za zmínku stojí moje plná verze rozšíření VK Comment Blocker, která je dostupná v

Nejsměrodatnějšími lidmi v této oblasti jsou Wladimir Palant (napsal AdBlock Plus), ... Rozšíření pro Chrome se píší snadněji než pro Firefox. Zajímavé je, že nejoblíbenější rozšíření pro Chrome je „Tyuryaga VKontakte“ (podle statistik Yandex).

Úkolem je vyvinout rozšíření, které bude reagovat na určité HTML stránky otevírané v prohlížeči. Například upravte kód HTML stránky webu, aby bylo používání tohoto webu pohodlnější.
Řešení bylo testováno na Google Chrome 24.xa Chromium 6.x (Debian 6.0.6, amd64).

Řešení problému

Shrnutí hlavních otázek, které vyvstanou při psaní rozšíření crx.

Jak zaregistrovat rozšíření?

Jak nastavit časovač?

Jak zaregistrovat rozšíření?

Pro minimální příponu stačí 4 soubory:

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": [ ( "odpovídá ": [ "*://*/*" ], "js": [ "obsah..png" ) // žádné web_accessible_resources )

Soubor background.js obsahuje kód, který se spustí při spuštění prohlížeče. V tomto skriptu můžete „zavěsit“ obsluhu načítání obsahu dokumentu (document.location.href).

Chrome sám generuje _generated_background_page.html:

Ke komunikaci mezi background.js a skriptem obsahu můžete použít zprávy (požadavek/zpráva) a chrome.extension.getBackgroundPage(). Podívejte se také na přehled architektury rozšíření pro Chrome. Říká, že "obsahový skript je nějaký JavaScript, který se spouští v kontextu stránky, která" byla načtena do prohlížeče".

Poznámka: Je obtížné ladit stránku na pozadí (background.js) v Chromiu, protože neexistuje žádná odpovídající. na stránce Rozšíření v režimu pro vývojáře.

Jak zkontrolovat aktuální URL, oříznout ji a vypočítat hash?

Jak nainstalovat handler na DOMContentLoaded je popsáno na developer.chrome.com. Viz také dokumentace o stránkách na pozadí (background.js).

Pro vložení HTML kódu do stránky můžeme využít rady z článku o Habrém (tam je zmínka o dokumentu globální proměnné), ale musíme také porovnat aktuální URL se seznamem.

Je document.location.href zastaralý?

Příklad získání plně kvalifikovaného názvu domény ze 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. úrovně můžete vybrat takto:

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

(viz tip na stackoverflow.com).

injekce sha1.js...

Jak nastavit časovač? Viz vzorová rozšíření: Příklad stránky události, background.js:

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

Tato chyba v Chromiu byla uzavřena 9. ledna 2013, ale zatím se neobjevila v nejnovějších sestaveních pro Windows.

Pokud se přesto rozhodnete používat „moderní“ alarmy, pak jak správně nastavit časovač alarmu s libovolnou dobou trvání/periodou je popsáno na stackoverflow.com.

Pro kompatibilitu se staršími prohlížeči je lepší použít window.setInterval() v background.js:

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

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

Zakázat-Povolit rozšíření Chrome spouští background.js novým způsobem. *) musím pro vstup do režimu zaškrtnout totéž? a spát.

Jak stáhnout config.xml/time.txt a jak je analyzovat?

Pokud jednoduše stáhnete pomocí XMLHttpRequest, můžete obdržet následující zprávu: "XMLHttpRequest nemůže načíst http://site/config.xml. Počátek http://www.google.ru není povolen Access-Control-Allow-Origin. “. To znamená, že při zadávání požadavku mezi doménami jste nepovolili možnost CORS, .htaccess:

Sada záhlaví Access-Control-Allow-Origin "*"

Požadavky mezi doménami můžete povolit v rozšíření Chrome a prostřednictvím oprávnění v manifest.json:

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

Oba tyto případy však nefungují pro rozbalená rozšíření Chromium. U zabalených rozšíření se u verze Chromium 6.0–7.0 někdy zobrazuje „Bad magic number“ (u čistého Chrome tato chyba není pozorována).
Poznámka: Ochranu CORS lze v prohlížeči Chromium obejít pomocí možnosti --disable-web-security:

$ chromium-browser --disable-web-security http://domena/cesta

Doplnění: pro Chromium je třeba změnit řádky v manifest.json na následující (výslovně specifikovat doménu a přidat hvězdičku do cesty):

( "oprávnění": [ "http://site/*" ],

Chcete-li zabránit tomu, aby si webový inspektor(?) v prohlížeči Chrome stěžoval na XMLHttpRequest(), když je internet vypnutý, můžete to udělat takto:

var req = null; try ( req = new XMLHttpRequest(); ) catch(err) () // viz rada na stackoverflow.com

(toto je napsáno na radu stackoverflow.com). ...

K ladění analýzy můžete použít console.log("line"). Řetězce přijímají návrat vozíku pomocí "\n".

Analýza XML do JavaScriptu v rozšíření pro Chrome se provádí 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) ( for (var i = 0; i< ds.length; i++) { console.log("domain: "+ds[i].textContent); } }

Jak používat globální atomické proměnné a data tabulky v rozšíření Chrome?

Chcete-li synchronizovat data rozšíření pomocí Storage API, potřebujete verzi Chrome >= 20. Do manifestu (manifest.json) musíte napsat následující:

"premissions": ["úložiště" ]

Jak píší ve skupině Google "Chromium HTML5", "Obrátil jsem svou pozornost na Web SQL Database, ale zdá se, že Web SQL již není v "aktivní údržbě", což mě vede k domněnce, že bude vynechán ze specifikace HTML." Viz W3C Web SQL Database, poznámka pro další podrobnosti. Můžete zkusit použít Základní pojmy – pro rozšíření prostoru pro databázi můžete použít oprávnění: neomezené úložiště v manifest.json. Pro použití "Neomezené úložiště" existují následující offline API: 1) App Cache; 2) Systém souborů; 3) IndexedDB; 4) WebSQL (zastaralé). Příklad použití IndexedDB v prohlížeči Chrome viz. Příklad práce s IndexedDB najdete na gist.github.com:

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

Umístění indexovaných souborů 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/ celkem 24 drwx------ 2 anonym 4096: 08.08.0 drwx------ 3 anonymní anonym 4096 7. února 03:08 .. -rw-r--r-- 1 anonym 285 7. února 03:08 000003.log -rw-r--r-- 1 anonym anonym 16. února 03:08 AKTUÁLNÍ -rw------- 1 anonym anonym 0 7. února 03:08 LOCK -rw-r--r-- 1 anonym anonym 46. února 03:08 LOG -rw-r --r-- 1 anonym anonym 32. února 7 03:08 MANIFEST-000002

Na příklady použití IndexedDB se můžete podívat na Mozilla Developer Network.

Vkládání velkého množství záznamů do IndexedDB je pokryto na stackoverflow.com.

Chcete-li přidat položky do IndexedDB, musíte použít

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

Ve složce databáze IndexedDB jsou staré databáze uloženy jako soubory .sst a nové (aktuální) jako soubory .log.

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

Jak je uvedeno na blogu Parashurama Narasimhana: „Pro Chrome: V případě chrome se funkce onupgradeneeded nevolá. Je volána funkce onsuccess databáze. Zde se kontroluje existence metody setVersion. Pokud metoda existuje a zadaná verze je větší než verze databáze, zavolá se metoda setVersion. Úspěch volání požadavku setVersion vyvolá uživatelovu metodu onupgradeneeded s transakcí verze. Jakmile je metoda dokončena, je transakce versionTransaction potvrzena uzavřením databáze. Databáze se znovu otevře s nejnovější verzí a ta je předána uživateli onsuccess definovanému uživatelem." (pro volání onupgradeneeded() udělám db.setVersion("3")).

Jak načíst data v content.js:

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

K otevření databáze použijte kód z axemclion+jepp (funkce openReqShim).

Když otevřeme databázi IndexedDB, která neexistuje, bude vytvořena s číslem verze, verze = 0. V tomto případě jsou onupgradeneeded() a onsuccess() volány postupně. Když poprvé zavoláme onupgradeneeded(), verze je již = 1. Když [existující databázi] otevřeme podruhé, onupgradeneeded() se již nevolá a číslo verze = 1. (?nezvyšuje se) Pouze dbreq Zavolá se .onsuccess().

Ještě jedna věc. Píše se tam, že „S Chromem starším než 23 musíte takovou transakci vytvořit ručně voláním setVersion() – API, které bylo ze specifikace odstraněno. Starší specifikaci najdete na: http://www.w3.org /TR/2011/WD-IndexedDB-20110419/“, to znamená, že abyste se vyhnuli chybě „NotFoundError: DOM IDBDatabase Exception 8“ v protokolech Chrome, musíte zavolat setVersion().

V Chromiu 6.0.472.63 (59945) není implementace IndexedDB stabilní, takže je zakázána a nefunguje =)

Obecně je potřeba používat background.js + iframe + exchange se skripty obsahu přes zprávy

Jak zvládnout událost otevření stránky?

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

Content.js:

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

Jak formátovat HTML kód stránky? Viz psaní rozšíření pro Firefox. Jak zabalit nástavec a kam jej umístit?

Chcete-li umístit rozšíření do Internetového obchodu Chrome, musíte společnosti Google zaplatit vstupní poplatek ve výši 5 USD (pak můžete umístit libovolný počet rozšíření). Platit můžete prostřednictvím karet VISA, MasterCard, AMEX nebo DISCOVER (při platbě navíc musíte uvést celou poštovní adresu a jméno a příjmení).

K umístění rozšíření potřebujete účet Google a tak dále. Budete potřebovat snímek obrazovky a reklamní obrázek. Budete muset aktualizovat kód rozšíření ručně prostřednictvím stejného Internetového obchodu Chrome (jak jsem pochopil, neexistuje žádná automatická aktualizace podle adresy URL, jako ve Firefoxu). V souboru manifest.json je třeba aktualizovat verzi rozšíření. Několik minut po přidání bude rozšíření dostupné ve vyhledávání rozšíření pro Chrome.

Balíček rozšíření pro Linux:

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

Klíčová slova: Chromium builds pro Windows HOWTO, stránka stahování Google Chrome, Ukázková rozšíření Google Chrome.

Na internetu je mnoho stránek, které poskytují možnost posouvat stránku nahoru bez použití myši nebo posuvníku. Ale zároveň stále existují weby, kde taková implementace není. "Proč nezkusit napsat skript, který by takové tlačítko přidal na všechny stránky?" - Přemýšlel jsem a pustil se do realizace. Takové skripty se nazývají uživatelské skripty a mají příponu *.user.js. Přečíst si ji můžete například na Habré. Bohužel se to neobejde bez nástrah. Existují určité rozdíly v implementaci userjs pro různé prohlížeče. Zaměřím se na popis implementace našeho skriptu userjs jako rozšíření pro prohlížeč Google Chrome.

manifest.json

Soubor požadovaný pro rozšíření Google Chrome je manifest.json který popisuje parametry, cesty k externím souborům (*.js, *.css atd.), podporu verzí atd. pro rozšíření. Více o souboru si můžete přečíst. V našem případě soubor manifest.json vypadá takto:

( "manifest_version": 2, "content_scripts": [ ( "exclude_globs": , "include_globs": [ "*" ], "js": [ "jquery.js", "backTopUserJS.user.js" ], "css ": [ "css/style.css" ], "matches": [ "http://*/*", "https://*/*" ], "run_at": "document_end" ) ], "converted_from_user_script ": true, "description": "Zpět na začátek rozšíření uživatelského skriptu pro Google Chrome", "name": "backTopUserJS", "version": "1" )

Pro usnadnění používáme knihovnu JQuery, kterou jsme umístili vedle souboru manifest.json a hlavního souboru skriptu (v našem případě backTopUserJS.user.js). Jeho obsah je následující:

// ==UserScript== // @name backTopUserJS // @author Aleksandr Filatov // @licence MIT // @verze 1.0 // ==/UserScript== funkce main() ( var disp = $(window).scrollTop () > 400 ? "block" : "none"; var $upButton = $("

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

Myslím, že scénář je dostatečně jasný na to, aby se dal podrobně zvážit. Jen poslední 3 řádky stojí za vysvětlení. Ve skutečnosti se jedná o malý hack, který vloží náš skript do kódu stránky webu. Pokud někdo z vás najde lepší způsob, může napsat své opravy do komentářů :)

Instalace rozšíření do prohlížeče

Do Google Chrome si můžete nainstalovat vlastní skripty, podobně jako do jiných prohlížečů, ale protože Google dbá na naši bezpečnost, musí být zabaleny do rozšíření prohlížeče. Podívejme se na instalaci krok za krokem.

Vytvořte složku pro naše rozšíření takto: C:\MyChromeExtensionUserJS

Pro každé rozšíření vytvoříme vlastní adresář, například v našem případě jej nazveme C:\MyChromeExtensionUserJS\backTopUserJS . Přidejte do tohoto adresáře soubory rozšíření.

Přejděte na „O prohlížeči Google Chrome“ -> karta „Rozšíření“ nebo do adresního řádku napište chrome://extensions/

Zaškrtněte políčko „Režim vývojáře“

Klikněte na tlačítko "Načíst rozbalené rozšíření" a vyberte adresář našeho rozšíření. Klikněte na "OK".

Rozšíření je nainstalováno a připraveno k použití. Chcete-li rozšíření aktualizovat poté, co jste v něm provedli změny, jednoduše klikněte na tlačítko "Aktualizovat rozšíření" nebo v režimu pro vývojáře stiskněte klávesovou zkratku Ctrl+R.

Sečteno a podtrženo

Zdroje skriptů si můžete prohlédnout na githubu. Skript netvrdí, že je ideální, ale slouží pouze jako příklad a podnět pro psaní vlastních skriptů pro Google Chrome.