Visi „Chrome“ internetinės parduotuvės elementai yra suskirstyti į programas ir plėtinius. Darysime abu. Mūsų sukurta programa bus rodoma kaip piktograma naujame naršyklės skirtuke ir leis greitai paleisti svetainę. Plėtinys yra specialus mygtukas įrankių juostoje, kurį spustelėjus bus rodomas skydelis su naujausiais svetainės atnaujinimais.

„Google Chrome“ programos kūrimas

1. Atsisiųskite archyvą su plėtinio šablonu iš šios nuorodos.

2. Išpakuokite jį bet kurioje jums patogioje vietoje. Viduje yra failas manifest.json ir piktogramą icon.png.

3. Atidarykite failą manifest.json bloknote ir redaguoti jos turinį. 2 eilutėje turite įvesti savo svetainės pavadinimą, 3 eilutėje – aprašymą (iki 132 simbolių), o 5 ir 7 – svetainės adresą. Išsaugokite atliktus pakeitimus.

4. Pakeiskite piktogramą iš archyvo į savo vaizdą PNG formatu, 128*128 dydžio.

„Google Chrome“ plėtinio kūrimas

Nors plėtinys funkciškai labai skiriasi nuo programos, jo surinkimo algoritmas nėra daug sudėtingesnis.

1. Gaukite plėtinio šabloną iš šios nuorodos.

2. Išpakuokite. Atidarykite manifest.json failą Notepad ir įklijuokite savo svetainės pavadinimą, trumpą aprašą ir plėtinio lango pavadinimą (2, 3 ir 8 eilutės).

3. Atidarykite failą labnol.js ir nurodykite savo svetainės RSS informacijos santraukos adresą.

4. Pakeiskite piktogramą iš archyvo savo atvaizdu PNG formatu, 128*128 dydžio.

Publikacija

Mūsų sukurtas plėtinys ir programa gali būti naudojami dviem būdais. Jei esate svetainės savininkas ir norite į ją pritraukti papildomų naudotojų, galite paskelbti savo darbą „Chrome“ internetinėje parduotuvėje. Norėdami tai padaryti, supakuokite plėtinio ir priedų failus į savo archyvą, eikite į „Chrome“ prietaisų skydelio puslapį ir įkelkite savo darbą į „Google“ parduotuvę. Čia jūsų bus paprašyta įkelti ekrano kopiją, pateikti išplėstinį aprašymą ir nurodyti kai kuriuos kitus parametrus. Puslapis yra rusų kalba, todėl galite lengvai jį suprasti. Tiesiog atminkite, kad norėdami paskelbti plėtinį, turite būti patvirtintas svetainės, kurios plėtinį sukūrėte, savininkas. Be to, už kiekvieną leidinį turėsite įvesti 5 USD starto mokestį.

Jei plėtinius rinkote tik asmeniniam naudojimui, pavyzdžiui, norėdami patogiai stebėti mėgstamos svetainės naujinius, tiesiog atidarykite plėtinių puslapį savo naršyklėje ir įjunkite kūrėjo režimą. Tada spustelėkite mygtuką Atsisiųskite neišpakuotą plėtinį ir nurodykite kelią į aplanką su failais.

Naudodamas siūlomą metodą, bet kuris svetainės ar tinklaraščio savininkas galės sukurti ir įdėti firminį savo šaltinio plėtinį „Google Chrome“ naršyklės plėtinių kataloge. Tai padės lankytojams gauti naujausius atnaujinimus, kurie pritrauks papildomų lankytojų į svetainę ir padidins jos populiarumą.

Visada norėjau žmonėms papasakoti apie įdomias galimybes (technologijas), kurios dabar gali būti prieinamos visiems, bet kažkodėl ne visiems. Taip, tai pasirodė tautologija, bet tai visiškai atspindi mano vidinį pasipiktinimą šia man degančia tema. Kad ir kaip būtų, dabar kalba eina ne apie tai, kaip jie sako. Šiandien kalbėsime apie „Google Chrome“ naršyklės (toliau – „Chrome“) plėtinių kūrimą.

Plėtinys, kurį kursime šiame straipsnyje, yra „Google Chrome“ internetinėje parduotuvėje, tačiau vienintelis skirtumas yra tas, kad jis turi išplėstines funkcijas. Be to, GitHube yra šaltinio kodas, vėlgi su įspėjimu, kad viskas ten parašyta CoffeeScript, o čia istorija bus parašyta su JavaScript. Beje, nesu CoffeeScript gerbėjas ar šalininkas, bet tai gana įdomus ir naudingas dalykas – patariu išbandyti.

Jei kada nors svarstėte idėją sukurti plėtinį, skirtą „Chrome“, „Firefox“, „Maxthon“ ir kitoms naršyklėms, tikriausiai jau pastebėjote, kad mažiausiai pastangų jums reikia skirti „Chrome“. Tai galite patikrinti peržiūrėję atitinkamų naršyklių dokumentaciją.

Problemos formulavimas

Plėtinio rašymas prasideda nuo jo aprašymo ir užduočių, kurias jis išspręs, nustatymo. Kadangi esu sau viršininkas ir galiu praleisti terminus tiek kartų, kiek noriu, man nereikia rašyti techninių specifikacijų – pakanka suprasti, kad:

• Plėtinys turėtų paslėpti visus komentarus VK socialiniame tinkle;
• Plėtinys turi turėti galimybę rodyti komentarus;
• Plėtinys turi turėti galimybę rodyti komentarus konkrečiuose puslapiuose;

Iš pirmo žvilgsnio viskas paprasta ir mes galime tai padaryti. Tačiau straipsnyje mes įgyvendinsime tik pirmuosius du punktus.

Aš numatau klausimus, kurių turinys gali būti maždaug toks: „Kam slėpti komentarus, jei tai yra visa socialinio tinklo esmė?“ Na, tai teisingas klausimas, kuris nusipelno išsamaus atsakymo:

Taip susiklostė aplinkybės, kad pastaruoju metu, kai matau komentarus VK, norisi komentatoriams padovanoti kalnus facepalm. Prenumeruoju daug įvairių viešų puslapių, teminių (interneto kūrimas) ir nelabai. Ir kad ir kaip keistai tai atrodytų, man įdomaus turinio grupėse tampu pati dosniausia, o ne katės (mano atveju pandos). Tokio neprofesionalios ir negražios informacijos srauto komentaruose dar niekur nemačiau, o ginčytis net galvoja. Be to, komentarai naujienų sraute neatrodo estetiškai. Apskritai, pasakyta ir padaryta.

Išplėtimo rėmas

Maloniausia mane nustebino tai, kad pačioje kelionės pradžioje mus pasitinka aprašomasis veiksmų pobūdis. Paprasčiau tariant, turime apibūdinti savo programą, jos teises ir galimybes – tam naudojamas manifest.json failas.

Pirmiausia turite užpildyti tris privalomus laukus:

( "manifest_version": 2, // Pradedant nuo 18 Chrome rinkinio 2, kitu atveju 1 (tokie seni dalykai nepalaikomi) "name": "My Extension", // Plėtinio pavadinimas "version": "versionString" // Plėtinio versija )

Jei su pavadinimu viskas aišku, o manifesto versija dar paprastesnė, tuomet reikia atidžiau pažvelgti į plėtinio versiją.

Taigi, mes visi esame įpratę, kad kažko versija susideda iš trijų skaičių, atskirtų taškais – Major.Minor.Patch (Reiškia skaičių). Su npm, bower ir kitais malonumais pokalbis trumpas: arba taip, arba visai ne. Tačiau „Google“ siūlo šias parinktis:

"versija": "1" "versija": "1.0" "versija": "2.10.2" "versija": "3.1.2.4567"

Daugiau informacijos apie visus manifesto failo laukus rasite dokumentacijoje.

Mūsų atveju manifesto failas atrodys taip:

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

Iš to, kas anksčiau nebuvo svarstoma

• __MSG_key__ yra „Chrome“ požiūris į programų internacionalizavimą (i18n). Galima naudoti ir manifesto faile, ir kituose failuose (net CSS).
• web_accessible_resources – išteklių kelių masyvas, kuris vėliau bus naudojamas tinklalapių kontekste. Jame nenurodžius kelio, nieko negalima naudoti svetainės puslapiuose, jei tikimasi tokio elgesio.

Plėtros ištekliai

Didžiulis „Chrome“ karmos pliusas yra tai, kad dabar galime įjungti plėtinį, žinoma, jei visi manifest.json nurodyti ištekliai buvo sukurti.

Nemanau, kad verta sutelkti dėmesį į tai, kas yra commentblocker.css ir commentblocker_on.css failuose. Pateiksiu tik pirmąjį, kuriame išvardyti visi rinkėjai, kuriuose yra komentarų:

@charset "utf-8"; .wall_module .reply_link_wrap .atsakyti !importuoti skruzdėlę; matomumas: paslėptas ! svarbu; ) body:after ( padėtis: fiksuota; turinys: "__MSG_mode_enable__"; viršuje: 5 piks.; dešinėje: 5 piks.; užpildymas: 6 piks. 12 piks.; fono spalva: #ffc; kraštinė: 1 piks. vientisas #ddd; z-indeksas: 9999 ;)

Commentblocker_on.css faile, kaip galite spėti, yra priešingai. Atminkite, kad tiesiai CSS naudoju eilutę su kalbos rakto turiniu: „__MSG_mode_enable__“ . Atėjo laikas sukurti failą, kuriame bus saugomi šie raktai.

Plėtinio šaknyje sukuriame katalogą _locales ir jame įdėtus katalogus en ir ru. Toliau aprašome savo raktus faile messages.json.

( "app_name": ( "message": "VK Comment Blocker" ), "app_description": ( "message": "Patogus būdas paslėpti komentarus naujienų kanale ir grupėse." ), "browser_action": ( "message" ": " Perjungti komentaro tipą" ), "mode_enable": ( "message": "Komentarų nėra!" ), "mode_disable": ( "message": "Su komentarais!" ) )

Be pranešimo lauko, yra ir kitų laukų, apie kuriuos galite sužinoti iš dokumentacijos.

Dabar sukuriame background.html failus, pirmiausia taip:

Fonas

Čia viskas taip pat, kaip įprastame HTML – nieko neįprasto. Beje, jums nereikia kurti background.html failo, nes jis generuojamas automatiškai pagal manifest.json laukus.

Paleidžiamas plėtinys

Galite paleisti plėtinį neįrašę nė vienos JavaScript eilutės. Norėdami tai padaryti, turite pereiti per meniu:

• „Google Chrome“ („Hamburger“) nustatymas ir tvarkymas
• Papildomi įrankiai
• Plėtiniai
• Pažymėkite laukelį šalia „kūrėjo režimas“
• Atsisiųskite neišpakuotą plėtinį
• Pasirinkite aplanką su plėtiniu

Plėtinys buvo įkeltas ir pasirodė meniu. Taip, taip, tai yra „B“.

Atrodytų, kad mūsų ką tik sukurtas plėtinys neturi nieko galvoje (nėra logikos), o visi komentarai socialinio tinklo puslapiuose su raide „B“ dabar yra paslėpti. Atsakymas slypi manifest.json, kur lauke "content_scripts": () nurodėme, kuriuose puslapiuose (http://vk.com/* ir https://vk.com/*) bus failas commentblocker.css bus automatiškai įtrauktas, o tai paslepia visus komentarus. Patariu daugiau paskaityti apie matematikos modelius. Išvaizda ji tokia paprasta, bet po gaubtu beveik pilka geldelė, su visais varpeliais ir švilpukais.

Taigi, neparašę nė vienos kodo eilutės, jau turime plėtinį, kuris atlieka pagrindinę jam priskirtą užduotį.

Plėtros atgaivinimas

Belieka atlikti antrąjį užduoties punktą, būtent įdiegti galimybę rodyti komentarus. Trumpai tariant, turime stumti failą commentblocker_on.css, kuris nepaisys failo commentblocker.css taisyklių. Ir čia mūsų visagalis JavaScript atskuba mums į pagalbą.

Prisimeni, ką sakiau apie background.html? Taip, taip, apie tai, kad jo nereikia kurti. Šiek tiek pakeiskime manifest.json:

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

Ką tik prijungtas JavaScript failas. Nieko ypatingo. Eikime prie šio failo.

Jūs negalite tiesiog įkelti JS į puslapį. Ir ta pati problema egzistuoja ne tik su scenarijais. Todėl turime naudoti specialią „executeScript“ injekciją.

Pirmiausia prie plėtinio piktogramos turite pridėti paspaudimo įvykių tvarkyklę:

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

Kur toggleComments yra funkcija, kuri įterps mūsų CSS failą į puslapį:

Var toggleComments = function() ( var extensionLink; (document.getElementById("plėtimas") == null) ? (extensionLink = document.createElement("nuoroda"), extensionLink.href = chrome.extension.getURL("/styles/" commentblocker_on.css"), extensionLink.id = "plėtimas", extensionLink.type = "text/css", extensionLink.rel = "stiliaus lapas", document.getElementsByTagName("head").appendChild(extensionLink)) : (dokumentas. getElementsByTagName("head").removeChild(document.getElementById("plėtinys"))) );

Manau, kad pakaks žodžių, kad šis kodo fragmentas patikrina, ar mūsų CSS yra prijungtas puslapyje ir padaro išvadas apie būtinybę jį įjungti arba išjungti.

Beje, renginių, apimančių skirtingus poreikius, nėra daug. Pavyzdžiui, yra tokių įvykių:

• onCreated – skirtuko kūrimas.
• onUpdated – skirtuko atnaujinimas.
• onRemoved – skirtuko uždarymas.

Verta paminėti, kad onUpdated įvykis vadinamas du kartus:

• Puslapio atnaujinimas;

„StackOverflow“ pataria patikrinti puslapio būseną:

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

Dabar spustelėjus piktogramą bus prijungtas stiliaus failas, kuriame bus rodomi komentarai, o dar kartą spustelėjus piktogramą jie vėl bus paslėpti.

išvadas

Beje, verta paminėti mano pilną „VK Comment Blocker“ plėtinio versiją, kurią galima rasti

Autoritetingiausi žmonės šioje srityje yra Wladimiras Palantas (jis parašė AdBlock Plus), ... „Chrome“ plėtinius rašyti lengviau nei „Firefox“. Įdomu tai, kad populiariausias „Chrome“ plėtinys yra „Tyuryaga VKontakte“ (pagal „Yandex“ statistiką).

Iššūkis yra sukurti plėtinį, kuris reaguotų į tam tikrus HTML puslapius, atidaromus naršyklėje. Pavyzdžiui, pakeiskite svetainės puslapio HTML kodą, kad būtų patogiau naudotis šia svetaine.
Sprendimas buvo išbandytas naudojant Google Chrome 24.x ir Chromium 6.x (Debian 6.0.6, amd64).

Problemos sprendimas

Pagrindinių klausimų, kylančių rašant crx plėtinį, santrauka.

Kaip užregistruoti plėtinį?

Kaip nustatyti laikmatį?

Kaip užregistruoti plėtinį?

Minimaliam plėtiniui pakanka 4 failų:

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

Kur yra manifest.json:

( "manifest_version": 2, "name": "DomainCheck plėtinys", "version": "0.1", "background": ( "scripts": ["background.js"]), "content_scripts": [ ( "atitinka" ": [ "*://*/*" ], "js": [ "content..png" ) // nėra web_accessible_resources )

Faile background.js yra kodas, kuris vykdomas paleidus naršyklę. Šiame scenarijuje galite „pakabinti“ dokumento turinio įkėlimo tvarkyklę (document.location.href).

Pati „Chrome“ sukuria _generated_background_page.html:

Norėdami susisiekti tarp background.js ir turinio scenarijaus, galite naudoti pranešimus (užklausa / pranešimas) ir chrome.extension.getBackgroundPage(). Taip pat žr. „Chrome“ plėtinių architektūros apžvalgą. Jame sakoma, kad „turinio scenarijus yra tam tikras JavaScript, kuris vykdomas puslapio, kuris buvo įkeltas į naršyklę, kontekste“.

Pastaba: sunku derinti fono puslapį (background.js) naudojant „Chromium“, nes jo nėra. skirtukus puslapyje „Plėtiniai“ kūrėjo režimu.

Kaip patikrinti esamą URL, jį apkarpyti ir apskaičiuoti maišą?

Kaip įdiegti tvarkyklę DOMContentLoaded, aprašyta developer.chrome.com. Taip pat žr. dokumentaciją apie foninius puslapius (background.js).

Norėdami įterpti HTML kodą į puslapį, galime pasinaudoti patarimu iš straipsnio apie Habré (žr. ten, kur paminėta visuotinio kintamojo dokumentas), tačiau taip pat turime palyginti dabartinį URL su sąrašu.

Ar document.location.href nebenaudojamas?

Visiškai tinkamo domeno vardo gavimo pavyzdys iš 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; grąžinti l; ); var l = getLocation(url); įspėjimas (l.hostname)

Galite pasirinkti 2 lygio padomenį taip:

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

(žr. patarimą stackoverflow.com).

sha1.js injekcija...

Kaip nustatyti laikmatį? Žr. plėtinių pavyzdžius: įvykio puslapio pavyzdys, background.js:

chrome.alarms.create((delayInMinutes: 0,1)); chrome.alarms.onAlarm.addListener(function() ( alert("Laikas" baigiasi!"); ));

Ši „Chromium“ klaida buvo pašalinta 2013 m. sausio 9 d., bet dar nepasirodė naujausiose „Windows“ versijose.

Jei vis tiek nuspręsite naudoti „šiuolaikinius“ aliarmus, kaip teisingai nustatyti savavališkos trukmės / laikotarpio aliarmo laikmatį, aprašyta stackoverflow.com.

Siekiant suderinamumo su senesnėmis naršyklėmis, fone.js geriau naudoti window.setInterval():

var i = 0; window.setInterval(function() ( alert(i); i++), 2*1000); // milisekundėmis

Funkcija setTimeout() yra vienas „žadintuvas“.

Išjungti-Įgalinti chromo plėtinius paleidžia background.js nauju būdu. *) ar man reikia patikrinti tą patį, kad įjungčiau režimą? ir miegoti.

Kaip atsisiųsti config.xml/time.txt ir kaip juos išanalizuoti?

Jei tiesiog atsisiunčiate naudodami XMLHttpRequest, galite gauti tokį pranešimą: „XMLHttpRequest negali įkelti http://site/config.xml. „Access-Control-Allow-Origin“ neleidžia kilmės vietos http://www.google.ru. “. Tai reiškia, kad teikdami užklausą tarp domenų neįjungėte CORS, .htaccess parinkties:

Antraštės rinkinys Prieiga-Control-Allow-Origin "*"

Galite leisti kelių domenų užklausas „Chrome“ plėtinyje ir naudodami leidimus manifest.json:

( "manifesto_versija": 2, ... "leidimai": [ "http://site/" ],

Tačiau abu šie atvejai netinka neišpakuotiems „Chromium“ plėtiniams. Supakuotų plėtinių atveju „Chromium“ 6.0–7.0 versijos kartais rodo „Blogas magiškas skaičius“ (grynai „Chrome“ ši klaida nepastebėta).
Pastaba: „Chromium“ galima apeiti CORS apsaugą naudojant --disable-web-security parinktį:

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

Papildymas: jei naudojate Chromium, manifest.json eilutes turite pakeisti į šias (aiškiai nurodydami domeną ir kelyje pridėdami žvaigždutę):

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

Norėdami neleisti žiniatinklio inspektoriui (?) chrome skųstis dėl XMLHttpRequest(), kai internetas išjungtas, galite atlikti šiuos veiksmus:

var req = null; try ( req = new XMLHttpRequest(); ) catch(err) () // žr. patarimą adresu stackoverflow.com

(tai parašyta remiantis patarimu iš stackoverflow.com). ...

Norėdami derinti analizę, galite naudoti console.log("line"). Stygos priima karietos grąžinimus naudojant „\n“.

XML analizavimas į „JavaScript“ „Chrome“ plėtinyje atliekamas taip:

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

Kaip naudoti visuotinius atominius kintamuosius ir lentelės duomenis chromo plėtinyje?

Norint sinchronizuoti plėtinio duomenis naudojant saugyklos API, reikalinga „Chrome“ versija >= 20. Apraše (manifest.json) turite parašyti:

"prielaidos": ["saugykla"]

Kaip jie rašo „Google“ grupėje „Chromium HTML5“, „Aš atkreipiau dėmesį į žiniatinklio SQL duomenų bazę, bet atrodo, kad žiniatinklio SQL nebėra „aktyvi priežiūra“, todėl manau, kad jis bus pašalintas iš HTML specifikacijų. Daugiau informacijos rasite W3C žiniatinklio SQL duomenų bazėje. Galite pabandyti naudoti pagrindines sąvokas – norėdami išplėsti duomenų bazės erdvę, galite naudoti leidimus: unlimitedStorage faile manifest.json. Norint naudoti „Neribotą saugyklą“, yra šios neprisijungus pasiekiamos API: 1) programos talpykla; 2) Failų sistema; 3) IndexedDB; 4) WebSQL (nebenaudojama). IndexedDB naudojimo Chrome naršyklėje pavyzdį žr. Darbo su IndexedDB pavyzdį rasite gist.github.com:

window.indexedDB = window.indexedDB || window.webkitIndexedDB; var req = indexedDB.open("mano db") req.onror = function() ( console.log("klaida"); )

IndexedDB failų vietos,
„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/ iš viso 24 drwx------ 2 anoniminiai 40 8 06 m. drwx------ 3 anoniminiai anoniminiai 4096 vasario 7 d. 03:08 .. -rw-r--r-- 1 anoniminis anonimas 285 vasario 7 d. 03:08 000003.log -rw-r-r-- 1 anonimas anoniminis vasario 16 d. 7 03:08 DABARTIS -rw------- 1 anoniminis anonimas 0 vasario 7 d. 03:08 LOCK -rw-r--r-- 1 anonimas anonimas 46 vasario 7 03:08 LOG -rw-r --r-- 1 anoniminis anonimas 32 vasario 7 d. 03:08 MANIFESTAS-000002

Galite peržiūrėti „IndexedDB“ naudojimo „Mozilla Developer Network“ pavyzdžius.

Daugelio įrašų įterpimas į IndexedDB aprašytas stackoverflow.com.

Norėdami įtraukti elementus į IndexedDB, turite naudoti

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

IndexedDB duomenų bazės aplanke senos duomenų bazės saugomos kaip .sst failai, o naujos (dabartinės) – kaip .log failai.

setVersion() yra nebenaudojamas. Tačiau čia yra vienas triukas [apie onupgradeneeded()]: ...

Kaip teigiama Parashuram Narasimhano tinklaraštyje, „Chrome: jei naudojate chromą, atnaujinta funkcija nėra iškviečiama. Iškviečiama duomenų bazės sėkmės funkcija. Čia patikrinamas setVersion metodo egzistavimas. Jei metodas egzistuoja, o nurodyta versija yra didesnė už duomenų bazės versiją, iškviečiamas setVersion metodas. Sėkmingas setVersion užklausos iškvietimas iškviečia vartotojo onupgradeneeded metodą su versijos operacija. Kai metodas bus baigtas, versijaTransaction vykdoma uždarant duomenų bazę. Duomenų bazė vėl atidaroma naudojant naujausią versiją ir ji perduodama vartotojo nustatytam sėkmės momentui.

Kaip gauti duomenis iš turinio.js:

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

Norėdami atidaryti duomenų bazę, naudokite kodą iš axemclion+jepp (funkcija openReqShim).

Kai atidarome neegzistuojančią IndexedDB duomenų bazę, ji bus sukurta su versijos numeriu, versija = 0. Šiuo atveju onupgradeneeded() ir onsuccess() iškviečiami nuosekliai. Kai pirmą kartą iškviečiame onupgradeneeded(), versija jau yra = 1. Kai atidarome [esimą duomenų bazę] antrą kartą, onupgradeneeded() nebebus iškviečiamas, o versijos numeris = 1. (?nedidėja) Tik dbreq Iškviečiamas .onsuccess().

Dar vienas dalykas. Jame rašoma, kad „Naudojant „Chrome“ iki 23 m., tokią operaciją reikia sukurti rankiniu būdu, skambinant setVersion() – API, kuri buvo pašalinta iš specifikacijos. Senesnę specifikaciją rasite adresu: http://www.w3. org /TR/2011/WD-IndexedDB-20110419/“, tai yra, norėdami išvengti klaidos „NotFoundError: DOM IDBDatabase Exception 8“ „Chrome“ žurnaluose, turite iškviesti setVersion().

„Chromium 6.0.472.63“ (59945) „IndexedDB“ diegimas nėra stabilus, todėl jis išjungtas ir neveikia =)

Apskritai, jums reikia naudoti background.js + iframe + keistis su turinio scenarijais žinutėmis

Kaip tvarkyti puslapio atidarymo renginį?

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

Content.js:

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

Kaip suformatuoti puslapio HTML kodą? Žr. „Firefox“ plėtinių rašymą. Kaip supakuoti plėtinį ir kur jį įdėti?

Norėdami įdėti plėtinį „Chrome“ internetinėje parduotuvėje, turite sumokėti „Google“ 5 USD įėjimo mokestį (tada galėsite įdėti bet kokį plėtinių skaičių). Mokėti galite per VISA, MasterCard, AMEX arba DISCOVER (be to, mokėdami turite nurodyti visą pašto adresą bei Vardą ir Pavardę).

Norėdami įdėti plėtinį, turite turėti Google paskyrą ir pan. Jums reikės ekrano kopijos ir reklaminio vaizdo. Plėtinio kodą turėsite atnaujinti rankiniu būdu, per tą pačią „Chrome“ internetinę parduotuvę (kaip suprantu, automatinio atnaujinimo pagal URL nėra, kaip „Firefox“). Manifest.json faile turite atnaujinti plėtinio versiją. Praėjus kelioms minutėms po pridėjimo, plėtinys bus pasiekiamas ieškant „Chrome“ plėtinių.

„Linux“ plėtinio pakuotė:

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

Raktiniai žodžiai: „Chromium“ versijos, skirtos „Windows“, KAIP, „Google Chrome“ atsisiuntimo puslapis, „Google Chrome“ plėtinių pavyzdžiai.

Internete yra daug svetainių, kurios suteikia galimybę slinkti puslapiu aukštyn nenaudojant pelės ar slinkties juostos. Tačiau tuo pačiu metu vis dar yra svetainių, kuriose tokio diegimo nėra. „Kodėl nepabandžius parašyti scenarijaus, kuris pridėtų tokį mygtuką prie visų svetainių? – Pagalvojau ir ėmiausi jos įgyvendinimo. Tokie scenarijai vadinami vartotojo scenarijais ir turi plėtinį *.user.js. Pavyzdžiui, galite perskaityti Habré. Deja, to negalima padaryti be spąstų. Yra keletas skirtumų, kaip įdiegti userjs skirtingose ​​​​naršyklėse. Daugiausia dėmesio skirsiu mūsų „userjs“ scenarijaus, kaip „Google Chrome“ naršyklės plėtinio, įgyvendinimui.

manifest.json

„Google Chrome“ plėtiniui reikalingas failas yra manifest.json kuriame aprašomi parametrai, išorinių failų (*.js, *.css ir kt.) keliai, versijų palaikymas ir kt. plėtrai. Galite perskaityti daugiau apie failą. Mūsų atveju manifest.json failas atrodo taip:

( "manifesto_version": 2, "content_scripts": [ ( "exclude_globs": , "include_globs": [ "*" ], "js": [ "jquery.js", "backTopUserJS.user.js" ], "css" ": [ "css/style.css" ], "atitinka": [ "http://*/*", "https://*/*" ], "run_at": "document_end" ) ], "converted_from_user_script" ": true, "description": "Google chrome skirtas vartotojo scenarijaus plėtinys atgal", "name": "backTopUserJS", "version": "1" )

Patogumui naudojame JQuery biblioteką, kurią patalpinome šalia manifest.json failo ir pagrindinio scenarijaus failo (mūsų atveju backTopUserJS.user.js). Jo turinys yra toks:

// ==UserScript== // @name backTopUserJS // @autorius Aleksandr Filatovas // @license MIT // @version 1.0 // ==/UserScript== function main() ( var disp = $(window).scrollTop () > 400 ? "blokas" : "nėra"; var $upButton = $("

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

Manau, kad scenarijus yra pakankamai aiškus, kad jį būtų galima išsamiai apsvarstyti. Tik paskutines 3 eilutes verta paaiškinti. Tiesą sakant, tai yra nedidelis įsilaužimas, kuris įterpia mūsų scenarijų į svetainės puslapio kodą. Jei kas nors iš jūsų ras geresnį būdą, pataisymus galite parašyti komentaruose :)

Plėtinio įdiegimas naršyklėje

„Google Chrome“ galite įdiegti tinkintus scenarijus, panašius į kitas naršykles, bet kadangi „Google“ rūpinasi mūsų saugumu, jie turi būti įtraukti į naršyklės plėtinius. Pažvelkime į diegimą žingsnis po žingsnio.

Sukurkite mūsų plėtinio aplanką taip: C:\MyChromeExtensionUserJS

Kiekvienam plėtiniui sukuriame savo katalogą, pavyzdžiui, mūsų atveju pavadinsime jį C:\MyChromeExtensionUserJS\backTopUserJS . Pridėkite plėtinių failus į šį katalogą.

Eikite į „Apie „Google Chrome“ naršyklę“ -> „Plėtiniai“ arba adreso juostoje parašykite chrome://extensions/

Pažymėkite langelį „Kūrėjo režimas“

Spustelėkite mygtuką „Įkelti neišpakuotą plėtinį“ ir pasirinkite mūsų plėtinio katalogą. Spustelėkite „Gerai“.

Plėtinys įdiegtas ir paruoštas naudoti. Norėdami atnaujinti plėtinius atlikę pakeitimus, tiesiog spustelėkite mygtuką „Atnaujinti plėtinį“ arba kūrėjo režimu paspauskite spartųjį klavišą Ctrl+R.

Apatinė eilutė

Scenarijaus šaltinius galite peržiūrėti „github“. Scenarijus nepretenduoja į idealų, bet yra tik pavyzdys ir postūmis rašyti savo pasirinktinius „Google Chrome“ scenarijus.