23. oktobra 2013. u 13:21

Kreirajte svoje proširenje za Google Chrome

• Razvoj web stranica,
• Javascript
• Google hrom

• Tutorial

Na čvorištu se već nalazi nekoliko članaka o stvaranju ekstenzija za krom, podijelit ću svoje iskustvo, dotaknuvši se glavnih stvari i mjesta na kojima sam imao poteškoća.
  Šta je potrebno za izradu proširenja ukratko:
  1) Osnovno znanje o Javascript-u
  2) Osnovno znanje HTML-a
3) 5$

Pokazaću vam kako da napravite ekstenziju za hrom koristeći sopstveni primer, osmišljen za izračunavanje "izgubljenog vremena" na Internetu. Odnosno, ovo proširenje uzima u obzir vrijeme provedeno na web lokacijama s mogućnošću određivanja web lokacija koje posjećuje kategorija: dobro vrijeme ili izgubljeno vrijeme.

  Dakle, započinjem s stvaranjem nastavka kreiranjem mape samog proširenja, u koju ćemo staviti sve datoteke koje stvorimo. Nazvat ću je "izgubljenim vremenom". Zatim kreiram manifest.json datoteku, izgleda ovako:

manifest.json
  ("manifest_version": 2, "name": "Izgubljeno vrijeme", "verzija": "1.0", "ikone": ("128": ""), "content_scripts": [("podudara se": ["* : // * / * "]," js ": [" content.js "])]," background ": (" skripte ": [" background.js "])," dozvole ": [" http: / /losttime.su/* "]," pretraživač ": (" default_title ":" LostTime "," default_icon ":" "," default_popup ":" popup.html "))

Neki bi redovi trebali biti intuitivni, ali ono što morate znati:
   - vrijednost manifest_version mora nužno biti "2";
   - u content_scripts pišemo koja će se skripta izvoditi na svim stranicama odvojeno;
   - u pozadini napišite zajedničku skriptu (pozadinska skripta) koja se pokreće kada se pokrene pretraživač;
   - U dozvolama pišemo adresu web stranice s koje će informacije biti preuzete.

Sve što ću iskoristiti nije potrebno da biste ga koristili, ako vam jednostavno ne treba logično. .

Isti prozor koji možete vidjeti klikom na ikonu proširenja je i stranica: popup.html.

To meni izgleda ovako:

popup.html

Da bih bio jasniji, umetnuo sam opis koda u sam HTML. Izbornik organiziram jednostavno: na sliku stavljam internu vezu za proširenje.

Od kada sam započeo s populap.html, odmah ću vam reći o popup.js

Kod mene to izgleda vrlo jednostavno:

popup.js
  var xhr \u003d novi XMLHttpRequest (); xhr.open ("GET", "http://losttime.su/?tmpl\u003dlogin&token\u003d"+localStorage evidence"lostlogin"], istina); // ovdje se GOET zahtjev šalje na navedenu stranicu xhr.onreadystatechange \u003d function () (ako je (xhr.readyState \u003d\u003d 4) // ako je sve prošlo dobro, učinite to u zagradama (var dannie \u003d document.getElementById ("dannie") ; dannie.innerHTML \u003d xhr.responseText; // dodaj primljeni kod u blok sa id \u003d dannie)) xhr.send ();

Umetak je i opis koda.

Upravo gore opisani dizajn omogućava vam povlačenje i prikazivanje sadržaja sa vaše, a možda i ne s vaše web lokacije. Ali ono što je važno znati:
   - U manifestnu datoteku obavezno upišite adresu web mjesta s koje će podatke preuzeti u polje s dozvolama.
   - Datoteka popup.js povezana je sa skriptu pozadine background.js, jer podaci pohranjeni u lokalnoj pohrani na background.js vidljivi su i na popup.js.

Prije nego što pogledate pozadinsku datoteku skripte background.js, razmislite o datoteci skripte koja se pokreće na svakoj stranici zasebno: content.js

To meni izgleda ovako:

content.js
  funkcija onBlur () (// prozor gubi fokus chrome.runtime.sendMessage ((site: sait, vrijeme: localStorage)); // pošalji poruku background.js localStorage \u003d "0";) window.onblur \u003d onBlur; // ako prozor izgubi funkciju fokusiranja sec () // pokreće se svake sekunde (ako (document.webkitVisibilityState \u003d\u003d "vidljivo") // ako je stranica aktivna (localStorage \u003d parseInt (localStorage, 10) +1; // ažuriraj podatke web mjesta) u lokalnom skladištu)) var sait \u003d location.hostname; // na kojoj je web lokaciji skripta localStorage \u003d "0"; setInterval (sec, 1000); // pokretanje funkcije svake sekunde

Mislim da bi najzanimljivija stvar iz mog scenarija trebala biti:
   chrome.runtime.sendMessage ((web stranica: sait, vrijeme: localStorage));
  Ovde se pozadinska poruka šalje skripti, naime dve varijable: site: sait - sadrži adresu web lokacije na kojoj je skripta
   vrijeme: localStorage - vrijeme provedeno na ovoj skripti.

background.js
  chrome.runtime.onMessage.addListener (funkcija (zahtjev, pošiljalac, sendResponse) (var a \u003d zahtjev.site; // podaci o web mjestu var b \u003d request.time; // podaci o vremenu provedenom // ovdje radimo s ovim podacima koji želite.));

Evo je, ustvari, ona. Neću detaljno analizirati ništa, jer to, u principu, nije neophodno. Dovoljno je znati dobar primjer za provođenje plana. Ako dodate bilo kakve podatke u lokalnu pohranu u skripti background.js (kao i kolačiće, web sql), isti se podaci mogu koristiti i u skripti popup.js.

To je sve što sam želio reći o stvaranju produžetka, ali dotaknut ću se i druge točke u kojoj sam imao poteškoća.

Na stranici postavki trebao sam organizirati povlačenje i ispuštanje web lokacija u različite stupce.

Jer podaci se ubacuju pomoću InnerHtml-a, onda se ova značajka jednostavno ne pojavljuje. Evo šta sam morao da organizujem:

  $ ("# dannie"). on ("prelazak mišem", ".sait", funkcija () ($ (ovo) .css (("granica": "3px solid #ffffff"));)); $ ("# dannie"). on ("mouseout", ".sait", function () ($ (this) .css (("border": "3px solid black"));)); $ ("# dannie"). on ("mousedown", ".sait", function () ($ (this) .css (("border": "3px solid black"));)); $ ("# dannie"). on ("prelazak mišem", ".sait", funkcija () ($ (". sait"). draggable ((pomagač: "klon"));));
  umjesto uobičajenog:
  $ (". sait"). mouseover (function () ($ ("#" + this.id) .css (("border": "3px solid #ffffff"));)); $ (". sait"). mouseout (function () ($ ("#" + this.id) .css (("border": "3px solid black"));)); $ (". sait"). mousedown (funkcija () ($ ("#" + this.id) .css (("border": "0px solid black"));)); $ (". sait"). draggable ((pomagač: "klon",));

iMacros je proširenje koje pomaže u testiranju web stranica. Umjesto da samostalno obavlja iste radnje na stranici, programer samo mora upisati potrebni slijed akcija u iMacrosu i pokrenuti proširenje kad je to potrebno.

Ovo proširenje može raditi sa web lokacijama implementiranim pomoću Java, Flash, Flex, Ajax i Silverlight tehnologija.

2. Igralište za fontove

Proširenje za one koji se vole "igrati s fontovima" - omogućava vam da eksperimentirate sa čitavim nizom fontova iz biblioteke Google fontova bez izmjene koda stranice. Možete promijeniti ne samo sam font, već i njegovu veličinu, stil pisanja i tako dalje.

3. Projekt Naptha

Proširenje za Google Chrome, koje vam omogućuje odabir i kopiranje teksta čak i sa slika, bit će korisno, prema Cretive Bloqu, svima koji su se morali baviti ugrađenim tekstom barem jednom u svom poslu.

4. Kakav font

Proširenje koje vam omogućava da odmah odredite koji se font koristi na određenoj stranici, bez izvršavanja gotovo ikakvih dodatnih radnji - zadržavanjem miša iznad miša iznad natpisa.

5. Ylow

YSlow je alat koji ne samo da provjerava brzinu preuzimanja određene web stranice, nego i kaže programeru da je usporava. Da biste to učinili, proširenje provjerava web mjesto u skladu sa 23 od 34 pravila o performansama koje je formulisao Yahoo tim.

6. Web Developer

Čitav niz korisnih alata za upravljanje elementima web mjesta - na primjer, za analizu web resursa i izgleda, testiranje koda i trenutnu promjenu parametara i izgleda stranice.

7. Kontrolni popis za web programere

Proširenje za automatsko provjeravanje ispunjava li web mjesto osnovnim načelima SEO-a, je li dovoljno produktivno i prilagođeno korisniku. Rezultati provjere predstavljeni su u obliku svojevrsne kontrolne liste - možete vidjeti detaljnije informacije i preporuke za svaku od preostalih stavki, kao i odmah popraviti pogreške.

8. DevTools Autosave

Omogućuje vam da automatski spremite sve izmjene u kodu stranice pomoću alata Chrome DevTools. Kao što autor materijala napominje, alat pomaže programerima da uštede puno vremena.

9. Instant žični okvir

Proširenje s kojim možete "pretvoriti" bilo koju stranicu u strukturni dijagram izgleda materijala - žičani okvir. Omogućuje programerima i web dizajnerima bez napuštanja preglednika da se upoznaju sa izgledom bilo koje stranice na mreži.

10. Ripple emulator

Ripple Emulator je proširenje emulatora za Google Chrome koje vam omogućuje testiranje web stranica na različitim mobilnim platformama različitih razlučivosti ekrana. Može se koristiti u kombinaciji s drugim proširenjima za testiranje i uklanjanje pogrešaka resursa.

11. Streak

Streak je proširenje koje vam omogućuje da pretvorite pretinac za poštu u Gmail u CRM sistem. Možete pratiti status transakcija i pregovora koji se vode u e-pošti s dobavljačima, koristiti Streak za obradu korisničkih zahtjeva za proizvod i praćenje ispravki poslanih grešaka i tako dalje.

12. Traži Stackoverflow

Proširenje za brzo pretraživanje popularnog resursa za programere Stack Overflow.

13. PHP Ninja priručnik

Omogućuje trenutni pristup PHP 5.5 dokumentaciji iz pregledača.

14. PerfectPixel

PerfectPixel je proširenje za Google Chrome. Omogućuje vam „presvlačenje“ prozirne mreže na web stranici i provjeru zadanih udaljenosti na njoj. Možete prekrivati \u200b\u200bdruge slike - na primjer, početni izgled - kako biste bili sigurni da se rezultirajuća stranica točno podudara s njom:

15. Code Cola

Alat za pregled izvornog koda stranica i uređivanje CSS koda.

Prevlačenjem klizača možete promijeniti sjenu, obim okvira i tako dalje. Nakon što izvršite izmjene, možete kopirati rezultirajući kôd i zamijeniti ga u kodu web mjesta.

16. Chrome Sniffer

Proširenje preglednika koje određuje koje se biblioteke, okviri ili CMS JavaScript koriste na resursu.

17. Korisnički agent-prebacivač

Korisnički agent Switcher je proširenje koje vam omogućuje da "maskirate" preglednik Google Chrome pod Internet Explorer, Opera ili bilo koji drugi preglednik.

18. IE Tab

Ugrađeni emulator Internet Explorer za Chrome.

19. PicMonkey

Jednostavan i besplatan online uređivač slika. Omogućuje vam "snimanje" slike ili snimke zaslona preglednika - i odmah ih uredite pomoću proširenja za Chrome.

20. Chrome daltonizirati

Proširenje koje pomaže u prilagođavanju web usluga za korisnike koji su slijepi u boji - pokazuje programeru kako web mjesto vide oni koji pate od ove bolesti. Omogućuje web dizajnerima i programerima stvaranje povoljnijih usluga.

21. Ruler

Jednostavan alat koji vam pomaže da odredite visinu, širinu i položaj bilo kojeg elementa na stranici.

22. Provjerite moje veze

Proširenje koje provjerava web stranicu na neispravne ili pogrešne veze.

23. Flickr Tab

Proširenje koje pomaže ne toliko u razvoju koliko u pronalaženju inspiracije i dobrih fotografija. Prikazuje na svakoj novoj kartici u pregledniku Google Chrome po jednu sliku s usluge Flickr. Kada kliknete na njega, korisnik ide na stranicu autora, gdje se može upoznati s drugim njegovim djelima.

24. Google Art Project

Proširenje preglednika slično prethodnom dodatku na ovoj listi - samo umjesto fotografija iz Flickra na novoj kartici korisnik vidi prepoznata umjetnička djela - na primjer, slike Van Gogha ili Maneta.

25. Čuvanje podataka

Googleovo službeno proširenje za sažimanje prometa, koje uključuje uštedu prometa u pregledniku Google Chrome.

• Tutorial

Na čvorištu se već nalazi nekoliko članaka o stvaranju ekstenzija za krom, podijelit ću svoje iskustvo, dotaknuvši se glavnih stvari i mjesta na kojima sam imao poteškoća.
  Šta je potrebno za izradu proširenja ukratko:
  1) Osnovno znanje o Javascript-u
  2) Osnovno znanje HTML-a
3) 5$

Pokazaću vam kako da napravite ekstenziju za hrom koristeći sopstveni primer, osmišljen za izračunavanje "izgubljenog vremena" na Internetu. Odnosno, ovo proširenje uzima u obzir vrijeme provedeno na web lokacijama s mogućnošću određivanja web lokacija koje posjećuje kategorija: dobro vrijeme ili izgubljeno vrijeme.

  Dakle, započinjem s stvaranjem nastavka kreiranjem mape samog proširenja, u koju ćemo staviti sve datoteke koje stvorimo. Nazvat ću je "izgubljenim vremenom". Zatim kreiram manifest.json datoteku, izgleda ovako:

manifest.json
  ("manifest_version": 2, "name": "Izgubljeno vrijeme", "verzija": "1.0", "ikone": ("128": ""), "content_scripts": [("podudara se": ["* : // * / * "]," js ": [" content.js "])]," background ": (" skripte ": [" background.js "])," dozvole ": [" http: / /losttime.su/* "]," pretraživač ": (" default_title ":" LostTime "," default_icon ":" "," default_popup ":" popup.html "))

Neki bi redovi trebali biti intuitivni, ali ono što morate znati:
   - vrijednost manifest_version mora nužno biti "2";
   - u content_scripts pišemo koja će se skripta izvoditi na svim stranicama odvojeno;
   - u pozadini napišite zajedničku skriptu (pozadinska skripta) koja se pokreće kada se pokrene pretraživač;
   - U dozvolama pišemo adresu web stranice s koje će informacije biti preuzete.

Sve što ću iskoristiti nije potrebno da biste ga koristili, ako vam jednostavno ne treba logično. .

Isti prozor koji možete vidjeti klikom na ikonu proširenja je i stranica: popup.html.

To meni izgleda ovako:

popup.html

Da bih bio jasniji, umetnuo sam opis koda u sam HTML. Izbornik organiziram jednostavno: na sliku stavljam internu vezu za proširenje.

Od kada sam započeo s populap.html, odmah ću vam reći o popup.js

Kod mene to izgleda vrlo jednostavno:

popup.js
  var xhr \u003d novi XMLHttpRequest (); xhr.open ("GET", "http://losttime.su/?tmpl\u003dlogin&token\u003d"+localStorage evidence"lostlogin"], istina); // ovdje se GOET zahtjev šalje na navedenu stranicu xhr.onreadystatechange \u003d function () (ako je (xhr.readyState \u003d\u003d 4) // ako je sve prošlo dobro, učinite to u zagradama (var dannie \u003d document.getElementById ("dannie") ; dannie.innerHTML \u003d xhr.responseText; // dodaj primljeni kod u blok sa id \u003d dannie)) xhr.send ();

Umetak je i opis koda.

Upravo gore opisani dizajn omogućava vam povlačenje i prikazivanje sadržaja sa vaše, a možda i ne s vaše web lokacije. Ali ono što je važno znati:
   - U manifestnu datoteku obavezno upišite adresu web mjesta s koje će podatke preuzeti u polje s dozvolama.
   - Datoteka popup.js povezana je sa skriptu pozadine background.js, jer podaci pohranjeni u lokalnoj pohrani na background.js vidljivi su i na popup.js.

Prije nego što pogledate pozadinsku datoteku skripte background.js, razmislite o datoteci skripte koja se pokreće na svakoj stranici zasebno: content.js

To meni izgleda ovako:

content.js
  funkcija onBlur () (// prozor gubi fokus chrome.runtime.sendMessage ((site: sait, vrijeme: localStorage)); // pošalji poruku background.js localStorage \u003d "0";) window.onblur \u003d onBlur; // ako prozor izgubi funkciju fokusiranja sec () // pokreće se svake sekunde (ako (document.webkitVisibilityState \u003d\u003d "vidljivo") // ako je stranica aktivna (localStorage \u003d parseInt (localStorage, 10) +1; // ažuriraj podatke web mjesta) u lokalnom skladištu)) var sait \u003d location.hostname; // na kojoj je web lokaciji skripta localStorage \u003d "0"; setInterval (sec, 1000); // pokretanje funkcije svake sekunde

Mislim da bi najzanimljivija stvar iz mog scenarija trebala biti:
   chrome.runtime.sendMessage ((web stranica: sait, vrijeme: localStorage));
  Ovde se pozadinska poruka šalje skripti, naime dve varijable: site: sait - sadrži adresu web lokacije na kojoj je skripta
   vrijeme: localStorage - vrijeme provedeno na ovoj skripti.

background.js
  chrome.runtime.onMessage.addListener (funkcija (zahtjev, pošiljalac, sendResponse) (var a \u003d zahtjev.site; // podaci o web mjestu var b \u003d request.time; // podaci o vremenu provedenom // ovdje radimo s ovim podacima koji želite.));

Evo je, ustvari, ona. Neću detaljno analizirati ništa, jer to, u principu, nije neophodno. Dovoljno je znati dobar primjer za provođenje plana. Ako dodate bilo kakve podatke u lokalnu pohranu u skripti background.js (kao i kolačiće, web sql), isti se podaci mogu koristiti i u skripti popup.js.

To je sve što sam želio reći o stvaranju produžetka, ali dotaknut ću se i druge točke u kojoj sam imao poteškoća.

Na stranici postavki trebao sam organizirati povlačenje i ispuštanje web lokacija u različite stupce.

Jer podaci se ubacuju pomoću InnerHtml-a, onda se ova značajka jednostavno ne pojavljuje. Evo šta sam morao da organizujem:

  $ ("# dannie"). on ("prelazak mišem", ".sait", funkcija () ($ (ovo) .css (("granica": "3px solid #ffffff"));)); $ ("# dannie"). on ("mouseout", ".sait", function () ($ (this) .css (("border": "3px solid black"));)); $ ("# dannie"). on ("mousedown", ".sait", function () ($ (this) .css (("border": "3px solid black"));)); $ ("# dannie"). on ("prelazak mišem", ".sait", funkcija () ($ (". sait"). draggable ((pomagač: "klon"));));
  umjesto uobičajenog:
  $ (". sait"). mouseover (function () ($ ("#" + this.id) .css (("border": "3px solid #ffffff"));)); $ (". sait"). mouseout (function () ($ ("#" + this.id) .css (("border": "3px solid black"));)); $ (". sait"). mousedown (funkcija () ($ ("#" + this.id) .css (("border": "0px solid black"));)); $ (". sait"). draggable ((pomagač: "klon",));

Pisanje jednostavnog proširenja za Chrome pregledač

Arhiva DeveloperWorks

Dwayne O'Brien

Datum arhiviranja: 25.02.2019 | Prvo objavljeno: 13.3.2013

Svaki preglednik ima svojih pristalica i protivnika - i svoje prednosti i mane. Ono što ih povezuje je da ljudi sve više i više vremena provode u pretraživačima. Ovaj članak u članku pokazuje kako napisati vlastito proširenje za preglednike Chrome, Firefox, Internet Explorer i Safari. Čitatelja se poziva da izgradi istu jednostavnu ekstenziju za svaki preglednik kako bi mogao osjetiti u šta se prevodi, koliko je teško ili jednostavno riješiti određene tipične probleme i što je potrebno za širenje njegovog proširenja. Ovaj članak govori o proširenju za Chrome pregledač.

Sadržaj se više ne ažurira i nije podržan. Cijeli članak dostupan je u PDF formatu "kakav jest". S obzirom na brzi razvoj tehnologije, neki koraci i ilustracije podložne su promjenama.

Proširenja i dodaci korisni su dodaci postojećim funkcijama na web mjestu i u pretraživaču. Uz njihovu pomoć možete snimati audio i video zapise sa zaslona, \u200b\u200bomogućiti pretragu grešaka i još mnogo toga.
  U ovom ćemo članku razmotriti stvaranje najjednostavnijeg proširenja - pokretača odabranih web lokacija. Iako će aplikacija biti primitivna, ipak će otkriti postupak stvaranja i preuzimanja ekstenzije za google Chrome.

Preporučljivo je poznavati HTML, CSS i JS (ako morate proširiti skup funkcija) na najosnovnijoj razini kako biste bolje razumjeli materijal, ali u svakom slučaju objasnit ćemo kôd.

Svako proširenje za Chrome mora imati datoteku manifest.json. Služi samo za opisivanje funkcija aplikacije, opći opis, broj verzije i dozvole. Možete saznati više o ovoj datoteci na blogu Chrome tima za razvoj.

Dajmo svoj doprinos razvoju weba

Ovdje je sve vrlo jednostavno:

  ("manifest_version": 2, "name": "Tproger Launcher", "opis": "Pokretanje predstavništva Tprogera", "verzija": "1.0.0", "ikone": ("128": "icon_128.png" ), "pretraživač preglednika": ("default_icon": "icon.png", "default_popup": "popup.html"), "dozvole": ["activeTab"])

Nakon što smo opisali naše proširenje u datoteci manifest.json, možemo sigurno prijeći na sljedeći korak, naime označavanje.

Za početak, napišemo nekoliko osnovnih HTML-ova:

Iznad smo napisali okvir za dodatak, sada je potpuno prazan i trebate odrediti ime, veze do ikona i fonta. To se može učiniti pomoću veze oznake, imajte na umu da se ona ne zatvara:

Ne zaboravite navesti kodiranje, u suprotnom slova na ćiriličnom obliku neće biti prikazana.

Prijeđimo na drugi blok koda, odnosno oznaku tijela i njegov sadržaj.

Stilovi

Da bi produžetak izgledao ljepši i praktičniji nego što je to sada, morate dodati CSS stilove.

U komentarima smo pokušali da objasnimo što je moguće više. A sada moramo samo prenijeti naše proširenje u Chrome preglednik i ono će raditi i ako prođe umjerenost, pojavit će se u trgovini ekstenzija (dodataka).

Sada dodajmo datoteku s nastavkom .js, ako odjednom trebate proširiti funkcije dodatka za preglednik.

Provjera koda i objavljivanje

Nakon provjere, možete početi objavljivati \u200b\u200bnastavak. Da biste to učinili, morate imati sljedeće datoteke i mape:

Da bismo dodali proširenje u trgovinu, moramo ići u meni, pomaknuti miš na „napredne postavke“, a zatim odabrati „ekstenzije“ ili unijeti chrome: // extensions / u adresnu traku.