Kā izveidot pārlūkprogrammas papildinājumu, izmantojot javascript. Notiek Google Chrome paplašinājuma rakstīšana

iMacros ir paplašinājums, kas palīdz pārbaudīt tīmekļa lapas. Tā vietā, lai pašam lapā būtu jāveic tās pašas darbības, izstrādātājam ir tikai jāreģistrē vajadzīgā darbību secība programmā iMacro un, ja nepieciešams, jāpalaiž paplašinājums.

Paplašinājums spēj strādāt ar vietnēm, kas ieviestas, izmantojot Java, Flash, Flex, Ajax un Silverlight tehnoloģijas.

Paplašinājums tiem, kam patīk “spēlēties ar fontiem” — tas ļauj eksperimentēt ar visu Google Fonts bibliotēkas fontu klāstu, neveicot izmaiņas lapas kodā. Varat mainīt ne tikai pašu fontu, bet arī tā lielumu, rakstīšanas stilu utt.

Paplašinājums pārlūkam Google Chrome, kas ļauj atlasīt un kopēt tekstu pat no attēliem, pēc Cretive Bloq domām, noderēs ikvienam, kuram vismaz vienu reizi savā darbā ir nācies saskarties ar iegulto tekstu.

Paplašinājums, kas ļauj uzreiz noteikt, kurš fonts tiek izmantots konkrētajā lapā, neveicot gandrīz nekādas papildu darbības – virzot peles kursoru virs uzraksta.

YSlow ir rīks, kas ne tikai pārbauda konkrētas tīmekļa lapas ielādes ātrumu, bet arī informē izstrādātāju, kas to palēnina. Lai to paveiktu, paplašinājums pārbauda vietnes atbilstību 23 no 34 Yahoo komandas izstrādātajiem veiktspējas noteikumiem.

Viss noderīgu rīku komplekts vietnes elementu pārvaldībai, piemēram, tīmekļa resursu un izkārtojumu analīzei, koda testēšanai un tūlītējai parametru maiņai un izskats lapas.

Paplašinājums, lai automātiski pārbaudītu, vai vietne atbilst SEO pamatprincipiem, vai tā ir pietiekami efektīva un lietotājam draudzīga. Pārbaudes rezultāti tiek parādīti sava veida kontrolsaraksta veidā - jūs varat redzēt vairāk detalizēta informācija un ieteikumus par katru no neizpildītajiem posteņiem, kā arī uzreiz izlabot kļūdas.

Ļauj automātiski saglabāt visas lapas kodā veiktās izmaiņas, izmantojot Chrome DevTools. Kā atzīmē materiāla autors, rīks palīdz izstrādātājiem ietaupīt naudu liels skaits laiks.

Paplašinājums, ar kuru jūs varat “pārvērst” jebkuru lapu materiāla izkārtojuma strukturālajā shēmā - stiepļu karkasā. Ļauj izstrādātājiem un tīmekļa dizaineriem iepazīties ar jebkuras interneta lapas izkārtojumu, neizejot no pārlūkprogrammas.

Ripple Emulator ir Google Chrome emulatora paplašinājums, kas ļauj pārbaudīt vietnes dažādās mobilās platformas ar dažādām ekrāna izšķirtspējām. Var izmantot kopā ar citiem paplašinājumiem resursu testēšanai un atkļūdošanai.

Streak ir paplašinājums, kas ļauj pagriezties pastkaste uz Gmail CRM sistēmā. Varat izsekot notiekošo darījumu un sarunu statusam e-pasts ar darījumu partneriem izmantojiet Streak, lai apstrādātu produktu lietotāju pieprasījumus un izsekotu iesniegto kļūdu labojumus utt.

Pagarinājums priekš ātra meklēšana populārajā izstrādātāju resursā Stack Overflow.

Ļauj nekavējoties piekļūt PHP 5.5 dokumentācijai no jūsu pārlūkprogrammas.

PerfectPixel ir Google Chrome paplašinājums. Tas ļauj tīmekļa lapā “pārklāt” caurspīdīgu režģi un pārbaudīt noteiktus attālumus pret to. Varat pārklāt citus attēlus, piemēram, sākotnējo izkārtojumu, lai nodrošinātu, ka iegūtā lapa tai precīzi atbilst:

Rīks lapu avota koda apskatei un CSS koda rediģēšanai.

Velkot slīdni, varat mainīt ēnas, lodziņu apkārtmērus un tā tālāk. Pēc izmaiņu veikšanas varat kopēt iegūto kodu un aizstāt to vietnes kodā.

Pārlūkprogrammas paplašinājums, kas nosaka, kuras JavaScript bibliotēkas, ietvars vai SPS tiek izmantotas resursā.

User-Agent Switcher ir paplašinājums, kas ļauj “maskēt” pārlūkprogrammu Google Chrome kā Internet Explorer, Opera vai jebkura cita pārlūkprogramma.

Iebūvēts Internet Explorer emulators pārlūkam Chrome.

Vienkāršs un bezmaksas tiešsaistes redaktors attēlus. Ļauj “tvert” attēlus vai uzņemt pārlūkprogrammas ekrānuzņēmumus un nekavējoties tos rediģēt, izmantojot Chrome paplašinājumu.

Paplašinājums, kas palīdz pielāgot tīmekļa pakalpojumus tiem lietotājiem, kuri cieš no daltonisma — parādot izstrādātājam, kā vietni skatās tie, kas cieš no šīs slimības. Ļauj tīmekļa dizaineriem un izstrādātājiem izveidot pieejamākus pakalpojumus.

Vienkāršs rīks, kas palīdz noteikt jebkura elementa augstumu, platumu un pozīciju lapā.

Paplašinājums, kas pārbauda, ​​vai tīmekļa lapā nav bojātu vai nepareizu saišu.

Paplašinājums, kas palīdz ne tik daudz attīstībā, bet gan iedvesmas un labu fotogrāfiju atrašanā. Katrā jaunā Google Chrome cilnē tiek rādīts viens attēls no Flickr. Noklikšķinot uz tā, lietotājs nonāk autora lapā, kur var iepazīties ar citiem viņa darbiem.

Pārlūkprogrammas paplašinājums, kas līdzīgs iepriekšējam spraudnim šajā sarakstā — tikai Flickr fotoattēlu vietā jaunajā cilnē lietotājs redz atpazītus mākslas darbus, piemēram, Van Goga vai Manē gleznas.

Oficiālais Google paplašinājums trafika saspiešanai, kas ļauj saglabāt trafiku pārlūkprogrammā Google Chrome.

Paplašinājumi un spraudņi ir noderīgi papildinājumi esošajām funkcijām vietnē un pārlūkprogrammā. Ar to palīdzību jūs varat ierakstīt audio un video no ekrāna, iespējot kļūdu noteikšanu un daudz ko citu.
Šajā rakstā mēs apskatīsim vienkāršākā paplašinājuma izveidi - iecienītāko vietņu palaišanas programmu. Lai gan aplikācija būs primitīva, tā tomēr atklās Google Chrome paplašinājuma izveides un lejupielādes procesu.

HTML, CSS un JS (ja jāpaplašina funkciju komplekts) vēlams zināt pavisam elementārā līmenī, lai labāk izprastu materiālu, bet jebkurā gadījumā kodu paskaidrosim.

Katram Chrome paplašinājumam ir jābūt manifest.json failam. Tas kalpo tikai, lai aprakstītu lietojumprogrammas funkcijas, vispārīgu aprakstu, versijas numuru un atļaujas. Vairāk par šo failu varat lasīt Chrome komandas emuārā.

Šeit viss ir ļoti vienkārši:

( "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" ), "permissions": ["activeTab"] )

Kad esam aprakstījuši paplašinājumu failā manifest.json, varam droši pāriet uz nākamo posmu, proti, iezīmēšanu.

Vispirms uzrakstīsim dažus pamata HTML kodu:

Iepriekš mēs rakstījām spraudņa ietvaru, tagad tas ir pilnīgi tukšs, un jums ir jānorāda nosaukums, saites uz ikonām un fonts. To var izdarīt, izmantojot saites tagu, ņemiet vērā, ka tas nav aizvērts:

Tproger Media ātrā palaišanas programma

Neaizmirstiet norādīt kodējumu, pretējā gadījumā kirilicas burti netiks parādīti.

Pāriesim pie otrā koda bloka, proti, body tag un tā satura.

Lai paplašinājums izskatītos skaistāks un ērtāks nekā tagad, jāpievieno CSS stili.

/* Modālā dokumenta struktūra */ /*vispārīgi iestatījumi visam dokumentam*/ html, body ( font-family: "Open Sans", sans-serif; font-size: 14px; margin: 0; min-height: 180px; polsterējums : 0; platums: 380 pikseļi ) /*iestatiet pirmā līmeņa virsrakstus : #2f5876 ) a:link, a:visited ( krāsa: #000000; kontūra: 0; teksta noformējums: nav; ) /*iestatīt attēla platumu*/ img ( platums: 30 pikseļi; /*attēla platums*/ ) .modal-header ( align-items: center; /*līdzināt elementus uz centru*/ border-bottom: 0,5px solid #dadada; /*apakšējās dalošās līnijas īpašības*/ augstums: 50 pikseļi; ) .modal-content ( polsterējums: 0 22 pikseļi; /* polsterējums augšā un apakšā, augšā un pa kreisi*/ .modal-icons ( border-top: 0,5px solid #dadada; /*augšējās dalošās līnijas īpašības*/ augstums: 50px; platums: 100%; ) .logo ( polsterējums: 16 pikseļi ; /*polsterējums uz visām pusēm*/ ) .logo-icon ( vertikālā izlīdzināšana: teksts apakšā; /*līdzināt teksta apakšai*/ mala-labā: 12 pikseļi; /*iestata elementu atkāpi no attēla*/ ) .version ( color: #444; font-size: 18px; )

Dokumenta pamatiestatījumi ir iestatīti, pāriesim pie nākamās koda daļas, kurā tiks izmantots Flexbox, par kuru tika runāts raksta sākumā.

Flex-container ( displejs: flex; /*rāda konteineru kā bloku / . flex ( necaurredzamība: 1; /*ikonas necaurredzamības parametrs*/ platums: 120 pikseļi; ) .flex:hover (necaurredzamība: 0,4; /*necaurredzamības līmenis, virzot kursoru virs elementa*/ ) .flex .fa (fonta lielums: 40px krāsa: #2f5876 ;

Mēs centāmies komentāros pēc iespējas detalizētāk izskaidrot salīdzinoši sarežģītus jautājumus. Tagad mums vienkārši jāielādē mūsu paplašinājums Chrome pārlūks un tas darbosies, un, ja tas izturēs moderāciju, tas parādīsies paplašinājumu (spraudņu) veikalā.

Tagad pievienosim failu ar paplašinājumu .js gadījumam, ja pēkšņi vajadzēs paplašināt pārlūkprogrammas papildinājuma funkcionalitāti.

Tproger Media Quick Launcher /*šeit esam pievienojuši stilus*/

Tproger palaišanas programma /* Modāla dokumenta struktūra */ /*visa dokumenta vispārīgie iestatījumi*/ html, pamatteksts ( fontu saime: "Open Sans", sans-serif; fonta izmērs: 14 pikseļi; piemale: 0; minimālais augstums: 180px ; polsterējums: 0; platums: 380 pikseļi ) /*iestatīt pirmā līmeņa virsrakstu iestatījumus ; krāsa: #2f5876 ) a:saite, a:visited ( krāsa: #000000; kontūra: 0; teksta noformējums: nav; ) /*iestatīt attēla platumu*/ img (platums: 30px; /*attēla platums* / ) .modal -header ( align-items: center; /*līdzināt elementus uz centru*/ border-bottom: 0,5px solid #dadada; /*apakšējās dalošās līnijas īpašības*/ augstums: 50 pikseļi; ) .modal-content ( polsterējums: 0 22 pikseļi; /*polsterējums augšā un apakšā, augšā un pa kreisi*/ .modal-icons (apmale-augšā: 0,5 pikseļi cieta #dadada; /*augšējās dalošās līnijas īpašības*/ augstums: 50 pikseļi; platums: 100%; ) .logo ( polsterējums : 16px; /*polsterējums uz visām pusēm*/ ) .logo-icon ( vertikālā līdzināšana: teksts apakšā; /*līdzināt teksta apakšai*/ mala-labā: 12 pikseļi; /*iestata elementu atkāpi no attēla*/ .version ( krāsa: #444; fonta izmērs: 18px; ) .flex-container ( displejs: flex; /*parāda konteineru kā bloka elementu*/ justify-content : atstarpe starp; /*vienmērīga elementu izlīdzināšana*/ polsterējums: 10px 22px ) /*iestatīt iestatījumus konteineriem ar ikonām*/ .flex ( necaurredzamība: 1; /* ikonas necaurredzamības parametrs */ platums: 120 pikseļi; ) . :hover ( necaurredzamība : 0,4; /*necaurredzamības līmenis, virzot kursoru virs elementa*/ ) .flex .fa ( fonta izmērs: 40 pikseļi; krāsa: #2f5876; ) Tproger palaidējs (1.0.0)

Ātra piekļuve tipiska programmētāja satura vietnēm

Pēc verifikācijas varat sākt publicēt paplašinājumu. Lai to izdarītu, jums ir jābūt šādiem failiem un mapēm:

Lai lejupielādētu paplašinājumu veikalā, mums jāiet uz izvēlni, virziet kursoru virs “ papildu iestatījumi un pēc tam atlasiet paplašinājumus vai adreses joslā ievadiet chrome://extensions/.

Es vienmēr gribēju pastāstīt cilvēkiem par interesantas iespējas(tehnoloģijas), kas tagad var būt pieejamas visiem, bet nez kāpēc nav pieejamas visiem. Jā, tā izrādījās tautoloģija, taču tā pilnībā atspoguļo manu iekšējo sašutumu par šo man degošo tēmu. Lai kā arī būtu, tagad runa nebūs par to, kā viņi saka. Šodien mēs runāsim par paplašinājumu izveidi Google pārlūkprogramma Chrome (turpmāk tekstā — Chrome).

Paplašinājumu, ko mēs izstrādāsim šajā rakstā, var atrast Google Chrome interneta veikalā ar vienīgo atšķirību, ka tam ir papildu funkcionalitāte. Papildus tam ir pirmkods vietnē GitHub, atkal ar brīdinājumu, ka tur viss ir rakstīts CoffeeScript, un šeit stāsts tiks izstāstīts ar JavaScript. Starp citu, es neesmu CoffeeScript fans vai atbalstītājs, taču tā ir diezgan interesanta un noderīga lieta - iesaku jums to izmēģināt.

Ja kādreiz esat apsvēris domu izveidot paplašinājumu pārlūkprogrammai Chrome, Firefox, Maxthon un citām pārlūkprogrammām, tad droši vien jau esat pamanījis, ka minimālā piepūle, kas jums jāiegulda, ir Chrome. To varat pārbaudīt, apskatot attiecīgo pārlūkprogrammu dokumentāciju.

Paplašinājuma rakstīšana sākas ar tā aprakstu un uzdevumu iestatīšanu, ko tas atrisinās. Tā kā esmu pats sev priekšnieks un varu nokavēt termiņus tik reižu, cik vēlos, man nav jāraksta tehniskās specifikācijas – pietiek saprast, ka:

• Paplašinājumam vajadzētu paslēpt visus komentārus sociālais tīkls"VK";
• Paplašinājumam jāspēj parādīt komentārus;
• Paplašinājumam jāspēj attēlot komentārus noteiktās lapās;

No pirmā acu uzmetiena viss ir vienkārši, un mēs to varam izdarīt. Taču raksta ietvaros īstenosim tikai pirmos divus punktus.

Es paredzu jautājumus, kuru saturs varētu būt apmēram šāds: "Kāpēc slēpt komentārus, ja tā ir visa sociālā tīkla būtība?!" Nu, tas ir godīgs jautājums, kas ir pelnījis detalizētu atbildi:

Apstākļi sanāca tā pēdējā laikā, ieraugot komentārus VK, gribu komentētājiem uzdāvināt facepalmu kalnus. Abonēju lielu skaitu dažādu publisko lapu, tematisku (tīmekļa izstrāde) un ne tik daudz. Un, lai cik dīvaini tas neliktos, es kļūstu par visdāsnāko grupās ar man interesējošu saturu, nevis kaķiem (manā gadījumā pandām). Nekur citur komentāros nebiju redzējis tik daudz neprofesionālas un neglītas informācijas plūsmas, un viņi pat domā par strīdēšanos. Turklāt komentāri iekšā ziņu plūsma Tie neizskatās estētiski patīkami. Vispār teikts un darīts.

Patīkamākais pārsteigums man bija tas, ka jau pašā ceļojuma sākumā mūs sagaida darbību aprakstošais raksturs. Vienkārši sakot, mums ir jāapraksta mūsu lietojumprogramma, tās tiesības un iespējas - šim nolūkam tiek izmantots fails manifest.json.

Vispirms ir jāaizpilda trīs obligātie lauki:

( "manifest_version": 2, // Sākot ar Chrome 18 komplektu 2, pretējā gadījumā 1 (tik veci materiāli netiek atbalstīti) "name": "My Extension", // Paplašinājuma nosaukums "version": "versionString" // Paplašinājuma versija )

Ja ar nosaukumu viss ir skaidrs un manifesta versija ir vēl vienkāršāka, tad jums ir nepieciešams tuvāk apskatīt paplašinājuma versiju.

Tātad, mēs visi esam pieraduši, ka kaut kāda versija sastāv no trim cipariem, kas atdalīti ar punktiem - Major.Minor.Patch (nozīmē skaitlis). Ar npm, bower un citiem priekiem saruna ir īsa: vai nu šādā veidā, vai nē. Taču Google piedāvā šādas iespējas:

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

Plašāku informāciju par visiem laukiem manifesta failā var atrast dokumentācijā.

Mūsu gadījumā manifesta fails izskatīsies šādi:

( "manifest_version": 2, "name": "__MSG_app_name__", "short_name": "VKCommentBlocker", "description": "__MSG_app_description__", "version": "0.1.0", "default_locale": "ru", " atļaujas": [ "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": [ ( "atbilst" : [ "http://vk.com/*", "https://vk.com/*" ], "css": [ "styles/commentblocker.css" ] ) ], "web_accessible_resources": [ "stili /commentblocker_on.css" ] )

No tā, kas iepriekš nav izskatīts

• __MSG_key__ ir Chrome pieeja lietojumprogrammu internacionalizācijai (i18n). Var izmantot gan manifesta failā, gan citos failos (pat CSS).
• web_accessible_resources — resursu ceļu masīvs, kas pēc tam tiks izmantots tīmekļa lapu kontekstā. Ja tajā nav norādīts ceļš, vietnes lapās nevar izmantot neko, ja šāda rīcība ir sagaidāma.

Milzīgs pluss Chrome karmai ir tas, ka tagad mēs varam iespējot paplašinājumu, protams, ja ir izveidoti visi manifest.json norādītie resursi.

Es domāju, ka nav vērts koncentrēties uz to, kas atrodas failos commentblocker.css un commentblocker_on.css. Es došu tikai pirmo, kurā ir uzskaitīti visi atlasītāji, kuros ir komentāri:

@charset "utf-8"; .wall_module .reply_link_wrap .reply_link (redzamība: paslēpta !svarīgi; ) .wall_module .replies_wrap, #wl_reply_form_wrap, #mv_comments_wrap, #mv_your_comment, #pov !im portant; redzamība: paslēpta ! svarīgi ;)

Failā commentblocker_on.css, kā jūs varētu nojaust, ir pretējais. Ņemiet vērā, ka tieši CSS es izmantoju rindiņu ar valodas atslēgas saturu: "__MSG_mode_enable__" . Ir pienācis laiks izveidot failu, kurā tiks saglabātas šīs atslēgas.

Paplašinājuma saknē mēs izveidojam direktoriju _locales un tajā ligzdotos direktorijus en un ru. Tālāk mēs aprakstam mūsu atslēgas failā messages.json.

( "app_name": ( "message": "VK komentāru bloķētājs"), "app_description": ( "message": "Ērts veids, kā paslēpt komentārus ziņu plūsmā un grupās." ), "browser_action": ( "ziņa ": " Pārslēgt komentāra veidu" ), "mode_enable": ( "message": "Nav komentāru!" ), "mode_disable": ( "Ziņojums": "Ar komentāriem!" ) )

Papildus ziņojuma laukam ir arī citi lauki, par kuriem varat uzzināt no dokumentācijas.

Tagad mēs izveidojam background.html failus, vispirms šādi:

Fons

Šeit viss ir tāpat kā parastajā HTML — nekas neparasts. Starp citu, fails background.html nav jāizveido, jo tas tiek ģenerēts automātiski, pamatojoties uz faila manifest.json laukiem.

Varat palaist paplašinājumu, neierakstot nevienu JavaScript rindiņu. Lai to izdarītu, jums jāiet cauri izvēlnei:

• Google Chrome iestatīšana un pārvaldība (Hamburger)
• Papildu rīki
• Paplašinājumi
• Atzīmējiet izvēles rūtiņu blakus “Izstrādātāja režīms”
• Lejupielādējiet neiesaiņotu paplašinājumu
• Atlasiet mapi ar paplašinājumu

Paplašinājums tika ielādēts un parādījās izvēlnē. Jā, jā, šis ir šis “B”.

Šķiet, ka tikko izveidotajam paplašinājumam nav nekā galvā (nav loģikas), un visi komentāri sociālā tīkla lapās ar burtu “B” tagad ir paslēpti. Atbilde ir atrodama manifest.json, kur laukā "content_scripts": () mēs norādījām, kurās lapās (http://vk.com/* un https://vk.com/*) tiks rādīts fails commentblocker.css. tiks automātiski iekļauts, kas paslēpj visus komentārus. Es iesaku jums lasīt vairāk par matemātikas modeļiem. Tas ir tik vienkārši pēc izskata, bet zem pārsega gandrīz pelēks želeja ar visiem zvaniņiem un svilpēm.

Tātad, neierakstot nevienu koda rindiņu, mums jau ir paplašinājums, kas veic galveno tam uzticēto uzdevumu.

Atliek izpildīt otro uzdevuma punktu, proti, ieviest iespēju parādīt komentārus. Īsāk sakot, mums ir jānospiež fails commentblocker_on.css, kas ignorēs faila commentblocker.css noteikumus. Un šeit mūsu visvarenais JavaScript steidzas mums palīgā.

Atcerieties, ko es teicu par background.html? Jā, jā, par to, ka tas nav jāveido. Nedaudz mainīsim manifest.json:

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

Tikko pievienoja JavaScript failu. Nekas īpašs. Dosimies uz šo failu.

Jūs nevarat vienkārši ievietot JS lapā. Un tā pati problēma pastāv ne tikai ar skriptiem. Tāpēc mums ir jāizmanto īpaša executeScript injekcija.

Vispirms paplašinājuma ikonai jāpievieno klikšķu notikumu apdarinātājs:

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

Kur toggleComments ir funkcija, kas ievadīs mūsu CSS failu lapā:

Var toggleComments = function() ( var extensionLink; (document.getElementById("extension") == null) ? (extensionLink = document.createElement("saite"), extensionLink.href = chrome.extension.getURL("/styles/ commentblocker_on.css"), extensionLink.id = "paplašinājums", extensionLink.type = "text/css", extensionLink.rel = "stylesheet", document.getElementsByTagName("head").appendChild(extensionLink)) : (dokuments. getElementsByTagName("head").removeChild(document.getElementById("paplašinājums"))) );

Domāju, ka pietiks ar vārdiem, ka šis koda fragments pārbauda, ​​vai mūsu CSS lapā ir pieslēgts un izdara secinājumus par nepieciešamību to iespējot vai atspējot.

Starp citu, nav daudz pasākumu, kas aptver dažādas vajadzības. Piemēram, ir šādi notikumi:

• onCreated — cilnes izveide.
• onUpdated — cilnes atjaunināšana.
• onRemoved — cilnes aizvēršana.

Ir vērts atzīmēt, ka onUpdated notikums tiek izsaukts divreiz:

• Lapas atjaunināšana;

Vietnē StackOverflow viņi iesaka pārbaudīt lapas statusu:

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

Tagad, noklikšķinot uz ikonas, tiks pievienots stila fails, kurā tiks parādīti komentāri, un, vēlreiz noklikšķinot uz ikonas, tie atkal tiks paslēpti.

Starp citu, ir vērts pieminēt manu pilna versija VK Comment Blocker paplašinājums, kas ir pieejams

Uzrakstiet paplašinājumu google chrome nav grūti. Bet, rakstot pirmo paplašinājumu, var rasties (un rodas) jautājumi. Lielākā daļa rokasgrāmatu pirmā paplašinājuma rakstīšanai ir izstrādātas, lai izmantotu pirmās versijas manifestu, kas tuvākajā nākotnē vairs netiks atbalstīts.

Šis raksts aptvers:

• Kā izveidot manifestu v.2
• Kā strādāt ar attāliem resursiem
• Kā strādāt ar sīkdatnēm
• Kā strādāt ar vietējo krātuvi
• Kā strādāt ar paziņojumiem

Līdz raksta beigām mums būs gatavs organizatora paplašinājums, kurā būs lauks jauna uzdevuma pievienošanai, kā arī kārtējās dienas uzdevumu saraksts. Ļaujiet mums izklāstīt visas prasības organizatoram:

• Jābūt laukam, lai pievienotu notikumu (datums, laiks, notikums)
• Jāparāda visi pašreizējās dienas uzdevumi, sakārtoti pēc laika
• Visi pagātnes notikumi ir jāparāda pārsvītroti
• Tam jābūt laukam, kurā jāievada laiks, cik ilgi paziņojums jāparāda, kā arī izvēles rūtiņai, kas atļauj un aizliedz paziņojumu rādīšanu
• Ir jāparāda paziņojums par gaidāmo notikumu noteiktu laiku pirms pasākuma

Sāksim izveidot paplašinājumu no paša sākuma, tas ir, no manifesta. Manifests ir tas pats fails, kurā ir ierakstīti visi paplašinājuma parametri. Nosaukums, apraksts, versija, atļauja piekļūt vietnēm, atļauja izmantot sīkfailus, paziņojumi, vietējā krātuve. Kopumā manifests ir paplašināšanās smadzenes. Izveidojiet manifest.json failu. Manifests ir vienīgais fails, kuram ir jābūt iepriekš definētam nosaukumam, visus pārējos failus var saukt kā vēlaties. Šajā failā ir trīs obligātie lauki:

manifest.json

(“nosaukums”: “Organizatora paplašinājums”, // Paplašinājuma nosaukums “version”: “1.0”, // Paplašinājuma versija. “manifest_version”: 2 // Manifesta versija)

Šeit ir daži noteikumi:

• Manifesta versijai ir jābūt veselam skaitlim, tas ir, tā ir jāraksta kā 2, nevis "2".
• Paplašinājuma versijai ir jābūt virknei, bet tajā jābūt tikai skaitļiem un punktiem, tas ir, “1.0” ir labs, bet 1.0 un “0.9 beta” ir slikti.

Ar nepieciešamajiem laukiem - tas arī viss, pāriesim pie paplašinājuma uznirstošā loga izveidošanas. Lai logs tiktu atvērts, noklikšķinot uz ikonas, manifestam jāpievieno lauks “browser_action”.

manifest.json

( ... "browser_action": ( "default_title": "Atvērt organizatoru", // Nosaukums. Tas ir redzams, ja virzāt kursoru virs ikonas pārlūkprogrammā "default_icon": "icon_small.png", // Ceļš uz paplašinājumu ikona "default_popup": " popup.html" // Ceļš uz lapu ar uznirstošo logu ) )

Tagad izveidosim uznirstošo logu. Tas ir normāli html lapa, kas var būt jebkura izmēra un krāsas, bez trikiem. Sauksim failu “popup.html”. Nepietiek ar šī faila izveidi - tas ir jānorāda manifestā. Mēs to darījām: "default_popup": "popup.html".

popup.html

Tas darbojas!

Tagad ir pienācis laiks pārbaudīt mūsu paplašinājuma funkcionalitāti. Lai to izdarītu, pārlūkprogrammā lejupielādējiet paplašinājumu. Pārlūkā Chrome atveriet paplašinājumu izvēlni. Mēs ievietojām putnu “Izstrādātāja režīmā”.

Pēc tam parādīsies trīs pogas. Noklikšķiniet uz “Ielādēt neiesaiņotu paplašinājumu...”. Atlasiet mapi ar paplašinājuma failiem. Pēc tam parādīsies mūsu paplašinājums. Ja viss ir pareizi, tad, noklikšķinot uz ikonas, parādīsies logs:

Tagad mēs varam ķerties pie jautrajām lietām. Savienosim divus javascript failus. Pirmais ir popup.js, otrais ir jquery. Ar pirmo problēmu nebūs, bet pieslēgsim nevis lokālo jquery, bet attālo, kas ņemts no adreses ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js. Problēmas rodas tāpēc, ka pēc noklusējuma paplašinājumam nav piekļuves trešo pušu resursiem. Lai iegūtu piekļuvi, jums tas ir jānorāda manifestā. Piekļuve kaut kam ir norādīta laukā “atļaujas”. Turklāt attāliem skriptiem un css ir jānorāda pieejamie attālie resursi.

manifest.json

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

Tagad savienosim šos skriptus ar popup.html

popup.html

Izmantojot krātuvi pārlūkā Chrome, varat saglabāt lietotāja datus. Un tas ir krātuvē, kurā mūsu paplašinājums glabās turpmākos notikumus. Tam ir divi iemesli. Pirmkārt, krātuvē saglabātos datus var sinhronizēt, ja piesakāties pārlūkprogrammā. Un, otrkārt, datus var glabāt ne tikai kā virkni, kā sīkfailos, bet jebkurā formā, tas ir, var uzglabāt gan masīvus, gan objektus. Lai tas darbotos, atvērsim piekļuvi krātuvei manifestā.

manifest.json

( ... "atļaujas": [ ... "krātuve" ] ... )

Tagad pārveidosim uznirstošo logu. Uznirstošajā logā būs lauks ar šodienas datumu, trīs ievades datumam, laikam un jaunā pasākuma aprakstam, poga jauna pasākuma pievienošanai, kā arī visu šodienas notikumu saraksts.

popup.html

Datums

Un nekavējoties pievienojiet datuma attēlojumu blokā #today_date.

popup.js

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

Tam vajadzētu izskatīties šādi:

Tātad, noklikšķinot uz pogas “+”, ir jāpievieno notikums. Faila sākumā mēs deklarēsim globālo krātuves mainīgo - objektu darbam ar krātuvi, kā arī globālu uzdevumu masīvu notikumu glabāšanai.

popup.js

Var krātuve = chrome.storage.sync; var uzdevumi = new Array(); $(function())( … $("#pievienot_uzdevumu").click(function())( var new_task = new Object(); new_task.date = validateField($("#new_date").val(), " datums" ); jauns_uzdevums.laiks = validētField($("#new_time").val(), "laiks"); new_task.task = $("#new_task").val(); if(!new_task.task | |. new_task.date ||. !new_task.task)( return false; ) uzdevumi = jauns_uzdevums.

Validācijas funkcija pārbauda, ​​vai datums ir rakstīts formātā d.m.gggg, bet laiks formātā hh:mm, kā arī, vai notikuma aprakstā ir vismaz trīs rakstzīmes.

popup.js

Var validateField = funkcija(val, tips)( if(tips == "datums")( var datums = val.split("."); mainīgais gads = new Datums(); gads = gads.getFullYear(); if( date.length == 3 && parseInt(date) == datums && datums = 3)( return val; ) return null )

Esam sakārtojuši papildinājumu, pāriesim pie šodienas notikumu saņemšanas. Lai to izdarītu, mums ir jāiegūst visi notikumi no datu bāzes, jāatlasa tikai šodienas notikumi no tiem un jāsakārto pēc laika augošā secībā.

popup.js

$(funkcija())( … 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 = šodienas_uzdevumi[i].time.replace(":", ""); var add = this_time > now_time ? "" : " class="done""; var add_html = ""+šodienas_uzdevumi[i].laiks+" "+šodienas_uzdevumi[i].uzdevumi+""; $("ul").append(pievienot_html); ) ) ) )); … ));

Funkcija getTodayTasks() atgriež tikai notikumus ar šodienas datumu no vispārējā saraksta.

popup.js

Var getTodayTasks = funkcija(uzdevumi)( var šodienas_uzdevumi = new Array(); var šodien = jauns datums(); var šodienas_datums = šodien.getDate()+"."+(šodien.getMonth() + 1)+ "." + today.getFullYear(); for(var i uzdevumos)( if(tasks[i].date == šodienas_datums)( šodienas_uzdevumi = uzdevumi[i]; ) ) if(šodienas_uzdevumi.length > 0)( today_tasks = sortTasks() šodienas_uzdevumi);

Funkcija sortTasks() sakārto notikumus augošā laika secībā.

popup.js

Var sortTasks = funkcija(uzdevumi)( if(uzdevumi.garums > 0)( var swapped = patiess; while (samainīts) ( apmainīts = 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 = uzdevumi[i]; uzdevumi[i] = uzdevumi; uzdevumi = temp; swaped = true; ) ) ) atdot uzdevumus; )

Ir pienācis laiks konfigurēt paziņojumu rādīšanu ekrānā. Uznirstošajam logam pievienosim īpašu izvēles rūtiņu. Ja šī izvēles rūtiņa ir atzīmēta, tiks rādīti paziņojumi, ja tas nav atzīmēts, tie netiks rādīti. Pievienosim arī teksta ievadi. Skaitlis šajā ievadē parāda, cik ilgi pirms notikuma tiks parādīts paziņojums. Tas ir, ja pasākums ir ieplānots plkst. 19:00, šajā teksta ievadē būs 5, kas nozīmē, ka paziņojums tiks parādīts plkst. 18:55. Pievienosim kodu ar šiem ievadiem uz popup.html

popup.html

Rādīt paziņojumus

Tagad izdomāsim, kā tas darbosies. Noklikšķinot uz izvēles rūtiņas, tās atzīmētais atribūts tiks pārbaudīts un atribūta vērtība tiks ierakstīta sīkfailā “show_notifications”. Pāriesim pie teksta ievades. Mainoties tās vērtībai, jaunā vērtība tiks apstiprināta, ja tā ir vesels skaitlis un nepārsniedz 120, mēs ierakstām jauno vērtību sīkfailā “when_to_notify”.

Bet, lai tas darbotos mūsu labā, mums ir jāatver piekļuve sīkfailiem. Lai to izdarītu, dodieties uz manifest.json un pievienojiet to sadaļai “Permissions”

manifest.json

( ... "atļaujas": [ ... "sīkfaili" ] ... )

Tagad jūs varat sākt skriptu. Dosimies uz popup.js. Pirmkārt, ievadēs iestatīsim sākotnējās vērtības. Pēc noklusējuma izvēles rūtiņa nav atzīmēta, tas ir, paziņojumi netiek rādīti, un laiks ir 0. Noklikšķinot uz izvēles rūtiņas, sīkfaila “show_notifications” vērtība mainīsies. Mainot vērtību teksta laukā, mainīsies sīkfaila “when_to_notify” vērtība.

popup.js

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

Sīkāk apskatīsim funkcijas. Sāksim ar darba ar sīkdatnēm funkcijām. IN šajā gadījumā gatavās funkcijas tika ņemtas no w3schools.com.

popup.js

Var setCookie = function(c_name,value,exdays)( /* *Pārņemts no http://www.w3schools.com/js/js_cookies.asp */ var exdate=new Date(); exdate.setDate(exdate.getDate( ) + exdays); var c_value=escape(value) + ((exdays==null) ? "" : "; derīguma termiņš = document.cookie=c_name + "=" + c_value; getCookie = function(c_name)(Zvanīt Vasjai P. /* *Iegūts no http://www.w3schools.com/js/js_cookies.asp */ var i,x,y,ARRcookies=document.cookie.split(" ; "); for (i=0;i

Lai padarītu to skaidrāku, es ievietoju koda aprakstu pašā HTML. Izvēlni sakārtoju vienkārši: bildē ievietoju iekšējā paplašinājuma saiti.

Tā kā es sāku izmantot popup.html, es jums tūlīt pastāstīšu par popup.js

Man tas izskatās pavisam vienkārši:

popup.js
var xhr = jauns XMLHttpRequest(); xhr.open("GET", "http://losttime.su/?tmpl=login&token="+localStorage["lostlogin"], taisnība); // šeit ir GET pieprasījums norādītajai lapai xhr.onreadystatechange = function() ( if (xhr.readyState == 4) // ja viss noritēja labi, izpildiet to, kas ir iekavās ( var dannie = document.getElementById(" dannie") ; dannie.innerHTML = xhr.responseText; // pievienojiet saņemto kodu blokam ar id=dannie ) ) xhr.send();

Iekļāvu arī koda aprakstu.

Tas ir iepriekš aprakstītais dizains, kas ļauj izvilkt un parādīt saturu no jūsu vietnes vai varbūt ne no jūsu vietnes. Bet kas ir svarīgi zināt:
- Manifesta failā atļauju laukā noteikti ierakstiet tās vietnes adresi, no kuras tiks iegūta informācija.
- Popup.js fails ir saistīts ar fona skriptu background.js, jo dati, kas ievadīti vietējā krātuvē failā background.js, ir redzami arī popup.js.

Pirms fona skripta faila background.js apskatīšanas apskatīsim skripta failu, kas darbojas katrā lapā atsevišķi: content.js

Man tas izskatās šādi:

content.js
function onBlur() ( // logs zaudē fokusu chrome.runtime.sendMessage((site:sait,time:localStorage)); // nosūta ziņojumu uz background.js localStorage = "0"; ) window.onblur = onBlur; // ja logs zaudē fokusa funkciju sec() // izpilda katru sekundi ( if(document.webkitVisibilityState == "visible") // ja lapa ir aktīva ( localStorage = parseInt(localStorage,10) +1; // atjaunināšana vietnes dati vietējā krātuvē ) ) var sait=location.hostname; // kurā vietnē atrodas skripts localStorage = "0";

setInterval(sec, 1000) // palaist funkciju katru sekundi
Manuprāt, visinteresantākajam punktam no mana scenārija vajadzētu būt:
chrome.runtime.sendMessage((site:sait,time:localStorage));
Šeit uz fona skriptu tiek nosūtīts ziņojums, proti, divi mainīgie: site:sait - satur tās vietnes adresi, kurā skripts

time:localStorage — šim skriptam pavadītais laiks.
background.js

Šeit viņa patiesībā ir. Sīkāk neko nestāstīšu, jo... principā tas nav nepieciešams. Pietiek zināt skaidru piemēru, lai īstenotu savus plānus. Ja skriptā background.js vietējai krātuvei pievienojat jebkādus datus (kā arī sīkfailus, tīmekļa sql), tos pašus datus var izmantot skriptā popup.js.

Tas būtībā ir viss, ko es gribēju jums pastāstīt par paplašinājuma izveidi, taču es pieskaršos vēl vienam punktam, kurā man bija grūtības.

Iestatījumu lapā man vajadzēja sakārtot vietņu vilkšanu un nomešanu dažādās kolonnās.

Jo Ja dati tiek ievietoti, izmantojot InnerHtml, šī funkcija neparādīsies tāpat vien. Lūk, kas mums bija jāorganizē:

$("#dannie").on("mouseover", ".sait", function() ( $(this).css(("border":"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("mouseover", ".sait", function() ( $(.sait").draggable(( palīgs:"klons" )); ));
parastā vietā:
$(.sait").mouseover(function())( $("#"+this.id).css(("border":"3px solid #ffffff")); )); $(.sait").mouseout(function())( $("#"+this.id).css(("border":"3px solid black")); )); $(.sait").mousedown(function())( $("#"+this.id).css(("border":"0px solid black")); ));