Ako vytvoriť doplnok prehliadača pomocou javascriptu. Písanie rozšírenia pre google chrome

iMacros je rozšírenie, ktoré pomáha pri testovaní webových stránok. Namiesto toho, aby musel vývojár vykonávať rovnaké akcie na stránke sám, potrebuje iba zaznamenať požadovanú postupnosť akcií v iMacro a v prípade potreby spustiť rozšírenie.

Rozšírenie je schopné pracovať so stránkami implementovanými pomocou technológií Java, Flash, Flex, Ajax a Silverlight.

Rozšírenie pre tých, ktorí sa radi „hrajú s fontmi“ – umožňuje experimentovať s celým radom fontov z knižnice Google Fonts bez toho, aby ste museli meniť kód stránky. Zmeniť môžete nielen samotné písmo, ale aj jeho veľkosť, štýl písania a pod.

Rozšírenie pre Google Chrome, ktoré umožňuje vyberať a kopírovať text aj z obrázkov, bude podľa Cretive Bloq užitočné pre každého, kto sa pri svojej práci musel aspoň raz potýkať s vloženým textom.

Rozšírenie, ktoré vám umožní okamžite určiť, ktoré písmo je použité na konkrétnej stránke, bez vykonania takmer akýchkoľvek ďalších akcií – umiestnením kurzora myši na nápis.

YSlow je nástroj, ktorý nielen skontroluje rýchlosť načítania konkrétnej webovej stránky, ale tiež povie vývojárovi, čo ju spomaľuje. Za týmto účelom rozšírenie kontroluje, či stránka spĺňa 23 z 34 pravidiel výkonu formulovaných tímom Yahoo.

Celá sada užitočných nástrojov na správu prvkov webovej stránky - napríklad na analýzu webových zdrojov a rozložení, testovanie kódu a okamžitú zmenu parametrov a vzhľad stránky.

Rozšírenie na automatickú kontrolu, či stránka spĺňa základné princípy SEO, či je dostatočne výkonná a užívateľsky prívetivá. Výsledky testov sú prezentované vo forme akéhosi kontrolného zoznamu - môžete vidieť viac podrobné informácie a odporúčania pre každú z nesplnených položiek, ako aj okamžité opravy chýb.

Umožňuje automaticky uložiť všetky zmeny vykonané v kóde stránky pomocou nástrojov Chrome DevTools. Ako poznamenáva autor materiálu, nástroj pomáha vývojárom šetriť peniaze veľké množstvočas.

Rozšírenie, pomocou ktorého môžete „premeniť“ akúkoľvek stránku na štrukturálny diagram rozloženia materiálu - drôtový model. Umožňuje vývojárom a webovým dizajnérom oboznámiť sa s rozložením akejkoľvek stránky na internete bez toho, aby museli opustiť prehliadač.

Ripple Emulator je rozšírenie emulátora pre prehliadač Google Chrome, ktoré vám umožňuje testovať webové stránky na rôznych miestach mobilné platformy s rôznym rozlíšením obrazovky. Možno použiť v kombinácii s inými rozšíreniami na testovanie a ladenie zdrojov.

Streak je rozšírenie, ktoré vám umožňuje otáčať sa poštová schránka do Gmailu v systéme CRM. Môžete sledovať stav transakcií a rokovaní, ktoré prebiehajú v e-mailom s protistranami, použite Streak na spracovanie požiadaviek od používateľov produktov a sledovanie opráv odoslaných chýb atď.

Rozšírenie pre rýchle vyhľadávanie na populárnom zdroji pre vývojárov Stack Overflow.

Umožňuje vám okamžitý prístup k dokumentácii PHP 5.5 z vášho prehliadača.

PerfectPixel je rozšírenie pre Google Chrome. Umožňuje vám „prekryť“ priesvitnú mriežku na webovej stránke a skontrolovať oproti nej zadané vzdialenosti. Môžete prekryť iné obrázky – napríklad pôvodné rozloženie –, aby ste sa uistili, že výsledná stránka sa s ním presne zhoduje:

Nástroj na prezeranie zdrojového kódu stránok a úpravu CSS kódu.

Potiahnutím jazdca môžete zmeniť tiene, obvody rámčeka atď. Po vykonaní zmien môžete skopírovať výsledný kód a nahradiť ho v kóde lokality.

Rozšírenie prehliadača, ktoré zisťuje, ktoré knižnice JavaScript, rámec alebo CMS sa používajú na zdroji.

User-Agent Switcher je rozšírenie, ktoré vám umožňuje „maskovať“ prehliadač Google Chrome ako Internet Explorer, Opera alebo akýkoľvek iný prehliadač.

Vstavaný emulátor Internet Explorer pre Chrome.

Jednoduché a bezplatný online editor obrázky. Umožňuje vám „zachytiť“ obrázky alebo urobiť snímky obrazovky prehliadača – a okamžite ich upraviť pomocou rozšírenia Chrome.

Rozšírenie, ktoré pomáha prispôsobiť webové služby tým používateľom, ktorí trpia farbosleposťou – ukazuje vývojárovi, ako sa na stránku pozerajú tí, ktorí trpia touto chorobou. Umožňuje webovým dizajnérom a vývojárom vytvárať dostupnejšie služby.

Jednoduchý nástroj, ktorý vám pomôže určiť výšku, šírku a polohu ľubovoľného prvku na stránke.

Rozšírenie, ktoré kontroluje webovú stránku, či neobsahuje nefunkčné alebo nesprávne odkazy.

Rozšírenie, ktoré nepomáha ani tak s vývojom, ale s hľadaním inšpirácie a dobrých fotiek. Zobrazuje jeden obrázok zo služby Flickr na každej novej karte v prehliadači Google Chrome. Keď naň kliknete, užívateľ prejde na stránku autora, kde sa môže zoznámiť s jeho ďalšími dielami.

Rozšírenie prehliadača podobné predchádzajúcemu pluginu v tomto zozname – len namiesto fotiek z Flickru na novej karte používateľ vidí uznávané umelecké diela – napríklad obrazy od Van Gogha alebo Maneta.

Oficiálne rozšírenie od spoločnosti Google pre kompresiu návštevnosti, ktoré umožňuje šetrenie návštevnosti v prehliadači Google Chrome.

Rozšírenia a pluginy sú užitočnými doplnkami existujúcich funkcií na stránke a v prehliadači. S ich pomocou môžete nahrávať zvuk a video z obrazovky, povoliť detekciu chýb a oveľa viac.
V tomto článku sa pozrieme na vytvorenie najjednoduchšieho rozšírenia - spúšťača obľúbených stránok. Aplikácia bude síce primitívna, no aj tak prezradí proces vytvárania a sťahovania rozšírenia pre Google Chrome.

Je vhodné poznať HTML, CSS a JS (ak musíte rozšíriť sadu funkcií) na úplne základnej úrovni, aby ste lepšie porozumeli materiálu, ale v každom prípade kód vysvetlíme.

Každé rozšírenie prehliadača Chrome musí mať súbor manifest.json. Slúži len na popis funkcií aplikácie, všeobecného popisu, čísla verzie a oprávnení. Viac o tomto súbore si môžete prečítať na blogu tímu Chrome.

Všetko je tu veľmi jednoduché:

( "manifest_version": 2, "name": "Tproger Launcher", "description": "Tproger Launcher", "version": "1.0.0", "icons": ("128": "icon_128.png" ) , "browser_action": ( "default_icon": "icon.png", "default_popup": "popup.html" ), "povolenia": ["activeTab"] )

Potom, čo sme si opísali naše rozšírenie v súbore manifest.json, môžeme pokojne prejsť na ďalšiu fázu, a to značkovanie.

Najprv si napíšme základný HTML kód:

Vyššie sme napísali rámec pre plugin, teraz je úplne prázdny a je potrebné zadať názov, odkazy na ikony a písmo. Dá sa to urobiť pomocou značky odkazu, všimnite si, že nie je uzavretá:

Rýchly spúšťač médií Tproger

Nezabudnite špecifikovať kódovanie, inak sa nezobrazia azbuky.

Prejdime k druhému bloku kódu, a to k tagu body a jeho obsahu.

Aby rozšírenie vyzeralo krajšie a pohodlnejšie ako teraz, musíte pridať štýly CSS.

/* Modálna štruktúra dokumentu */ /*všeobecné nastavenia pre celý dokument*/ html, telo ( font-family: "Open Sans", sans-serif; font-size: 14px; margin: 0; min-height: 180px; padding : 0 width: 380px ) /*nastavte nastavenia pre nadpisy prvej úrovne*/ h1 (rodina písma: "Menlo", monospace; veľkosť písma: 22px; hrúbka písma: 400; okraj: 0; farba; : #2f5876 ; ) a:link, a:navštívené ( farba: #000000; obrys: 0; dekorácia textu: žiadna; ) /*nastaviť šírku obrázka*/ img (šírka: 30px; /*šírka obrázka*/ ) .modal-header ( align-items: center; /*zarovnanie prvkov na stred*/ border-bottom: 0,5px solid #dadada; /*vlastnosti spodnej deliacej čiary*/ výška: 50px; ) .modal-content ( padding: 22px ( padding: 16px ; /*odsadenie na všetkých stranách*/ ) .logo-icon ( vertical-align: text-bottom; /*zarovnať na spodok textu*/ margin-right: 12px; /*nastaví odsadenie prvkov z obrázku*/ ) .version ( color: #444; font-size: 18px; )

Základné nastavenia dokumentu sú nastavené, prejdime k ďalšej časti kódu, v ktorej bude použitý Flexbox, o ktorom sme hovorili na začiatku článku.

Flex-container ( display: flex; /*zobrazí kontajner ako prvok bloku*/ justify-content: space-between; /*jednotné zarovnanie prvkov*/ padding: 10px 22px; ) /*nastavenie nastavení pre kontajnery s ikonami* / flex ( nepriehľadnosť: 1; /*parameter nepriehľadnosti ikony*/ šírka: 120px; ) .flex:hover ( nepriehľadnosť: 0,4; /*úroveň nepriehľadnosti pri umiestnení kurzora myši na prvok*/ ) .flex .fa (veľkosť písma: 40px farba: #2f5876 ;

Pomerne zložitú problematiku sme sa snažili čo najpodrobnejšie vysvetliť v komentároch. Teraz už len musíme nahrať naše rozšírenie Prehliadač Chrome a bude fungovať a ak prejde moderovaním, objaví sa v obchode s rozšíreniami (doplnkami).

Teraz pridajme súbor s príponou .js pre prípad, že by sme náhle potrebovali rozšíriť funkcionalitu doplnku prehliadača.

Tproger Media Quick Launcher /*tu sme pridali štýly*/

Spúšťač Tproger /* Modálna štruktúra dokumentu */ /*všeobecné nastavenia pre celý dokument*/ html, telo ( font-family: "Open Sans", bezpätkové; font-size: 14px; margin: 0; min-height: 180px ; šírka: 380px ) /*nastavíme nastavenia pre nadpisy prvej úrovne*/ h1 ( font-family: "Menlo", monospace; font-size: 22px; font-weight: 400; ; farba: #2f5876; ) a:odkaz, a:navštívené ( farba: #000000; obrys: 0; dekorácia textu: žiadna; ) /*nastaviť šírku obrázka*/ img (šírka: 30px; /*šírka obrázka* / ) .modal -header ( align-items: center; /*zarovnanie prvkov na stred*/ border-bottom: 0,5px solid #dadada; /*vlastnosti spodnej deliacej čiary*/ výška: 50px; ) .modal-content ( padding: 0 22px; /*odsadenie nad a pod, hore a doľava*/ .modal-icon ( border-top: 0,5px solid #dadada; /*vlastnosti hornej deliacej čiary*/ výška: 50px; šírka: 100%; ) .logo ( padding : 16px; /*odsadenie na všetkých stranách*/ ) .logo-icon ( vertical-align: text-bottom; /*zarovnať na spodok textu*/ margin-right: 12px; /*nastaví odsadenie prvkov z obrázku*/ .version ( color: #444; font-size: 18px; ) .flex-container ( display: flex; /*zobrazí kontajner ako prvok bloku*/ justify-content : medzera- medzi; /*rovnomerné zarovnanie prvkov*/ padding: 10px 22px ) /*nastavenie nastavení pre kontajnery s ikonami*/ .flex ( nepriehľadnosť: 1; /* parameter nepriehľadnosti ikony */ šírka: 120px; ) .flex; :hover ( nepriehľadnosť : 0,4; /*úroveň nepriehľadnosti pri umiestnení kurzora myši na prvok*/ ) .flex .fa (veľkosť písma: 40px; farba: #2f5876; ) Tproger Launcher (1.0.0)

Rýchly prístup na stránky s obsahom typického programátora

Po overení môžete rozšírenie začať zverejňovať. Ak to chcete urobiť, musíte mať nasledujúce súbory a priečinky:

Ak chcete rozšírenie stiahnuť do obchodu, musíme prejsť do ponuky a umiestniť kurzor myši nad „ dodatočné nastavenia“ a potom vyberte „rozšírenia“ alebo do panela s adresou zadajte chrome://extensions/.

Vždy som o tom chcel ľuďom rozprávať zaujímavé príležitosti(technológie), ktoré môžu byť teraz dostupné pre každého, no z nejakého dôvodu nie sú dostupné pre každého. Áno, ukázalo sa, že je to tautológia, ale plne odráža moje vnútorné rozhorčenie nad touto pre mňa pálčivou témou. Nech je to akokoľvek, reč teraz nebude o tom, ako sa hovorí. Dnes budeme hovoriť o vytváraní rozšírení pre Prehliadač Google Chrome (ďalej len Chrome).

Rozšírenie, ktoré budeme v tomto článku vyvíjať, nájdete v Internetovom obchode Google Chrome, len s tým rozdielom, že má pokročilé funkcie. Okrem toho existuje zdrojový kód na GitHub, opäť s upozornením, že všetko tam je napísané v CoffeeScripte a tu bude príbeh vyrozprávaný JavaScriptom. Mimochodom, nie som fanúšik ani zástanca CoffeeScript, ale je to celkom zaujímavá a užitočná vec - odporúčam vám to vyskúšať.

Ak ste niekedy uvažovali nad myšlienkou vytvorenia rozšírenia pre prehliadače Chrome, Firefox, Maxthon a ďalšie, pravdepodobne ste si už všimli, že minimálne úsilie, ktoré musíte vynaložiť, je pre prehliadač Chrome. Môžete si to overiť v dokumentácii k príslušným prehliadačom.

Písanie rozšírenia začína jeho popisom a nastavením úloh, ktoré bude riešiť. Keďže som sám sebe šéfom a môžem zmeškať termíny, koľkokrát chcem, nemusím písať technické špecifikácie – stačí mi porozumieť:

• Rozšírenie by malo skryť všetky komentáre v sociálnej sieti"VK";
• Rozšírenie musí byť schopné zobrazovať komentáre;
• Rozšírenie musí byť schopné zobrazovať komentáre na konkrétnych stránkach;

Na prvý pohľad je všetko jednoduché a my to zvládneme. V rámci článku však implementujeme len prvé dva body.

Predvídam otázky, ktorých obsah môže byť asi takýto: „Prečo skrývať komentáre, ak je to celý zmysel sociálnej siete?!“ No, je to férová otázka, ktorá si zaslúži podrobnú odpoveď:

Okolnosti sa tak stali v poslednej dobe, keď vidím komentáre na VK, chcem dať komentátorom hory facepalmov. Odoberám veľké množstvo rôznych verejných stránok, tematických (vývoj webu) a nie toľko. A nech sa to zdá akokoľvek zvláštne, najštedrejším sa stávam v skupinách s obsahom, ktorý je pre mňa zaujímavý, a nie mačkami (v mojom prípade pandami). Nikde inde som v komentároch nevidel také množstvo neprofesionálnych a nepekných informácií, ktoré by sa aj hádali. Okrem toho komentáre v informačný kanál Nevyzerajú esteticky. Vo všeobecnosti povedané a urobené.

Najpríjemnejším prekvapením pre mňa bolo, že hneď na začiatku cesty nás víta popisnosť akcií. Jednoducho povedané, musíme popísať našu aplikáciu, jej práva a možnosti – na to slúži súbor manifest.json.

Najprv musíte vyplniť tri povinné polia:

( "manifest_version": 2, // Počnúc Chrome 18 sadou 2, inak 1 (takéto staré položky nie sú podporované) "name": "My Extension", // Názov rozšírenia "version": "versionString" // Verzia rozšírenia )

Ak je s názvom všetko jasné a verzia manifestu je ešte jednoduchšia, musíte sa bližšie pozrieť na verziu rozšírenia.

Všetci sme teda zvyknutí na to, že verzia niečoho pozostáva z troch čísel oddelených bodkami – Major.Minor.Patch (Význam čísla). S npm, bowerom a inými pôžitkami je rozhovor krátky: buď takto, alebo vôbec. Google však ponúka nasledujúce možnosti:

"verzia": "1" "verzia": "1.0" "verzia": "2.10.2" "verzia": "3.1.2.4567"

Viac informácií o všetkých poliach v súbore manifestu nájdete v dokumentácii.

V našom prípade bude súbor manifestu vyzerať takto:

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

Z toho, čo sa predtým neuvažovalo

• __MSG_key__ je prístup prehliadača Chrome k internacionalizácii aplikácií (i18n). Dá sa použiť v súbore manifestu aj v iných súboroch (dokonca aj CSS).
• web_accessible_resources - pole ciest zdrojov, ktoré budú následne použité v kontexte webových stránok. Bez uvedenia cesty v nej nemožno na webových stránkach nič použiť, ak sa takéto správanie očakáva.

Obrovským plusom pre karmu Chrome je, že teraz môžeme rozšírenie povoliť, samozrejme, ak boli vytvorené všetky zdroje špecifikované v manifest.json.

Myslím si, že nemá cenu sa zameriavať na to, čo je v súboroch commentblocker.css a commentblocker_on.css. Uvediem iba prvý, v ktorom sú uvedené všetky selektory, ktoré obsahujú komentáre:

@charset "utf-8"; .wall_module .reply_link_wrap .reply_link (viditeľnosť: skryté !important; ) .wall_module .replies_wrap, #wl_replies_wrap, #wl_reply_form_wrap, #mv_comments_wrap, #mv_your_comment, #pv_comments, #pv_comments, #pv_comments! dôležité viditeľnosť: skryté ! dôležité; ) body:after ( position: fixed; content: "__MSG_mode_enable__"; top: 5px; right: 5px; padding: 6px 12px; background-color: #ffc; border: 1px solid #ddd; z-index: 9999 ;

V súbore commentblocker_on.css je, ako asi tušíte, opak pravdou. Všimnite si, že priamo v CSS používam riadok s obsahom jazykového kľúča: "__MSG_mode_enable__" . Je čas vytvoriť súbor, kde budú tieto kľúče uložené.

V koreňovom adresári nášho rozšírenia vytvoríme adresár _locales a v ňom vnorené adresáre en a ru. Ďalej popíšeme naše kľúče v súbore messages.json.

( "app_name": ( "message": "Blokovanie komentárov VK" ), "app_description": ( "message": "Pohodlný spôsob, ako skryť komentáre v informačnom kanáli a skupinách." ), "browser_action": ( "správa" ": " Prepnúť typ komentára" ), "mode_enable": ( "message": "Žiadne komentáre!" ), "mode_disable": ( "message": "S komentármi!" ) )

Okrem poľa správy existujú ďalšie polia, o ktorých sa môžete dozvedieť z dokumentácie.

Teraz vytvoríme súbory background.html, najskôr takto:

Pozadie

Všetko je tu rovnaké ako v bežnom HTML – nič neobvyklé. Mimochodom, nemusíte vytvárať súbor background.html, pretože sa generuje automaticky na základe polí v manifest.json .

Rozšírenie môžete spustiť bez písania jediného riadku JavaScriptu. Ak to chcete urobiť, musíte prejsť cez ponuku:

• Nastavenie a správa prehliadača Google Chrome (Hamburger)
• Ďalšie nástroje
• Rozšírenia
• Začiarknite políčko vedľa položky „režim vývojára“
• Stiahnite si rozbalené rozšírenie
• Vyberte priečinok s príponou

Rozšírenie sa načítalo a objavilo sa v ponuke. Áno, áno, toto je „B“.

Zdá sa, že rozšírenie, ktoré sme práve vytvorili, nemá v hlave nič (nemá logiku) a všetky komentáre na stránkach sociálnej siete s písmenom „B“ sú teraz skryté. Odpoveď je v manifest.json, kde v poli "content_scripts": () sme uviedli, na ktorých stránkach (http://vk.com/* a https://vk.com/*) bude súbor commentblocker.css automaticky zahrnúť, čím sa skryjú všetky komentáre. Odporúčam vám prečítať si viac o matematických vzorcoch. Na pohľad je to také jednoduché, ale pod kapotou je to takmer sivý valach so všetkými zvončekmi a píšťalkami.

Takže bez napísania jediného riadku kódu už máme rozšírenie, ktoré vykonáva hlavnú úlohu, ktorá mu bola pridelená.

Zostáva dokončiť druhý bod úlohy, a to implementovať možnosť zobrazenia komentárov. Stručne povedané, musíme vložiť súbor commentblocker_on.css, ktorý prepíše pravidlá súboru commentblocker.css. A tu sa nám ponáhľa na pomoc náš všemocný JavaScript.

Pamätáte si, čo som povedal o background.html? Áno, áno, o tom, že to nemusí byť vytvorené. Poďme mierne zmeniť manifest.json:

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

Práve ste pripojili súbor JavaScript. Nič zvláštne. Poďme k tomuto súboru.

JS nemôžete len tak vložiť na stránku. A rovnaký problém existuje nielen so skriptami. Preto musíme použiť špeciálnu injekciu executeScript.

Najprv musíte k ikone rozšírenia pridať obsluhu udalosti kliknutia:

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

Kde toggleComments je funkcia, ktorá vloží náš súbor CSS na stránku:

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

Myslím, že stačia slová, že tento kúsok kódu skontroluje, či je náš CSS na stránke prepojený a vyvodí závery o potrebe povoliť alebo zakázať.

Mimochodom, nie je k dispozícii veľa podujatí, ktoré pokrývajú iný rozsah potrieb. Existujú napríklad také udalosti:

• onCreated - vytvorenie karty.
• onUpdated - aktualizácia karty.
• onRemoved - zatvorenie karty.

Stojí za zmienku, že udalosť onUpdated sa volá dvakrát:

• Aktualizácia stránky;

Na StackOverflow odporúčajú skontrolovať stav stránky:

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

Teraz, keď kliknete na ikonu, pripojí sa súbor štýlu, ktorý zobrazí komentáre a opätovným kliknutím na ikonu ich opäť skryjete.

Mimochodom, za zmienku stojí môj plná verzia Rozšírenie VK Comment Blocker, ktoré je k dispozícii v

Napíšte rozšírenie pre google chrome nie je ťažké. Ale pri písaní prvého rozšírenia môžu (a vznikajú) otázky. Väčšina manuálov na napísanie prvého rozšírenia je navrhnutá tak, aby používala manifest prvej verzie, ktorá už v blízkej budúcnosti nebude podporovaná.

Tento článok sa bude týkať:

• Ako vytvoriť manifest v.2
• Ako pracovať so vzdialenými zdrojmi
• Ako pracovať s cookies
• Ako pracovať s lokálnym úložiskom
• Ako pracovať s upozorneniami

Na konci článku budeme mať hotové rozšírenie organizátora, ktoré bude mať pole na pridanie novej úlohy a tiež zoznam úloh na aktuálny deň. Načrtneme všetky požiadavky na organizátora:

• Musíte mať pole na pridanie udalosti (dátum, čas, udalosť)
• Mali by sa zobraziť všetky úlohy pre aktuálny deň zoradené podľa času
• Všetky minulé udalosti by mali byť zobrazené prečiarknuté
• Malo by obsahovať pole na zadanie času, ako dlho sa má upozornenie zobrazovať, ako aj začiarkavacie políčko, ktoré povoľuje a zakazuje zobrazovanie upozornení.
• Musí zobraziť upozornenie na nadchádzajúcu udalosť v určený čas pred udalosťou

Začnime vytvárať rozšírenie od úplného začiatku, teda od manifestu. Manifest je rovnaký súbor, v ktorom sú zapísané všetky parametre rozšírenia. Názov, popis, verzia, oprávnenie na prístup na stránky, oprávnenie na používanie cookies, notifikácie, lokálne úložisko. Vo všeobecnosti je manifest mozgom expanzie. Vytvorte súbor manifest.json. Manifest je jediný súbor, ktorý musí mať preddefinovaný názov, všetky ostatné súbory sa môžu nazývať akokoľvek. Tento súbor má tri povinné polia:

manifest.json

(„názov“: „rozšírenie organizátora“, // názov rozšírenia „verzia“: „1.0“, // verzia rozšírenia. „verzia_manifestu“: 2 // verzia manifestu)

Platí tu pár pravidiel:

• Verzia manifestu musí byť celé číslo, to znamená, že musí byť zapísaná ako 2, nie ako „2“.
• Verzia rozšírenia by mala byť reťazec, ale obsahovať iba čísla a bodky, to znamená, že „1.0“ je dobré, ale 1.0 a „0.9 beta“ sú zlé.

S požadovanými poliami - to je všetko, prejdime k vytvoreniu kontextového okna rozšírenia. Aby sa po kliknutí na ikonu otvorilo okno, musíte do manifestu pridať pole „browser_action“.

manifest.json

( ... "browser_action": ( "default_title": "Otvoriť organizér", // Názov. Je viditeľný, ak umiestnite kurzor myši na ikonu v prehliadači "default_icon": "icon_small.png", // Cesta k rozšíreniu ikona "default_popup": " popup.html" // Cesta na stránku s kontextovým oknom ) )

Teraz vytvoríme vyskakovacie okno. To je normálne html stránku, ktorý môže mať akúkoľvek veľkosť a farbu, žiadne triky. Nazvime súbor “popup.html”. Tento súbor nestačí vytvoriť – musí byť uvedený v manifeste. To je to, čo sme urobili: "default_popup": "popup.html".

popup.html

Funguje to!

Teraz je čas otestovať funkčnosť nášho rozšírenia. Ak to chcete urobiť, stiahnite si rozšírenie do prehliadača. Otvorte ponuku rozšírení v prehliadači Chrome. Vtáčika sme prepli do „režimu vývojára“.

Potom sa objavia tri tlačidlá. Kliknite na „Načítať rozbalené rozšírenie...“. Vyberte priečinok so súbormi s príponou. Potom sa zobrazí naše rozšírenie. Ak je všetko správne, po kliknutí na ikonu sa zobrazí okno:

Teraz sa môžeme dostať k zábavným veciam. Spojme dva javascriptové súbory. Prvým je popup.js, druhým je jquery. S prvým nebudú žiadne problémy, ale pripojíme nie lokálny jquery, ale vzdialený, prevzatý z adresy ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js. Problémy vyplývajú zo skutočnosti, že rozšírenie štandardne nemá prístup k zdrojom tretích strán. Ak chcete získať prístup, musíte to uviesť v manifeste. Prístup k niečomu je uvedený v poli „povolenia“. Pre vzdialené skripty a css tiež musíte uviesť dostupné vzdialené zdroje.

manifest.json

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

Teraz prepojme tieto skripty s popup.html

popup.html

Pomocou úložiska v prehliadači Chrome môžete ukladať používateľské údaje. A práve v úložisku bude naše rozšírenie ukladať budúce udalosti. Sú na to dva dôvody. Po prvé, údaje uložené v úložisku je možné synchronizovať, ak sa prihlásite do prehliadača. A po druhé, údaje môžu byť uložené nielen ako reťazec, ako v súboroch cookie, ale v akejkoľvek forme, to znamená, že je možné ukladať polia aj objekty. Aby to fungovalo, otvorme prístup k úložisku v manifeste.

manifest.json

( ... "oprávnenia": [ ... "úložisko" ] ... )

Teraz prerobme vyskakovacie okno. Vo vyskakovacom okne bude pole s dnešným dátumom, tri vstupy pre dátum, čas a popis novej udalosti, tlačidlo na pridanie novej udalosti, ako aj zoznam všetkých udalostí na dnes.

popup.html

Dátum

A okamžite pridajte zobrazenie dátumu do bloku #today_date.

popup.js

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

Malo by to vyzerať takto:

Keď teda klikneme na tlačidlo „+“, mala by sa pridať udalosť. Na začiatku súboru deklarujeme globálnu premennú úložiska – objekt na prácu s úložiskom, ako aj globálne pole úloh na ukladanie udalostí.

popup.js

Var storage = chrome.storage.sync; var tasky = new Array(); $(function())( … $("#add_task").click(function())( var new_task = new Object(); new_task.date = validateField($("#new_date")).val(), " dátum" ); new_task.time = validateField($("#new_time").val(), "time"); new_task.task = $("#new_task").val(); if(!new_task.task | |. !nová_úloha.úloha)( návrat false; ) Úlohy = nová_úloha.

Overovacia funkcia skontroluje, či je dátum zapísaný vo formáte d.m.rrrr a čas vo formáte hh:mm a tiež, či popis udalosti obsahuje aspoň tri znaky.

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(date) == date && date = 3)( return val; ) return null )

Doplnenie sme vyriešili, prejdime k prijímaniu udalostí na dnes. Aby sme to dosiahli, musíme získať všetky udalosti z databázy, vybrať zo všetkých iba dnešné udalosti a zoradiť ich podľa času vo vzostupnom poradí.

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 in today_tasks)( var this_time = today_tasks[i].time.replace(":", ""); var add = this_time > now_time ? "" : " class="done""; var add_html = ""+today_tasks[i].time+" "+dnes_tasks[i].task+""; $("ul").append(add_html); ) ) ) )); … ));

Funkcia getTodayTasks() vracia zo všeobecného zoznamu iba udalosti s dnešným dátumom.

popup.js

Var getTodayTasks = function(tasks)( var today_tasks = new Array(); var today = new Date(); var today_date = today.getDate()+"."+(today.getMonth() + 1)+ "." + dnes.getFullYear(for(var i v úlohách)( if(úlohy[i].dátum == dnešný_dátum)( dnes_úlohy = úlohy[i]; ) ) if(dnes_úlohy.dĺžka > 0)( dnes_úlohy = zoraďÚlohy(); dnešné_úlohy);

Funkcia sortTasks() triedi udalosti vzostupne podľa času.

popup.js

Var sortTasks = function(tasks)( if(tasks.length > 0)( var swapped = true; while (swapped) (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 = úlohy[i]; úlohy[i] = úlohy; úlohy = dočasná; swapované = pravda; ) ) ) vrátiť úlohy; )

Je čas nakonfigurovať zobrazovanie upozornení na obrazovke. Pridajme do vyskakovacieho okna špeciálne začiarkavacie políčko. Ak je toto políčko začiarknuté, upozornenia sa budú zobrazovať, ak nie je začiarknuté, nebudú sa zobrazovať. Pridáme aj textový vstup. Číslo v tomto vstupe ukazuje, ako dlho pred udalosťou sa bude upozornenie zobrazovať. To znamená, že ak máme udalosť naplánovanú na 19:00, tento textový vstup bude obsahovať 5, čo znamená, že upozornenie sa zobrazí o 18:55. Pridajme kód s týmito vstupmi do popup.html

popup.html

Zobraziť upozornenia

Teraz poďme zistiť, ako to bude fungovať. Keď kliknete na začiarkavacie políčko, skontroluje sa jeho začiarknutý atribút a hodnota atribútu sa zapíše do súboru cookie „show_notifications“. Prejdime k zadávaniu textu. Keď sa jeho hodnota zmení, nová hodnota bude overená, ak je to celé číslo a nie viac ako 120, novú hodnotu zapíšeme do súboru cookie „when_to_notify“.

Ale aby nám to fungovalo, musíme otvoriť prístup k súborom cookie. Ak to chcete urobiť, prejdite na manifest.json a pridajte ho do „povolenia“

manifest.json

( ... "povolenia": [ ... "cookies" ] ... )

Teraz môžete spustiť skript. Poďme na popup.js. Najprv nastavíme počiatočné hodnoty na vstupoch. Štandardne nie je začiarkavacie políčko začiarknuté, to znamená, že upozornenia sa nezobrazujú a čas je 0. Po kliknutí na začiarkavacie políčko sa zmení hodnota súboru cookie „show_notifications“. Pri zmene hodnoty v textovom poli sa zmení hodnota súboru cookie „when_to_notify“.

popup.js

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

Pozrime sa bližšie na funkcie. Začnime funkciami práce s cookies. IN v tomto prípade hotové funkcie boli prevzaté z w3schools.com.

popup.js

Var setCookie = function(c_name,value,exdays)( /* *Prevzaté z http://www.w3schools.com/js/js_cookies.asp */ var exdate=new Date(); exdate.setDate(exdate.getDate( ) + exdays var c_value=escape(hodnota) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString()); document.cookie=c_name + "=" + c_value; getCookie = function(c_name)(Zavolajte Vasya P. /* *Prevzaté z http://www.w3schools.com/js/js_cookies.asp */ var i,x,y,ARRcookies=document.cookie.split(" ; "); pre (i=0;i

Aby to bolo jasnejšie, vložil som popis kódu do samotného HTML. Menu organizujem jednoducho: na obrázok dám interný odkaz na rozšírenie.

Keďže som začal o popup.html, hneď vám poviem o popup.js

Zdá sa mi to celkom jednoduché:

popup.js
var xhr = new XMLHttpRequest(); xhr.open("GET", "http://losttime.su/?tmpl=login&token="+localStorage["lostlogin"], true); // tu je požiadavka GET na zadanú stránku xhr.onreadystatechange = function() ( if (xhr.readyState == 4) // ak všetko prebehlo dobre, vykonajte to, čo je v zátvorkách ( var dannie = document.getElementById(" dannie") ; dannie.innerHTML = xhr.responseText; // pridajte prijatý kód do bloku s id=dannie ) ) xhr.send();

Priložil som aj popis kódu.

Je to dizajn opísaný vyššie, ktorý vám umožňuje vytiahnuť a zobraziť obsah z vašej stránky, alebo možno nie z vašej stránky. Čo je však dôležité vedieť:
- V súbore manifestu nezabudnite do poľa povolení napísať adresu stránky, z ktorej budú informácie prevzaté.
- Súbor popup.js je prepojený so skriptom pozadia background.js, pretože údaje zadané do lokálneho úložiska v pozadí.js sú viditeľné aj v popup.js.

Skôr než sa pozrieme na súbor skriptu pozadia background.js, pozrime sa na súbor skriptu, ktorý sa spúšťa na každej stránke samostatne: content.js

U mňa to vyzerá takto:

content.js
function onBlur() ( // okno stratí zameranie chrome.runtime.sendMessage((site:sait,time:localStorage)); // odošle správu do background.js localStorage = "0"; ) window.onblur = onBlur; // ak okno stratí funkciu zamerania sec() // vykonáva sa každú sekundu ( if(document.webkitVisibilityState == "visible") // ak je stránka aktívna ( localStorage = parseInt(localStorage,10) +1; // aktualizácia údaje lokality v lokálnom úložisku ) ) var sait=location.hostname; // na ktorej stránke sa skript nachádza localStorage = "0";

setInterval(sec, 1000) // spustí funkciu každú sekundu;
Najzaujímavejší bod z môjho scenára by podľa mňa mal byť:
chrome.runtime.sendMessage((site:sait,time:localStorage));
Tu sa odošle správa skriptu na pozadí, konkrétne dvom premenným: site:sait - obsahuje adresu stránky, na ktorej je skript

time:localStorage – množstvo času stráveného na tomto skripte.
background.js

Tu v skutočnosti je. Nebudem sa o ničom rozpisovať, pretože... v zásade to nie je potrebné. Na realizáciu svojich plánov stačí poznať jasný príklad. Ak v skripte background.js pridáte do lokálneho úložiska akékoľvek údaje (rovnako ako súbory cookie, web sql), potom je možné rovnaké údaje použiť aj v skripte popup.js.

To je v podstate všetko, čo som vám chcel povedať o vytváraní rozšírenia, ale dotknem sa ešte jedného bodu, v ktorom som mal problémy.

Na stránke nastavení som potreboval usporiadať presúvanie stránok do rôznych stĺpcov.

Pretože Ak sú údaje vložené pomocou InnerHtml, potom sa táto funkcia nezobrazí len tak. Tu je to, čo sme museli zorganizovať:

$("#dannie").on("mouseover", ".sait", function() ( $(this).css(("border":"3px solid #ffffff")); )); $("#dannie").on("mouseout", ".sait", function() ( $(this).css(("border":"3px plné čierne")); )); $("#dannie").on("myš", ".sait", function() ( $(this).css(("border":"3px plné čierne")); )); $("#dannie").on("mouseover", ".sait", function() ( $(".sait").draggable(( helper:"klon" )); ));
namiesto obvyklého:
$(".sait").mouseover(function())( $("#"+this.id).css(("border":"3px solid #ffffff")); )); $(".sait").mouseout(function())( $("#"+this.id).css(("border":"3px plné čierne")); )); $(".sait").mousedown(function())( $("#"+this.id).css(("hranica":"0px plná čierna")); ));