Vsi elementi v spletni trgovini Chrome so razdeljeni na aplikacije in razširitve. Naredili bomo oboje. Aplikacija, ki jo ustvarimo, se bo pojavila kot ikona v novem zavihku brskalnika in vam bo omogočila hiter zagon spletnega mesta. Razširitev je poseben gumb v orodni vrstici, s klikom na katerega se prikaže plošča z najnovejšimi posodobitvami spletnega mesta.

Izdelava aplikacije za Google Chrome

1. Prenesite arhiv s predlogo razširitve s te povezave.

2. Odprite ga na katero koli mesto, ki vam ustreza. Notri je datoteka manifest.json in ikona ikona.png.

3. Odprite datoteko manifest.json v beležko in uredite njeno vsebino. V 2. vrstico morate vnesti ime svojega spletnega mesta, v 3. vrstico njegov opis (do 132 znakov), v 5. in 7. vrstico pa naslov spletnega mesta. Shranite narejene spremembe.

4. Spremenite ikono iz arhiva v svojo sliko v formatu PNG, velikosti 128*128.

Izdelava razširitve za Google Chrome

Čeprav se razširitev funkcionalno bistveno razlikuje od aplikacije, njen algoritem sestavljanja ni veliko bolj zapleten.

1. Pridobite predlogo razširitve na tej povezavi.

2. Odprite zadrgo. Odprite datoteko manifest.json v beležnici in prilepite ime svojega spletnega mesta, njegov kratek opis in naslov okna razširitve (vrstice 2, 3 in 8).

3. Odprite datoteko labnol.js in navedite naslov vira RSS vašega spletnega mesta.

4. Zamenjajte ikono iz arhiva s svojo sliko v formatu PNG velikosti 128*128.

Objava

Razširitev in aplikacijo, ki smo jo naredili, lahko uporabljamo na dva načina. Če ste lastnik spletnega mesta in želite nanj privabiti dodatne uporabnike, lahko svoje delo objavite v spletni trgovini Chrome. Če želite to narediti, zapakirajte datoteke razširitev in dodatkov v lasten arhiv, pojdite na stran nadzorne plošče Chrome in naložite svoje delo v trgovino Google. Tukaj boste pozvani, da naložite posnetek zaslona, ​​podate razširjen opis in določite nekatere druge parametre. Stran je v ruščini, tako da jo zlahka razumete. Upoštevajte le, da morate biti za objavo razširitve preverjeni lastnik mesta, za katerega ste naredili razširitev. Poleg tega boste morali vnesti 5 USD vstopnine na objavo.

Če ste zbrali razširitve samo za osebno uporabo, na primer za priročno spremljanje posodobitev vašega priljubljenega spletnega mesta, preprosto odprite stran z razširitvami v brskalniku in omogočite način za razvijalce. Nato kliknite gumb Prenesite nepakirano razširitev in določite pot do mape z datotekami.

Z uporabo predlagane metode bo vsak lastnik spletnega mesta ali spletnega dnevnika lahko ustvaril in postavil razširitev z blagovno znamko za svoj vir v imenik razširitev brskalnika Google Chrome. To bo obiskovalcem pomagalo, da ostanejo na tekočem z najnovejšimi posodobitvami, kar bo pripeljalo dodatne obiskovalce na vaše spletno mesto in povečalo njegovo priljubljenost.

Vedno sem želel ljudem povedati o zanimivih priložnostih (tehnologijah), ki so zdaj morda na voljo vsem, vendar iz nekega razloga niso na voljo vsem. Da, izkazalo se je za tavtologijo, vendar v celoti odraža moje notranje ogorčenje nad to zame perečo temo. Kakor koli že, pogovor zdaj ne bo o tem, kako pravijo. Danes bomo govorili o ustvarjanju razširitev za brskalnik Google Chrome (v nadaljnjem besedilu Chrome).

Razširitev, ki jo bomo razvijali skozi ta članek, lahko najdete v spletni trgovini Google Chrome, z edino razliko, da ima napredno funkcionalnost. Poleg tega je na GitHubu izvorna koda, spet z opozorilom, da je tam vse napisano v CoffeeScriptu, tukaj pa bo zgodba napisana z JavaScriptom. Mimogrede, nisem oboževalec ali zagovornik CoffeeScripta, vendar je precej zanimiva in uporabna stvar - svetujem vam, da jo preizkusite.

Če ste kdaj razmišljali o ustvarjanju razširitve za Chrome, Firefox, Maxthon in druge brskalnike, potem ste verjetno že opazili, da se morate najmanj potruditi za Chrome. To lahko preverite tako, da pogledate dokumentacijo za ustrezne brskalnike.

Oblikovanje problema

Pisanje razširitve se začne z njenim opisom in določitvijo nalog, ki jih bo reševala. Ker sem sam svoj šef in lahko zamudim roke, kolikor hočem, mi ni treba pisati tehničnih specifikacij - dovolj je, da razumem, da:

• Razširitev bi morala skriti vse komentarje na družbenem omrežju VK;
• Razširitev mora imeti možnost prikaza komentarjev;
• Razširitev mora biti sposobna prikazati komentarje na določenih straneh;

Na prvi pogled je vse preprosto in zmoremo. Vendar bomo v okviru članka izvajali le prvi dve točki.

Predvidevam vprašanja, katerih vsebina je lahko približno takšna: "Zakaj bi skrivali komentarje, če je to bistvo družbenega omrežja?!" No, to je pošteno vprašanje, ki si zasluži podroben odgovor:

Okoliščine so se izkazale tako, da v zadnjem času, ko vidim komentarje na VK, želim komentatorjem dati gore dlani. Naročen sem na veliko število različnih javnih strani, tematskih (izdelava spletnih strani) in manj. In ne glede na to, kako čudno se zdi, postanem najbolj radodarna v skupinah z vsebino, ki je zame zanimiva, in ne mačke (v mojem primeru pande). Toliko nestrokovnih in grdih informacij v komentarjih še nisem videl nikjer drugje, pa še pomislijo na prepir. Poleg tega komentarji v viru novic niso videti estetsko prijetni. Na splošno rečeno in storjeno.

Razširitveni okvir

Najbolj prijetno me je presenetilo, da nas že na začetku poti pozdravi opisna narava dejanj. Preprosto povedano, opisati moramo našo aplikacijo, njene pravice in zmožnosti - za to se uporablja datoteka manifest.json.

Najprej morate izpolniti tri zahtevana polja:

( "manifest_version": 2, // Začenši s Chromom 18 nastavite 2, sicer 1 (takšne stare stvari niso podprte) "name": "Moja razširitev", // Ime razširitve "version": "versionString" // Različica razširitve )

Če je z imenom vse jasno in je različica manifesta še preprostejša, potem morate podrobneje pogledati različico razširitve.

Torej, vsi smo navajeni, da je različica nečesa sestavljena iz treh številk, ločenih s pikami - Major.Minor.Patch (Številka pomena). Z npm, bowerjem in drugimi dobrotami je pogovor kratek: ali tako ali pa nikakor. Toda Google ponuja naslednje možnosti:

"različica": "1" "različica": "1.0" "različica": "2.10.2" "različica": "3.1.2.4567"

Več o vseh poljih v datoteki manifesta lahko izveste iz dokumentacije.

V našem primeru bo datoteka manifesta videti takole:

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

Iz tega, kar prej ni bilo upoštevano

• __MSG_key__ je Chromov pogled na internacionalizacijo aplikacij (i18n). Lahko se uporablja tako v datoteki manifesta kot v drugih datotekah (celo CSS).
• web_accessible_resources - niz poti virov, ki bodo pozneje uporabljeni v kontekstu spletnih strani. Brez podajanja poti v njem ni mogoče uporabiti ničesar na straneh spletnega mesta, če se takšno vedenje pričakuje.

Razširitveni viri

Velik plus za Chrome karmo je, da lahko zdaj omogočimo razširitev, seveda če so ustvarjeni vsi viri, navedeni v manifest.json.

Mislim, da se ni vredno osredotočati na to, kar je v datotekah commentblocker.css in commentblocker_on.css. Podal bom samo prvega, kjer so navedeni vsi izbirniki, ki vsebujejo komentarje:

@charset "utf-8"; .wall_module .reply_link_wrap .reply_link ( vidnost: skrito !important; ) .wall_module .replies_wrap, #wl_replies_wrap, #wl_reply_form_wrap, #mv_comments_wrap, #mv_your_comment, #pv_comments, #pv_comments_header, #pv_your_com ment (prikaz: nič !import ant; vidnost: skrito ! pomembno; ) body:after ( položaj: fiksno; vsebina: "__MSG_mode_enable__"; zgoraj: 5px; desno: 5px; oblazinjenje: 6px 12px; barva ozadja: #ffc; rob: 1px polno #ddd; z-indeks: 9999 ;)

Kot morda ugibate, je v datoteki commentblocker_on.css ravno nasprotno. Upoštevajte, da neposredno v CSS uporabljam vrstico z vsebino jezikovnega ključa: "__MSG_mode_enable__" . Čas je, da ustvarite datoteko, kamor bodo shranjeni ti ključi.

V korenu naše razširitve ustvarimo imenik _locales ter imenika en in ru, ugnezdena v njem. Nato opišemo naše ključe v datoteki messages.json.

( "app_name": ( "message": "VK Comment Blocker" ), "app_description": ( "message": "Priročen način za skrivanje komentarjev v viru novic in skupinah." ), "browser_action": ( "message ": " Preklopi vrsto komentarja" ), "mode_enable": ( "message": "Brez komentarjev!"), "mode_disable": ( "message": "S komentarji!" ) )

Poleg sporočilnega polja obstajajo še druga polja, o katerih lahko izveste iz dokumentacije.

Zdaj ustvarimo datoteke background.html, najprej takole:

Ozadje

Tukaj je vse enako kot v navadnem HTML - nič nenavadnega. Mimogrede, ni vam treba ustvariti datoteke background.html, saj se ustvari samodejno na podlagi polj v manifest.json.

Zagon razširitve

Razširitev lahko zaženete, ne da bi napisali eno vrstico JavaScripta. Če želite to narediti, morate iti skozi meni:

• Nastavitev in upravljanje Google Chroma (Hamburger)
• Dodatna orodja
• Razširitve
• Potrdite polje zraven »razvijalski način«
• Prenesite nepakirano razširitev
• Izberite mapo s pripono

Razširitev se je naložila in prikazala v meniju. Ja, ja, to je ta "B".

Zdi se, da razširitev, ki smo jo pravkar ustvarili, nima ničesar v glavi (ni logike), vsi komentarji na straneh družbenega omrežja s črko "B" pa so zdaj skriti. Odgovor je v manifest.json, kjer smo v polju "content_scripts": () navedli, na katerih straneh (http://vk.com/* in https://vk.com/*) bo datoteka commentblocker.css biti samodejno vključen, kar skrije vse komentarje. Svetujem vam, da preberete več o matematičnih vzorcih. Na videz je tako preprost, a pod pokrovom je skoraj siv kastrat z vsemi dodatki.

Torej, ne da bi napisali eno vrstico kode, že imamo razširitev, ki opravlja glavno nalogo, ki ji je dodeljena.

Oživljanje širitve

Ostaja še dokončati drugo točko naloge, in sicer implementirati možnost prikaza komentarjev. Skratka, potisniti moramo datoteko commentblocker_on.css, ki bo preglasila pravila datoteke commentblocker.css. In tukaj nam na pomoč priskoči naš vsemogočni JavaScript.

Se spomnite, kaj sem rekel o background.html? Da, da, o tem, da ga ni treba ustvariti. Nekoliko spremenimo manifest.json:

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

Pravkar sem povezal datoteko JavaScript. Nič posebnega. Pojdimo na to datoteko.

JS-ja ne morete preprosto vstaviti v stran. In ista težava ne obstaja le pri skriptih. Zato moramo uporabiti posebno injekcijo executeScript.

Najprej morate ikoni razširitve dodati obravnavo dogodka klika:

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

Kjer je toggleComments funkcija, ki bo v stran vnesla našo datoteko CSS:

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

Mislim, da bodo besede, da ta kos kode preverja, ali je naš CSS povezan na strani, in sklepa, da ga je treba omogočiti ali onemogočiti, dovolj.

Mimogrede, na voljo ni veliko dogodkov, ki pokrivajo različne potrebe. Na primer, obstajajo takšni dogodki:

• onCreated - ustvarjanje zavihka.
• onUpdated - posodabljanje zavihka.
• onRemoved - zapiranje zavihka.

Omeniti velja, da se dogodek onUpdated kliče dvakrat:

• Posodobitev strani;

Na StackOverflow svetujejo preverjanje stanja strani:

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

Zdaj, ko kliknete na ikono, se bo povezala slogovna datoteka, ki bo prikazala komentarje, ponovni klik na ikono pa jih bo spet skril.

zaključki

Mimogrede, velja omeniti mojo polno različico razširitve VK Comment Blocker, ki je na voljo v

Najbolj avtoritativni ljudje na tem področju so Wladimir Palant (on je napisal AdBlock Plus), ... Razširitve za Chrome je lažje napisati kot za Firefox. Zanimivo je, da je najbolj priljubljena razširitev za Chrome »Tyuryaga VKontakte« (po statistiki Yandexa).

Izziv je razviti razširitev, ki se bo odzvala na odpiranje določenih strani HTML v brskalniku. Na primer, spremenite kodo HTML strani spletnega mesta, da bo spletno mesto bolj priročno za uporabo.
Rešitev je bila testirana na Google Chrome 24.x in Chromium 6.x (Debian 6.0.6, amd64).

Rešitev problema

Povzetek glavnih vprašanj, ki se porajajo med pisanjem razširitve crx.

Kako registrirati razširitev?

Kako nastaviti časovnik?

Kako registrirati razširitev?

Za minimalno razširitev so dovolj 4 datoteke:

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

Kje je manifest.json:

( "manifest_version": 2, "name": "Razširitev DomainCheck", "version": "0.1", "background": ( "scripts": ["background.js"]), "content_scripts": [ ( "ujema se ": [ "*://*/*" ], "js": [ "content..png" ) // ni web_accessible_resources )

Datoteka background.js vsebuje kodo, ki se izvede ob zagonu brskalnika. V tem skriptu lahko "obesite" upravljalnik za nalaganje vsebine dokumenta (document.location.href).

Chrome sam ustvari _generated_background_page.html:

Za komunikacijo med background.js in skriptom vsebine lahko uporabite sporočila (request/message) in chrome.extension.getBackgroundPage(). Oglejte si tudi pregled arhitekture razširitev za Chrome. Pravi, da je "skript vsebine nekaj JavaScripta, ki se izvaja v kontekstu strani, ki je bila naložena v brskalnik".

Opomba: Težko je razhroščiti stran v ozadju (background.js) v Chromiumu, ker ni ustreznega. zavihke na strani »Razširitve« v načinu za razvijalce.

Kako preveriti trenutni URL, ga obrezati in izračunati hash?

Kako namestiti obravnavo na DOMContentLoaded je opisano na developer.chrome.com. Glejte tudi dokumentacijo o straneh v ozadju (background.js).

Za vdelavo kode HTML v stran lahko uporabimo nasvet iz članka na Habréju (glej tam za omembo dokumenta globalne spremenljivke), vendar moramo tudi primerjati trenutni URL s seznamom.

Ali je document.location.href zastarel?

Primer pridobivanja popolnoma kvalificiranega imena domene iz 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); opozorilo(l.imegostitelja)

Poddomeno 2. ravni lahko izberete takole:

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

(glejte nasvet na stackoverflow.com).

injekcija sha1.js ...

Kako nastaviti časovnik? Oglejte si vzorčne razširitve: Primer strani z dogodki, background.js:

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

Ta napaka v Chromiumu je bila zaprta 9. januarja 2013, vendar se še ni pojavila v najnovejših različicah za Windows.

Če se vseeno odločite za uporabo »modernih« alarmov, potem je na stackoverflow.com opisano, kako pravilno nastaviti časovnik alarma poljubnega trajanja/obdobja.

Zaradi združljivosti s starejšimi brskalniki je bolje uporabiti window.setInterval() v background.js:

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

Funkcija setTimeout() je ena "budilka".

Disable-Enable chrome extensions zažene background.js na nov način. *) Ali moram označiti isto stvar za vstop v način? in spati.

Kako prenesti config.xml/time.txt in kako jih razčleniti?

Če preprosto prenesete prek XMLHttpRequest, se lahko prikaže naslednje sporočilo: "XMLHttpRequest ne more naložiti http://site/config.xml. Access-Control-Allow-Origin ne dovoljuje izvora http://www.google.ru. ”. To pomeni, da pri zahtevi med domenami niste omogočili možnosti za CORS, .htaccess:

Nabor glav Access-Control-Allow-Origin "*"

Zahteve med domenami lahko dovolite v razširitvi za Chrome in prek dovoljenj v manifest.json:

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

Vendar oba primera ne delujeta za nepakirane razširitve Chromium. Za pakirane razširitve Chromium različice 6.0–7.0 včasih prikaže »Bad magic number« (pri čistem Chromu te napake ni opaziti).
Opomba: Zaščito CORS lahko v Chromiumu zaobidete z možnostjo --disable-web-security:

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

Dodatek: za Chromium morate vrstice v manifest.json spremeniti v naslednje (izrecno navesti domeno in dodati zvezdico na poti):

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

Če želite preprečiti, da bi se spletni inšpektor(?) v Chromu pritoževal nad XMLHttpRequest(), ko je internet izklopljen, lahko storite to:

var req = null; poskusi ( req = new XMLHttpRequest(); ) catch(err) () // glej nasvet na stackoverflow.com

(to je napisano po nasvetu stackoverflow.com). ...

Za odpravljanje napak pri razčlenjevanju lahko uporabite console.log("line"). Nizi sprejemajo vrnitev v prvi vrstico z uporabo "\n".

Razčlenitev XML v JavaScript v razširitvi za chrome poteka takole:

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

Kako uporabiti globalne atomske spremenljivke in podatke tabele v razširitvi za chrome?

Če želite sinhronizirati podatke razširitve z vmesnikom Storage API, potrebujete različico Chroma >= 20. V manifest (manifest.json) morate napisati naslednje:

"premissions": ["storage" ]

Kot pišejo v google skupini "Chromium HTML5", "sem usmeril svojo pozornost na bazo podatkov Web SQL, vendar se zdi, da Web SQL ni več v "aktivnem vzdrževanju", zaradi česar verjamem, da bo opuščen iz specifikacije HTML." Glejte spletno bazo podatkov W3C SQL, opomba za več podrobnosti. Lahko poskusite z osnovnimi koncepti - če želite razširiti prostor za bazo podatkov, lahko uporabite dovoljenja: unlimitedStorage v manifest.json. Za uporabo "Neomejenega prostora za shranjevanje" so na voljo naslednji API-ji brez povezave: 1) Predpomnilnik aplikacij; 2) datotečni sistem; 3) IndexedDB; 4) WebSQL (zastarelo). Za primer uporabe IndexedDB v Chromu glejte. Za primer dela z IndexedDB glejte gist.github.com:

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

Lokacije datotek 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/ skupaj 24 drwx------ 2 anonimen anonimen 4096 7. feb. 03:08 . drwx------ 3 anonimen anonimen 4096 7. feb. 03:08 .. -rw-r--r-- 1 anonimen anonimen 285 7. feb. 03:08 000003.log -rw-r--r-- 1 anonimen anonimen 16. februar 7 03:08 TRENUTNO -rw------- 1 anonimen anonimen 0 7. februar 03:08 ZAKLJUČI -rw-r--r-- 1 anonimen anonimen 46 7. februar 03:08 LOG -rw-r --r-- 1 anonimen anonimen 32. 7. februar 03:08 MANIFEST-000002

Primere uporabe IndexedDB si lahko ogledate v Mozilla Developer Network.

Vstavljanje velikega števila zapisov v IndexedDB je obravnavano na stackoverflow.com.

Če želite dodati elemente v IndexedDB, morate uporabiti

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

V mapi baze podatkov IndexedDB so stare baze podatkov shranjene kot datoteke .sst, nove (trenutne) pa kot datoteke .log.

setVersion() je zastarel. Tu pa obstaja en trik [o onupgradeneeded()]: ...

Kot je navedeno v spletnem dnevniku Parashurama Narasimhana, "Za Chrome: v primeru Chroma se funkcija onupgradeneeded ne pokliče. Pokliče se funkcija onsuccess baze podatkov. Tukaj se preveri obstoj metode setVersion. Če metoda obstaja in je navedena različica večja od različice baze podatkov, se pokliče metoda setVersion. Ob uspehu klica zahteve setVersion prikliče uporabnikovo metodo onupgradeneeded s transakcijo različice. Ko je metoda dokončana, je različica Transaction potrjena z zapiranjem baze podatkov. Podatkovna baza se znova odpre z najnovejšo različico in to se posreduje sistemu onsuccess, ki ga določi uporabnik." (za klic onupgradeneeded() naredim db.setVersion("3")).

Kako pridobiti podatke v content.js:

dbreq.onupgradeneeded = funkcija(dogodek) ( console.log("dbreq.onupgradeneeded"); var db = event.target.result; var tx = db.transaction(["test_db"], "readonly"); var store = tx.objectStore("todo");

Za odpiranje baze podatkov uporabite kodo iz axemclion+jepp (funkcija openReqShim).

Ko odpremo zbirko podatkov IndexedDB, ki ne obstaja, bo ustvarjena s številko različice, različica = 0. V tem primeru se onupgradeneeded() in onsuccess() kličeta zaporedno. Ko prvič pokličemo onupgradeneeded(), je različica že = 1. Ko drugič odpremo [obstoječo bazo podatkov], onupgradeneeded() ni več poklican in številka različice je = 1. (?se ne poveča) Samo dbreq Pokliče se .onsuccess().

Še ena stvar. Piše, da "s Chromom pred 23 morate takšno transakcijo ustvariti ročno s klicem setVersion() - API, ki je bil odstranjen iz specifikacije. Starejšo specifikacijo lahko najdete na: http://www.w3. org /TR/2011/WD-IndexedDB-20110419/", to pomeni, da se izognete napaki "NotFoundError: DOM IDBDatabase Exception 8" v Chromovih dnevnikih, morate poklicati setVersion().

V Chromiumu 6.0.472.63 (59945) implementacija IndexedDB ni stabilna, zato je onemogočena in ne deluje =)

Na splošno morate uporabiti background.js + iframe + izmenjavo s skripti vsebine prek sporočil

Kako ravnati z dogodkom odprtja strani?

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

Content.js:

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

Kako oblikovati HTML kodo strani? Glejte pisanje razširitev za Firefox. Kako zapakiram podaljšek in kam ga namestiti?

Če želite postaviti razširitev v spletno trgovino Chrome, morate Googlu plačati vstopnino v višini 5 USD (potem lahko postavite poljubno število razširitev). Plačate lahko preko VISA, MasterCard, AMEX ali DISCOVER (poleg tega morate pri plačilu navesti svoj polni poštni naslov ter ime in priimek).

Za namestitev razširitve potrebujete Google račun itd. Potrebovali boste posnetek zaslona in reklamno sliko. Kodo razširitve boste morali posodobiti ročno, prek iste spletne trgovine Chrome (kolikor razumem, ni samodejne posodobitve po URL-ju, kot v Firefoxu). V datoteki manifest.json morate posodobiti različico razširitve. Nekaj ​​minut po dodajanju bo razširitev na voljo v iskanju razširitev za Chrome.

Pakiranje razširitve za Linux:

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

Ključne besede: Chromium builds for Windows HOWTO, Stran za prenos Google Chrome, Vzorčne razširitve za Google Chrome.

V internetu je veliko spletnih mest, ki omogočajo pomikanje po strani navzgor brez uporabe miške ali drsnega traku. Toda hkrati še vedno obstajajo mesta, kjer takšne izvedbe ni. "Zakaj ne bi poskusili napisati skripta, ki bi dodal tak gumb na vsa spletna mesta?" - Pomislil sem in se lotil izvajanja. Takšni skripti se imenujejo uporabniški skripti in imajo končnico *.user.js. Lahko ga na primer preberete na Habréju. Na žalost ne gre brez pasti. Obstaja nekaj razlik v implementaciji userjs za različne brskalnike. Osredotočil se bom na opis implementacije našega skripta userjs kot razširitve za brskalnik Google Chrome.

manifest.json

Datoteka, potrebna za razširitev Google Chrome, je manifest.json ki opisuje parametre, poti do zunanjih datotek (*.js, *.css itd.), podporo za različice itd. za širitev. Več o datoteki lahko preberete. V našem primeru je datoteka manifest.json videti takole:

( "manifest_version": 2, "content_scripts": [ ( "exclude_globs": , "include_globs": [ "*" ], "js": [ "jquery.js", "backTopUserJS.user.js" ], "css ": [ "css/style.css" ], "ujema se": [ "http://*/*", "https://*/*" ], "run_at": "document_end" ) ], "converted_from_user_script ": true, "description": "Razširitev uporabniškega skripta za google chrome", "name": "backTopUserJS", "version": "1")

Za udobje uporabljamo knjižnico JQuery, ki smo jo postavili poleg datoteke manifest.json in glavne skriptne datoteke (v našem primeru backTopUserJS.user.js). Njegova vsebina je naslednja:

// ==UserScript== // @name backTopUserJS // @author Aleksandr Filatov // @license MIT // @version 1.0 // ==/UserScript== funkcija main() ( var disp = $(window).scrollTop () > 400 ? "block" : "brez"; var $upButton = $("

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

Mislim, da je scenarij dovolj jasen za podrobno obravnavo. Samo zadnje 3 vrstice so vredne razlage. Pravzaprav je to majhen vdor, ki naš skript vstavi v kodo strani spletnega mesta. Če kdo od vas najde boljši način, lahko svoje popravke zapiše v komentar :)

Namestitev razširitve v brskalnik

V Google Chrome lahko namestite skripte po meri, podobno kot v drugih brskalnikih, a ker Google skrbi za našo varnost, jih je treba zaviti v razširitve brskalnika. Oglejmo si namestitev korak za korakom.

Ustvarite mapo za našo razširitev, kot je ta: C:\MyChromeExtensionUserJS

Za vsako razširitev ustvarimo svoj imenik, na primer v našem primeru ga bomo imenovali C:\MyChromeExtensionUserJS\backTopUserJS . Dodajte razširitvene datoteke v ta imenik.

Pojdite na "O brskalniku Google Chrome" -> zavihek "Razširitve" ali vpišite chrome://extensions/ v naslovno vrstico

Potrdite polje »Razvijalski način«

Kliknite gumb »Naloži nepakirano razširitev« in izberite imenik naše razširitve. Kliknite »V redu«.

Razširitev je nameščena in pripravljena za uporabo. Če želite posodobiti razširitve, potem ko ste jih spremenili, preprosto kliknite gumb »Posodobi razširitev« ali v načinu za razvijalce pritisnite bližnjico na tipkovnici Ctrl+R.

Spodnja črta

Vire skriptov si lahko ogledate na githubu. Skript ne trdi, da je idealen, ampak služi le kot primer in spodbuda za pisanje lastnih skriptov po meri za Google Chrome.