23. oktobar 2013. u 13:21 Kreirajte vlastitu ekstenziju za Google Chrome

• Izrada web stranica,
• JavaScript,
• Google Chrome

• Tutorial

Na Habré-u već postoji nekoliko članaka o kreiranju ekstenzija za Chrome, podijelit ću svoje iskustvo, dotaknuvši se glavnih stvari i mjesta na kojima sam imao poteškoća.
Šta vam je potrebno za kreiranje ekstenzije ukratko:
1) Osnovno poznavanje Javascript-a
2) Osnovno poznavanje HTML-a
3) 5$

Pokazat ću vam kako napraviti ekstenziju za Chrome na primjeru mog vlastitog, kreiranog za izračunavanje "izgubljenog vremena" na internetu. Odnosno, ova ekstenzija broji vrijeme provedeno na web lokacijama s mogućnošću određivanja posjećenih stranica prema kategoriji: korisno vrijeme ili izgubljeno vrijeme.

Dakle, krenem sa kreiranjem ekstenzije kreiranjem fascikle za samu ekstenziju u koju ćemo staviti sve fajlove koje kreiramo. Ja ću to nazvati "izgubljeno vrijeme". Zatim kreiram manifest.json fajl, izgleda ovako:

manifest.json
( "manifest_version": 2, "name": "Izgubljeno vrijeme", "version": "1.0", "icons": ( "128": ""), "content_scripts": [ ( "podudaranja": [ "* ://*/*" ], "js": [ "content.js" ] ) ], "pozadina": ( "skripte": ["background.js"]), "dozvole": [ "http:/ /losttime.su/*" ], "browser_action": ( "default_title": "LostTime", "default_icon": "", "default_popup": "popup.html" ) )

Neke od linija trebale bi biti intuitivne, ali evo šta trebate znati:
- Vrijednost manifest_version mora biti “2”;
- U content_scripts pišemo koja skripta će se izvoditi na svim stranicama zasebno;
- U pozadini pišemo opštu skriptu (background script), koja se pokreće kada se pretraživač pokrene;
- U dozvolama upisujemo adresu sajta sa kojeg će informacije biti preuzete.

Sve što ću ja koristiti ne morate koristiti vi, ako vam logično jednostavno ne treba. .

Isti prozor koji možete vidjeti klikom na ikonu ekstenzije je stranica: popup.html.

Meni to izgleda ovako:

popup.html
Izgubljeno vrijeme

Da bi bilo jasnije, ubacio sam opis koda u sam HTML. Organizujem jelovnik jednostavno: na sliku stavljam internu vezu za proširenje.

Pošto sam počeo sa popup.html, odmah ću vam reći o popup.js

Meni izgleda prilično jednostavno:

popup.js
var xhr = novi XMLHttpRequest(); xhr.open("GET", "http://losttime.su/?tmpl=login&token="+localStorage["lostlogin"], istina); // ovdje postoji GET zahtjev za navedenu stranicu xhr.onreadystatechange = function() ( if (xhr.readyState == 4) // ako je sve prošlo dobro, izvrši ono što je u zagradama ( var dannie = document.getElementById(" dannie") ; dannie.innerHTML = xhr.responseText; // dodati primljeni kod u blok sa id=dannie ) ) xhr.send();

Uključio sam i opis koda.

Gore opisani dizajn vam omogućava da izvučete i prikažete sadržaj sa svoje, ili možda ne sa svoje stranice. Ali ono što je važno znati:
- U datoteci manifesta obavezno upišite u polje za dozvole adresu stranice sa koje će informacije biti preuzete.
- Datoteka popup.js je povezana sa pozadinskom skriptom background.js, jer podaci uneseni u lokalnu memoriju u background.js također su vidljivi u popup.js.

Prije nego što pogledamo datoteku pozadinske skripte background.js, pogledajmo datoteku skripte koja se izvodi na svakoj stranici zasebno: content.js

Za mene to izgleda ovako:

content.js
funkcija onBlur() ( // prozor gubi fokus chrome.runtime.sendMessage((site:sait,time:localStorage)); // šalje poruku na background.js localStorage = "0"; ) window.onblur = onBlur; // ako prozor izgubi funkciju fokusa sec() // izvršava se svake sekunde ( if(document.webkitVisibilityState == "visible") // ako je stranica aktivna ( localStorage = parseInt(localStorage,10) +1; // ažuriranje podaci o lokaciji u lokalnoj memoriji ) ) var sait=location.hostname; // na kojoj se stranici nalazi skripta localStorage = "0";

setInterval(sec, 1000) // pokreni funkciju svake sekunde
Mislim da bi najzanimljivija tačka iz mog scenarija trebala biti:
chrome.runtime.sendMessage((site:sait,time:localStorage));
Ovdje se šalje poruka pozadinskoj skripti, odnosno dvije varijable: site:sait - sadrži adresu stranice na kojoj je skripta

time:localStorage - količina vremena provedenog na ovoj skripti.
background.js

Evo, u stvari, ona je. Neću da ulazim u detalje, jer... u principu to nije potrebno. Dovoljno je znati jasan primjer za realizaciju vašeg plana. Ako dodate bilo kakve podatke u lokalnu pohranu u skripti background.js (kao i kolačiće, web sql), onda se isti podaci mogu koristiti u popup.js skripti.

To je u suštini sve što sam želio da vam kažem o kreiranju ekstenzije, ali ću se dotaknuti još jedne tačke u kojoj sam imao poteškoća.

Na stranici postavki, morao sam organizirati povlačenje i ispuštanje web lokacija u različite kolone.

Jer Ako se podaci umetnu pomoću InnerHtml-a, onda se ova opcija neće pojaviti tek tako. Evo šta smo morali da organizujemo:

$("#dannie").on("mouseover", ".sait", function() ( $(this).css(("border":"3px solid #ffffff")); )); $("#dannie").on("mouseout", ".sait", function() ( $(this).css(("border":"3px puna crna")); )); $("#dannie").on("mousedown", ".sait", function() ( $(this).css(("border":"3px puna crna")); )); $("#dannie").on("mouseover", ".sait", function() ( $(".sait").draggable(( helper:"clone" )); ));
umjesto uobičajenog:
$(".sait").mouseover(function())( $("#"+this.id).css(("border":"3px solid #ffffff")); )); $(".sait").mouseout(function())( $("#"+this.id).css(("border":"3px puna crna")); )); $(".sait").mousedown(function())( $("#"+this.id).css(("border":"0px puna crna")); ));

$(".sait").draggable(( pomoćnik:"klon", ));

Na Internetu postoje mnoge stranice koje pružaju mogućnost pomicanja stranice prema gore bez korištenja miša ili trake za pomicanje. Ali u isto vrijeme, još uvijek postoje lokacije na kojima nema takve implementacije. "Zašto ne pokušate napisati skriptu koja bi dodala takvo dugme na sve stranice?" - Razmislio sam i krenuo u realizaciju. Takve skripte nazivaju se korisničkim skriptama i imaju ekstenziju *.user.js. Na primjer, možete ga pročitati na Habréu. Nažalost, to se ne može učiniti bez zamki. Postoje neke razlike u implementaciji userjs-a za različite pretraživače. Fokusiraću se na opisivanje implementacije naše userjs skripte kao ekstenzije za Google Chrome pretraživač.

manifest.json manifest.json Fajl potreban za ekstenziju Google Chrome je

( "manifest_version": 2, "content_scripts": [ ( "exclude_globs": , "include_globs": [ "*" ], "js": [ "jquery.js", "backTopUserJS.user.js" ], "css ": [ "css/style.css" ], "podudaranja": [ "http://*/*", "https://*/*" ], "run_at": "dokument_end" ) ], "pretvoreno_iz_korisničkog_scripta ": true, "description": "Back top userscript ekstenzija za google chrome", "name": "backTopUserJS", "version": "1" )

Radi praktičnosti koristimo JQuery biblioteku, koju smo postavili pored datoteke manifest.json i glavne datoteke skripte (u našem slučaju backTopUserJS.user.js). Njegov sadržaj je sljedeći:

// ==UserScript== // @name backTopUserJS // @autor Aleksandr Filatov // @license MIT // @verzija 1.0 // ==/UserScript== funkcija main() ( var disp = $(window).scrollTop () > 400 "blok" : "nema" var $upButton = $(");

"); $(document).find("body").append($upButton); $upButton.click(function () ( $("html, body").animate(( scrollTop: 0 ), "sporo" )); $(window).scroll() (if ($(window).scrollTop() > 400) $upButton.fadeIn("slow"); )); var script = document.createElement("script"); appendChild(skripta);

Mislim da je scenario dovoljno jasan da se detaljno razmotri. Samo zadnja 3 reda su vrijedna objašnjenja. Zapravo, ovo je mali hak koji ubacuje našu skriptu u kod stranice stranice. Ako neko od vas pronađe bolji način, može napisati svoje popravke u komentarima :)

Instaliranje ekstenzije u pretraživač

Možete instalirati prilagođene skripte u Google Chrome, slično drugim pretraživačima, ali pošto Google brine o našoj sigurnosti, one moraju biti umotane u ekstenzije pretraživača. Pogledajmo instalaciju korak po korak.

Kreirajte folder za našu ekstenziju ovako: C:\MyChromeExtensionUserJS

Za svaku ekstenziju kreiramo vlastiti direktorij, na primjer u našem slučaju ćemo ga zvati C:\MyChromeExtensionUserJS\backTopUserJS. Dodajte datoteke ekstenzija u ovaj direktorij.

Idite na "O pregledniku Google Chrome" -> karticu "Extensions" ili upišite chrome://extensions/ u adresnu traku

Označite okvir "Način programera"

Kliknite na dugme "Učitaj raspakiranu ekstenziju" i odaberite direktorij naše ekstenzije. Kliknite na "OK".

Ekstenzija je instalirana i spremna za korištenje. Da biste ažurirali ekstenzije nakon što ste unijeli izmjene, jednostavno kliknite na dugme "Ažuriraj ekstenziju" ili, u modu programera, pritisnite prečicu na tastaturi Ctrl+R.

Zaključak

Možete pogledati izvore skripte na githubu. Skripta ne tvrdi da je idealna, već služi samo kao primjer i poticaj za pisanje vlastitih prilagođenih skripti za Google Chrome.

Pisanje ekstenzije za Google Chrome nije teško. Ali prilikom pisanja prve ekstenzije mogu se (i pojavljuju se) pitanja. Većina priručnika za pisanje prve ekstenzije dizajnirana je za korištenje manifesta prve verzije, čija podrška će prestati u bliskoj budućnosti.

Ovaj članak će pokriti:

• Kako napraviti manifest v.2
• Kako raditi sa udaljenim resursima
• Kako raditi sa kolačićima
• Kako raditi s lokalnom pohranom
• Kako raditi sa obavještenjima

Uvod

Do kraja članka imat ćemo gotovu ekstenziju organizatora, koja će imati polje za dodavanje novog zadatka, kao i listu zadataka za tekući dan. Navedimo sve uslove za organizatora:

• Mora imati polje za dodavanje događaja (datum, vrijeme, događaj)
• Treba prikazati sve zadatke za tekući dan, sortirane po vremenu
• Svi prošli događaji trebaju biti precrtani
• Treba da ima polje za unos vremena koliko dugo treba da se prikazuje obaveštenje, kao i kvadratić koji dozvoljava i zabranjuje prikazivanje obaveštenja
• Trebalo bi prikazati obavještenje o predstojećem događaju određeno vrijeme prije događaja

Manifest

Krenimo sa kreiranjem ekstenzije od samog početka, odnosno od manifesta. Manifest je ista datoteka u kojoj su upisani svi parametri ekstenzije. Naziv, opis, verzija, dozvola za pristup stranicama, dozvola za korištenje kolačića, obavijesti, lokalna pohrana. Općenito, manifest je mozak ekspanzije. Kreirajte datoteku manifest.json. Manifest je jedini fajl koji mora imati unapred definisano ime. Ovaj fajl ima tri obavezna polja:

manifest.json

(“name”: “Proširenje organizatora”, // Naziv ekstenzije “verzija”: “1.0”, // Verzija proširenja. “manifest_version”: 2 // verzija manifesta)

Ovdje postoji nekoliko pravila:

• Verzija manifesta mora biti cijeli broj, to jest, mora biti napisana kao 2, a ne kao “2”.
• Verzija ekstenzije treba da bude string, ali da sadrži samo brojeve i tačke, to jest, "1.0" je dobro, ali 1.0 i "0.9 beta" su loše.

Kada su obavezna polja završena, idemo na kreiranje iskačućeg prozora ekstenzije. Da bi se prozor otvorio kada kliknete na ikonu, morate dodati polje "browser_action" u manifest.

manifest.json

( … "browser_action": ( "default_title": "Otvori organizator", // Naslov. Vidljivo je ako zadržite pokazivač iznad ikone u pretraživaču "default_icon": "icon_small.png", // Put do ikone ekstenzije " default_popup": " popup.html" // Put do stranice sa skočnim prozorom ) )

Sada napravimo iskačući prozor. Ovo je obična html stranica koja može biti bilo koje veličine i boje, bez trikova. Nazovimo datoteku “popup.html”. Nije dovoljno kreirati ovu datoteku - ona mora biti navedena u manifestu. To smo i uradili: "default_popup": "popup.html".

popup.html

Radi!

Dodavanje ekstenzije u pretraživač

Sada je vrijeme da testiramo funkcionalnost naše ekstenzije. Da biste to učinili, preuzmite ekstenziju u pretraživač. Otvorite meni ekstenzija u Chromeu. Stavili smo pticu na „režim za programere“.

Nakon toga će se pojaviti tri dugmeta. Kliknite na “Učitaj raspakovanu ekstenziju...”. Odaberite fasciklu sa datotekama ekstenzije. Nakon toga će se pojaviti naša ekstenzija. Ako je sve ispravno, onda kada kliknete na ikonu, pojavit će se prozor:

Povezivanje skripti

Sada možemo doći do zabavnih stvari. Hajde da povežemo dva javascript fajla. Prvi je popup.js, drugi je jquery. Sa prvim neće biti problema, ali ćemo povezati ne lokalni jquery, već udaljeni, preuzet sa adrese ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js. Problemi nastaju zbog činjenice da ekstenzija po defaultu nema pristup resursima trećih strana. Da biste dobili pristup, morate to navesti u manifestu. Pristup nečemu je naznačen u polju "dozvole". Također, za udaljene skripte i css, morate navesti dostupne udaljene resurse.

manifest.json

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

Sada povežimo ove skripte sa popup.html

popup.html

Skladištenje

Koristeći pohranu u Chromeu, možete pohraniti korisničke podatke. I upravo u skladištu naše proširenje će pohraniti buduće događaje. Dva su razloga za to. Prvo, podaci pohranjeni u skladištu mogu se sinkronizirati ako se prijavite na pretraživač. I drugo, podaci se mogu pohraniti ne samo kao string, kao u kolačićima, već u bilo kojem obliku, odnosno mogu se pohraniti i nizovi i objekti. Da bi ovo funkcioniralo, otvorimo pristup skladištu u manifestu.

manifest.json

( ... "dozvole": [ ... "pohrana" ] ... )

Sada redizajnirajmo iskačući prozor. U iskačućem prozoru biće polje sa današnjim datumom, tri unosa za datum, vreme i opis novog događaja, dugme za dodavanje novog događaja, kao i lista svih događaja za danas.

popup.html

Datum

Datum	Vrijeme	Zadatak

I odmah dodajte prikaz datuma u #today_date blok.

popup.js

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

Trebalo bi izgledati ovako:

Dakle, kada kliknemo na dugme „+“, treba dodati događaj. Na početku fajla ćemo deklarisati globalnu varijablu skladištenja - objekat za rad sa skladištem, kao i globalni niz zadataka za skladištenje događaja.

popup.js

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

Funkcija validacije provjerava da li je datum napisan u formatu d.m.yyyy, a vrijeme u formatu hh:mm, kao i da opis događaja sadrži najmanje tri znaka.

popup.js

Var validateField = function(val, type)( if(type == "date")( var date = val.split("."); var year = new Date(); year = year.getFullYear(); if( date.length == 3 && parseInt(datum) == datum && date = 3)( return val; ) return null )

Sredili smo dodatak, idemo na prijem događaja za danas. Da bismo to učinili, trebamo dobiti sve događaje iz baze podataka, odabrati samo današnje događaje od svih i sortirati ih po vremenu u rastućem redoslijedu.

popup.js

$(function())( … var now_hours = today.getHours()< 10 ? "0" + today.getHours() : today.getHours(); var now_minutes = today.getMinutes() < 10 ? "0" + today.getMinutes() : today.getMinutes(); var now_time = now_hours + "" + now_minutes; storage.get("tasks",function(items){ if(items.tasks){ tasks = items.tasks; var today_tasks = getTodayTasks(tasks); if(today_tasks.length >0)( for(var i u današnjim_zadacima)( var this_time = today_tasks[i].time.replace(":", ""); var add = this_time > now_time ? "" : " class="done""; var add_html = ""+današnji_zadaci[i].vrijeme+" "+današnji_zadaci[i].zadatak+""; $("ul").append(add_html); ) ) ) )); … ));

Funkcija getTodayTasks() vraća samo događaje sa današnjim datumom sa opšte liste.

popup.js

Var getTodayTasks = function(tasks)(var today_tasks = new Array(); var today = new Date(); var today_date = today.getDate()+"."+(today.getMonth() + 1)+ "." + today.getFullYear()(var i u zadacima)( if(zadaci[i].datum == današnji_datum)(današnji_zadaci = zadaci[i];) ) if(današnji_zadaci.dužina > 0)(današnji_zadaci = sortiranje zadataka(); Today_tasks);

Funkcija sortTasks() sortira događaje uzlaznim redoslijedom vremena.

popup.js

Var sortTasks = function(tasks)( if(tasks.length > 0)(var swapped = true; while (zamijenjen) (swapped = false; for (var i=0; i< tasks.length-1; i++) { var this_time = tasks[i].time.replace(":", ""); var next_time = tasks.time.replace(":", ""); if (this_time >next_time) ( var temp = tasks[i]; tasks[i] = tasks; tasks = temp; swapped = true; ) ) ) vratiti zadatke; )

Obavještenja

Vrijeme je da konfigurirate prikaz obavještenja na ekranu. Dodajmo poseban okvir za potvrdu u iskačući prozor. Ako je ovo polje za potvrdu označeno, obavještenja će biti prikazana; Dodaćemo i unos teksta. Broj u ovom unosu će pokazati koliko će vremena prije događaja biti prikazano obavještenje. Odnosno, ako imamo događaj zakazan za 19:00, ovaj unos teksta će sadržavati 5, što znači da će se obavijest pojaviti u 18:55. Dodajmo kod sa ovim ulazima u popup.html

popup.html

Prikaži obavještenja

Hajde sada da shvatimo kako će ovo funkcionisati. Kada kliknete na potvrdni okvir, njegov označeni atribut će biti označen, a vrijednost atributa će biti zapisana u kolačić “show_notifications”. Pređimo na unos teksta. Kada se njegova vrijednost promijeni, nova vrijednost će biti potvrđena, ako je cijeli broj i ne više od 120, novu vrijednost upisujemo u kolačić “when_to_notify”.

Ali da bi ovo funkcioniralo za nas, moramo otvoriti pristup kolačićima. Da biste to učinili, idite na manifest.json i dodajte ga u "dozvole"

manifest.json

( ... "dozvole": [ ... "kolačići" ] ... )

Sada možete pokrenuti skriptu. Idemo na popup.js. Prvo, postavimo početne vrijednosti u ulazima. Podrazumevano, polje za potvrdu nije označeno, odnosno obaveštenja se ne prikazuju, a vreme je 0. Kada kliknete na kvadratić, vrednost kolačića “show_notifications” će se promeniti. Prilikom promjene vrijednosti u tekstualnom polju, vrijednost kolačića “when_to_notify” će se promijeniti.

popup.js

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

Pogledajmo bliže funkcije. Počnimo s funkcijama rada s kolačićima. U ovom slučaju, gotove funkcije su preuzete sa w3schools.com.

popup.js

Var setCookie = function(c_name,value,exdays)( /* *Preuzeto sa http://www.w3schools.com/js/js_cookies.asp */ var exdate=new Date(); exdate.setDate(exdate.getDate( ) + exdays var c_value(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString()); getCookie = function(c_name)(Pozovi Vasju P. /* *Preuzeto sa http://www.w3schools.com/js/js_cookies.asp */ var i,x,y,ARRcookies=document.cookie.split(" ; "); za (i=0;i