- Interneto svetainių kūrimas,
- JavaScript,
- Google Chrome
- Pamoka
Apie „Chrome“ plėtinių kūrimą jau yra keletas straipsnių. Pasidalinsiu savo patirtimi, paliečiu pagrindinius dalykus ir vietas, kuriose turėjau sunkumų.
Ko jums reikia norint sukurti plėtinį trumpai:
1) Pagrindinės Javascript žinios
2) Pagrindinės HTML žinios
3) 5$
Parodysiu, kaip sukurti „Chrome“ plėtinį, naudodamas savo pavyzdį, sukurtą „prarasto laiko“ skaičiavimui internete. Tai reiškia, kad šis plėtinys skaičiuoja laiką, praleistą svetainėse su galimybe nustatyti aplankytas svetaines pagal kategorijas: naudingą ar prarastą laiką.
Taigi, plėtinį pradedu kurti nuo paties plėtinio aplanko, į kurį sutalpinsime visus savo sukurtus failus. Aš tai pavadinsiu „prarastu laiku“. Tada sukuriu manifest.json failą, jis atrodo taip:
manifest.json
( "manifest_version": 2, "name": "Prarastas laikas", "versija": "1.0", "piktogramos": ( "128": ""), "content_scripts": [ ( "atitinka": [ "* ://*/*" ], "js": [ "content.js" ] ) ], "background": ( "skriptai": ["background.js"]), "leidimai": [ "http:/ /losttime.su/*" ], "browser_action": ( "default_title": "LostTime", "default_icon": "", "default_popup": "popup.html" ) )
Kai kurios eilutės turėtų būti intuityvios, bet štai ką reikia žinoti:
- manifest_version reikšmė turi būti „2“;
- Į content_scripts rašome, kuris scenarijus bus paleistas visuose puslapiuose atskirai;
- Fone rašome bendrą scenarijų (fono scenarijų), kuris paleidžiamas paleidus naršyklę;
- Leidimuose rašome svetainės, iš kurios bus paimta informacija, adresą.
Visko, ką aš naudosiu, jūs neprivalote naudoti, jei logiškai jums to tiesiog nereikia. .
Tas pats langas, kurį galite pamatyti spustelėję plėtinio piktogramą, yra puslapis: popup.html.
Man tai atrodo taip:
popup.html
Prarastas laikas ![](https://shongames.ru/wp-content/uploads/2019/11/" Title = )
Kad būtų aiškiau, įterpiau kodo aprašymą pačiame HTML. Meniu sutvarkau paprastai: paveikslėlyje įdedu vidinio plėtinio nuorodą.
Pradėjau nuo popup.html, todėl iš karto papasakosiu apie popup.js
Man tai atrodo gana paprasta:
popup.js
var xhr = naujas XMLHttpRequest(); xhr.open("GET", "http://losttime.su/?tmpl=login&token="+localStorage["lostlogin"], tiesa); // čia yra GET užklausa į nurodytą puslapį xhr.onreadystatechange = function() ( if (xhr.readyState == 4) // jei viskas gerai, vykdykite tai, kas yra skliausteliuose ( var dannie = document.getElementById(" dannie") ; dannie.innerHTML = xhr.responseText; // gautą kodą įtraukite į bloką naudodami id=dannie ) ) xhr.send();
Taip pat pridėjau kodo aprašymą.
Tai yra aukščiau aprašytas dizainas, leidžiantis ištraukti ir rodyti turinį iš jūsų svetainės, o gal ir ne iš jūsų svetainės. Bet ką svarbu žinoti:
- Manifesto faile leidimų laukelyje būtinai parašykite svetainės, iš kurios bus paimta informacija, adresą.
– Popup.js failas yra susietas su fono scenarijumi background.js, nes įvesti duomenys vietinė parduotuvė fone.js, taip pat matomi popup.js.
Prieš žiūrėdami į fono scenarijaus failą background.js, pažvelkime į scenarijaus failą, kuris veikia kiekviename puslapyje atskirai: content.js
Man tai atrodo taip:
content.js
function onBlur() ( // langas praranda fokusą chrome.runtime.sendMessage((site:sait,time:localStorage)); // siunčia pranešimą background.js localStorage = "0"; ) window.onblur = onBlur; // jei langas praranda fokusavimo funkciją sec() // vykdoma kas sekundę ( if(document.webkitVisibilityState == "visible") // jei puslapis aktyvus ( localStorage = parseInt(localStorage,10) +1; // atnaujinti svetainės duomenys vietinėje saugykloje ) ) var sait=location.hostname; // kurioje svetainėje yra scenarijus localStorage = "0"; setInterval(sec, 1000) // paleiskite funkciją kas sekundę
Dauguma įdomus taškas iš mano scenarijaus, manau, turėtų būti:
chrome.runtime.sendMessage((site:sait,time:localStorage));
Čia į foninį scenarijų siunčiamas pranešimas, būtent du kintamieji: site:sait – yra svetainės, kurioje scenarijus, adresas
time:localStorage – laikas, praleistas šiam scenarijui.
background.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) ( var a = request.site; // duomenys apie svetainę var b = request.time; // duomenys apie praleistą laiką // čia mes darome ką su šių duomenų mes norime));
Čia, tiesą sakant, ji yra. Apie nieką nerašysiu, nes... iš esmės tai nėra būtina. Norėdami įgyvendinti savo planą, pakanka žinoti aiškų pavyzdį. Jei scenarijuje background.js į vietinę saugyklą pridedate kokių nors duomenų (taip pat slapukų, žiniatinklio sql), tuos pačius duomenis galima naudoti ir popup.js scenarijuje.
Iš esmės tai viskas, ką norėjau jums pasakyti apie plėtinio kūrimą, tačiau paliesiu dar vieną dalyką, dėl kurio turėjau sunkumų.
Nustatymų puslapyje turėjau suskirstyti svetainių vilkimą į skirtingus stulpelius.
Nes duomenys įterpiami naudojant InnerHtml, tada šią galimybę tai tiesiog nepasirodys. Štai ką turėjome organizuoti:
$("#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((pagalbininkas:"klonas" )); ));
vietoj įprastų:
$(.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")); )); $(.sait").dragable(( pagalbininkas:"klonas", ));
„iMacros“ yra plėtinys, padedantis išbandyti tinklalapius. Užuot pačiam puslapyje atlikę tuos pačius veiksmus, kūrėjui tereikia įrašyti reikiamą veiksmų seką „iMacros“ ir prireikus paleisti plėtinį.
Plėtinys gali dirbti su svetainėmis, įdiegtomis naudojant Java, Flash, Flex, Ajax ir Silverlight technologijas.
2. Šriftų žaidimų aikštelė
Plėtinys tiems, kurie mėgsta „žaisti su šriftais“ – leidžia eksperimentuoti su visu šriftų asortimentu iš „Google Fonts“ bibliotekos nekeičiant puslapio kodo. Galima keisti ne tik patį šriftą, bet ir jo dydį, rašymo stilių ir pan.
3. Projektas Naptha
„Google Chrome“ plėtinys, leidžiantis pasirinkti ir kopijuoti tekstą net iš paveikslėlių, „Cretive Bloq“ teigimu, bus naudingas visiems, kuriems bent kartą savo darbe teko susidurti su įterptu tekstu.
4. Koks šriftas
Plėtinys, leidžiantis akimirksniu nustatyti, koks šriftas naudojamas konkrečiame puslapyje, neatliekant beveik jokių papildomų veiksmų – užvedus pelės žymeklį virš užrašo.
5. YSlow
YSlow yra įrankis, kuris ne tik tikrina konkretaus tinklalapio įkėlimo greitį, bet ir praneša kūrėjui, kas jį lėtina. Norėdami tai padaryti, plėtinys patikrina, ar svetainė atitinka 23 iš 34 „Yahoo“ komandos suformuluotų veikimo taisyklių.
6. Žiniatinklio kūrėjas
Visas komplektas naudingų įrankių valdyti svetainės elementus – pavyzdžiui, analizuoti žiniatinklio išteklius ir maketus, išbandyti kodą ir akimirksniu keisti parametrus ir išvaizda puslapių.
7. Žiniatinklio kūrėjo kontrolinis sąrašas
Pratęsimas skirtas automatinis patikrinimas ar svetainė tenkina pagrindinius SEO principai ar jis pakankamai produktyvus ir patogus vartotojui. Testo rezultatai pateikiami savotiško kontrolinio sąrašo pavidalu – galite pamatyti daugiau Detali informacija ir rekomendacijas dėl kiekvieno iš neįvykdytų punktų, taip pat akimirksniu ištaisyti klaidas.
8. DevTools automatinis išsaugojimas
Leidžia automatinis režimas išsaugokite visus puslapio kodo pakeitimus naudodami Chrome įrankiai DevTools. Kaip pažymi medžiagos autorius, įrankis padeda kūrėjams sutaupyti daug laiko.
9. Instant Wireframe
Plėtinys, kuriuo galite „paversti“ bet kurį puslapį blokinė schema medžiagų išdėstymas – vielinis karkasas. Leidžia kūrėjams ir interneto dizaineriams susipažinti su bet kurio interneto puslapio išdėstymu neišeinant iš naršyklės.
10. Ripple emuliatorius
„Ripple Emulator“ yra „Google Chrome“ emuliatoriaus plėtinys, leidžiantis išbandyti įvairias svetaines mobiliosios platformos su skirtinga ekrano raiška. Galima naudoti kartu su kitais plėtiniais, kad būtų galima išbandyti ir derinti išteklius.
11. Juostelė
„Streak“ yra plėtinys, leidžiantis pasukti Pašto dėžutėį „Gmail“ CRM sistemoje. Galite stebėti vykstančių operacijų ir derybų būseną paštu su sandorio šalimis naudokite Streak, kad apdorotumėte produkto vartotojų užklausas ir stebėtumėte pateiktų klaidų taisymus ir pan.
12. Ieškokite Stackoverflow
Pratęsimas skirtas Greita paieška populiariame kūrėjų šaltinyje „Stack Overflow“.
13. PHP Ninja vadovas
Leidžia iš naršyklės akimirksniu pasiekti PHP 5.5 dokumentaciją.
14. PerfectPixel
„PerfectPixel“ yra „Google Chrome“ plėtinys. Tai leidžia tinklalapyje „perdengti“ permatomą tinklelį ir patikrinti nurodytus atstumus. Galite perdengti kitus vaizdus, pvz., pradinį išdėstymą, kad įsitikintumėte, jog gaunamas puslapis tiksliai jį atitinka:
Peržiūros įrankis pirminis kodas puslapius ir redaguoti CSS kodą.
Vilkdami slankiklį galite keisti šešėlius, dėžutės perimetrus ir pan. Atlikę pakeitimus galite nukopijuoti gautą kodą ir pakeisti jį svetainės kode.
16. Chrome Sniffer
Naršyklės plėtinys, aptinkantis, kurios „JavaScript“ bibliotekos, sistema ar TVS yra naudojamos šaltinyje.
17. Vartotojo ir agento perjungiklis
„User-Agent Switcher“ yra plėtinys, leidžiantis „užmaskuoti“ „Google Chrome“ naršyklę kaip Internet Explorer, Opera ar bet kuri kita naršyklė.
18.IE skirtukas
Integruotas „Internet Explorer“ emuliatorius, skirtas „Chrome“.
19. PicMonkey
Paprasta ir nemokama internetinė vaizdų rengyklė. Leidžia „fiksuoti“ vaizdus arba daryti naršyklės ekrano kopijas ir iš karto jas redaguoti naudojant „Chrome“ plėtinį.
20. Chromo daltonizavimas
Plėtinys, padedantis pritaikyti žiniatinklio paslaugas tiems vartotojams, kurie kenčia nuo daltonizmo – parodantis kūrėjui, kaip svetainę žiūri sergantieji šia liga. Leidžia interneto dizaineriams ir kūrėjams kurti labiau prieinamas paslaugas.
21. Puslapio liniuotė
Paprastas įrankis, padedantis nustatyti bet kurio puslapio elemento aukštį, plotį ir padėtį.
22. Patikrinkite Mano nuorodas
Plėtinys, tikrinantis, ar tinklalapyje nėra neveikiančių ar neteisingų nuorodų.
23. Flickr Tab
Pratęsimas, padedantis ne tiek tobulėjant, kiek ieškant įkvėpimo ir geros nuotraukos. Kiekviename naujame „Google Chrome“ skirtuke rodomas vienas vaizdas iš „Flickr“. Paspaudus ant jo, vartotojas patenka į autoriaus puslapį, kur gali susipažinti su kitais savo darbais.
24. Google meno projektas
Naršyklės plėtinys, panašus į ankstesnį šio sąrašo papildinį – tik vietoj nuotraukų iš „Flickr“ naujame skirtuke vartotojas mato pripažintus meno kūrinius – pavyzdžiui, Van Gogho ar Manet paveikslus.
25. Duomenų taupymo priemonė
Oficialus „Google“ plėtinys, skirtas srauto glaudinimui, leidžiantis taupyti srautą „Google Chrome“ naršyklėje.
- Pamoka
Apie „Chrome“ plėtinių kūrimą jau yra keletas straipsnių. Pasidalinsiu savo patirtimi, paliečiu pagrindinius dalykus ir vietas, kuriose turėjau sunkumų.
Ko jums reikia norint sukurti plėtinį trumpai:
1) Pagrindinės Javascript žinios
2) Pagrindinės HTML žinios
3) 5$
Parodysiu, kaip sukurti „Chrome“ plėtinį, naudodamas savo pavyzdį, sukurtą „prarasto laiko“ skaičiavimui internete. Tai reiškia, kad šis plėtinys skaičiuoja laiką, praleistą svetainėse su galimybe nustatyti aplankytas svetaines pagal kategorijas: naudingą ar prarastą laiką.
Taigi, plėtinį pradedu kurti nuo paties plėtinio aplanko, į kurį sutalpinsime visus savo sukurtus failus. Aš tai pavadinsiu „prarastu laiku“. Tada sukuriu manifest.json failą, jis atrodo taip:
manifest.json
( "manifest_version": 2, "name": "Prarastas laikas", "versija": "1.0", "piktogramos": ( "128": ""), "content_scripts": [ ( "atitinka": [ "* ://*/*" ], "js": [ "content.js" ] ) ], "background": ( "skriptai": ["background.js"]), "leidimai": [ "http:/ /losttime.su/*" ], "browser_action": ( "default_title": "LostTime", "default_icon": "", "default_popup": "popup.html" ) )
Kai kurios eilutės turėtų būti intuityvios, bet štai ką reikia žinoti:
- manifest_version reikšmė turi būti „2“;
- Į content_scripts rašome, kuris scenarijus bus paleistas visuose puslapiuose atskirai;
- Fone rašome bendrą scenarijų (fono scenarijų), kuris paleidžiamas paleidus naršyklę;
- Leidimuose rašome svetainės, iš kurios bus paimta informacija, adresą.
Visko, ką aš naudosiu, jūs neprivalote naudoti, jei logiškai jums to tiesiog nereikia. .
Tas pats langas, kurį galite pamatyti spustelėję plėtinio piktogramą, yra puslapis: popup.html.
Man tai atrodo taip:
popup.html
Prarastas laikas
Kad būtų aiškiau, įterpiau kodo aprašymą pačiame HTML. Meniu sutvarkau paprastai: paveikslėlyje įdedu vidinio plėtinio nuorodą.
Pradėjau nuo popup.html, todėl iš karto papasakosiu apie popup.js
Man tai atrodo gana paprasta:
popup.js
var xhr = naujas XMLHttpRequest(); xhr.open("GET", "http://losttime.su/?tmpl=login&token="+localStorage["lostlogin"], tiesa); // čia yra GET užklausa į nurodytą puslapį xhr.onreadystatechange = function() ( if (xhr.readyState == 4) // jei viskas gerai, vykdykite tai, kas yra skliausteliuose ( var dannie = document.getElementById(" dannie") ; dannie.innerHTML = xhr.responseText; // gautą kodą įtraukite į bloką naudodami id=dannie ) ) xhr.send();
Taip pat pridėjau kodo aprašymą.
Tai yra aukščiau aprašytas dizainas, leidžiantis ištraukti ir rodyti turinį iš jūsų svetainės, o gal ir ne iš jūsų svetainės. Bet ką svarbu žinoti:
- Manifesto faile leidimų laukelyje būtinai parašykite svetainės, iš kurios bus paimta informacija, adresą.
– Popup.js failas yra susietas su fono scenarijumi background.js, nes duomenys, įvesti į vietinę saugyklą background.js, taip pat matomi popup.js.
Prieš žiūrėdami į fono scenarijaus failą background.js, pažvelkime į scenarijaus failą, kuris veikia kiekviename puslapyje atskirai: content.js
Man tai atrodo taip:
content.js
function onBlur() ( // langas praranda fokusą chrome.runtime.sendMessage((site:sait,time:localStorage)); // siunčia pranešimą background.js localStorage = "0"; ) window.onblur = onBlur; // jei langas praranda fokusavimo funkciją sec() // vykdoma kas sekundę ( if(document.webkitVisibilityState == "visible") // jei puslapis aktyvus ( localStorage = parseInt(localStorage,10) +1; // atnaujinti svetainės duomenys vietinėje saugykloje ) ) var sait=location.hostname; // kurioje svetainėje yra scenarijus localStorage = "0"; setInterval(sec, 1000) // paleiskite funkciją kas sekundę
Įdomiausias mano scenarijaus punktas, manau, turėtų būti:
chrome.runtime.sendMessage((site:sait,time:localStorage));
Čia į foninį scenarijų siunčiamas pranešimas, būtent du kintamieji: site:sait – yra svetainės, kurioje scenarijus, adresas
time:localStorage – laikas, praleistas šiam scenarijui.
background.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) ( var a = request.site; // duomenys apie svetainę var b = request.time; // duomenys apie praleistą laiką // čia mes darome ką su šių duomenų mes norime));
Čia, tiesą sakant, ji yra. Apie nieką nerašysiu, nes... iš esmės tai nėra būtina. Norėdami įgyvendinti savo planą, pakanka žinoti aiškų pavyzdį. Jei scenarijuje background.js į vietinę saugyklą pridedate kokių nors duomenų (taip pat slapukų, žiniatinklio sql), tuos pačius duomenis galima naudoti ir popup.js scenarijuje.
Iš esmės tai viskas, ką norėjau jums pasakyti apie plėtinio kūrimą, tačiau paliesiu dar vieną dalyką, dėl kurio turėjau sunkumų.
Nustatymų puslapyje turėjau suskirstyti svetainių vilkimą į skirtingus stulpelius.
Nes Jei duomenys įterpiami naudojant InnerHtml, ši funkcija neatsiras taip. Štai ką turėjome organizuoti:
$("#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((pagalbininkas:"klonas" )); ));
vietoj įprastų:
$(.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")); )); $(.sait").dragable(( pagalbininkas:"klonas", ));
Paprasto „Chrome“ naršyklės plėtinio rašymas
Iš developerWorks archyvų
Dwayne'as O'Brienas
Archyvo data: 2019-02-25 | Pirmą kartą paskelbta: 2013-03-13
Kiekviena naršyklė turi savo šalininkus ir priešininkus – ir savų privalumų bei trūkumų. Juos sieja tai, kad žmonės vis daugiau laiko praleidžia naršyklėse. Šioje straipsnių serijoje parodyta, kaip patiems parašyti plėtinį „Chrome“, „Firefox“, „Internet Explorer“ ir „Safari“ naršyklėms. Skaitytojas kviečiamas kiekvienai naršyklei sukurti tą patį paprastą plėtinį, kad jis pajustų, ką jis reiškia, kaip sunku ar lengva išspręsti tam tikras problemas tipinės užduotys ir ko jums reikia norint platinti plėtinį. Šis straipsnis yra apie „Chrome“ naršyklės plėtinį.
Šis turinys nebeatnaujinamas ar nepalaikomas. Pilnas tekstas Straipsniai pateikiami „tokie, kokie yra“ PDF formatu. Atsižvelgiant į spartus vystymasis technologijos, kai kurie žingsniai ir iliustracijos gali keistis.
Plėtiniai ir papildiniai yra naudingi svetainėje ir naršyklėje esančių funkcijų priedai. Jų pagalba galite įrašyti garsą ir vaizdą iš ekrano, įjungti klaidų aptikimą ir dar daugiau.
Šiame straipsnyje apžvelgsime, kaip sukurti paprasčiausią plėtinį - mėgstamiausių svetainių paleidimo priemonę. Nors programa bus primityvi, ji vis tiek atskleis „Google Chrome“ plėtinio kūrimo ir atsisiuntimo procesą.
Norint geriau suprasti medžiagą, HTML, CSS ir JS (jei reikia išplėsti funkcijų rinkinį) patartina išmanyti labai elementariai, tačiau bet kokiu atveju kodą paaiškinsime.
Kiekvienas „Chrome“ plėtinys turi turėti manifest.json failą. Jis skirtas tik programos funkcijoms apibūdinti, Bendras aprašymas, versijų numerius ir leidimus. Daugiau apie šį failą galite perskaityti „Chrome“ komandos tinklaraštyje.
Prisidėkime prie interneto plėtrosČia viskas labai paprasta:
( "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"] )
Aprašę plėtinį manifest.json faile, galime saugiai pereiti prie kito etapo, būtent žymėjimo.
Pirmiausia parašykime pagrindinį HTML kodą:
Aukščiau parašėme įskiepio sistemą, dabar ji visiškai tuščia ir reikia nurodyti pavadinimą, nuorodas į piktogramas ir šriftą. Tai galima padaryti naudojant nuorodos žymą, atkreipkite dėmesį, kad ji nėra uždaryta:
„Tproger Media“ greitoji paleidimo priemonė
Nepamirškite nurodyti kodavimo, kitaip kirilicos raidės nebus rodomos.
Pereikime prie antrojo kodo bloko, ty kūno žymos ir jos turinio.
StiliaiKad plėtinys atrodytų gražesnis ir patogesnis nei dabar, reikia pridėti CSS stilių.
/* Modalinė dokumento struktūra */ /* Bendrieji nustatymai visam dokumentui*/ html, body ( šriftų šeima: "Open Sans", sans-serif; šrifto dydis: 14 pikselių; paraštė: 0; min aukštis: 180 pikselių; užpildymas: 0; plotis: 380 pikselių; ) /* nustatykite pirmojo lygio antraščių nustatymus*/ h1 ( šriftų šeima: "Menlo", vienspalvė erdvė; šrifto dydis: 22 pikseliai; šrifto svoris: 400; paraštė: 0; spalva: #2f5876; ) a:link, a:visited ( spalva : #000000 kontūras: 0 ) /*nustatyti vaizdo plotį*/ img ( plotis: 30 pikselių; /*vaizdo plotis*/ ) .modal-header ( align-items: centre; /*; elementų lygiavimas centre*/ kraštinė apačioje: 0,5 tšk. solid #dadada; /*apačios skiriamosios linijos savybės*/ aukštis: 50 pikselių) .modal-content ( užpildymas: 0 22 pikseliai; /*padding viršuje ir apačioje, viršuje ir kairėje*/) .modal-icons ( border-top: 0,5px solid #dadada; /*viršutinės skiriamosios linijos savybės*/ aukštis: 50px; plotis: 100%; ) .logo (padding: 16px; /*padding iš visų pusių*/ ) . logotipo piktograma (vertikalus lygiavimas: tekstas apačioje; /*lygiuoti su teksto apačia*/ paraštė dešinėn: 12 pikselių; /*nustato elementų įtrauką iš vaizdo*/ ) .version ( spalva: #444; šrifto dydis: 18px; )
Nustatyti pagrindiniai dokumento nustatymai, pereikime prie kitos kodo dalies, kurioje bus naudojamas Flexbox, apie kurį buvo kalbama straipsnio pradžioje.
Flex-container ( ekranas: lankstus; /*rodo konteinerį kaip bloko elementas*/ justify-content: tarpas-tarp; /*vienodas elementų išlygiavimas*/ užpildymas: 10px 22px; ) /*nustatykite sudėtinių rodinių su piktogramomis nustatymus*/ .flex (nepermatomumas: 1; /*piktogramos neskaidrumo parametras*/ plotis: 120 pikselių; ) .flex:hover ( neskaidrumas: 0,4; /*nepermatomumo lygis užvedus pelės žymeklį virš elemento* / ) .flex .fa ( šrifto dydis: 40 pikselių; spalva: #2f5876; )
Komentaruose stengėmės kuo išsamiau paaiškinti gana sudėtingas problemas. Dabar mums tereikia įkelti savo plėtinį Chrome naršyklė ir jis veiks, o jei praeis moderaciją, atsiras plėtinių (įskiepių) parduotuvėje.
Dabar pridėkime failą su plėtiniu .js, jei staiga prireiktų išplėsti naršyklės priedo funkcionalumą.
„Tproger Media Quick Launcher“ /*čia pridėjome stilių*/
Kodo peržiūra ir publikavimasTproger paleidimo priemonė /* Modalinė dokumento struktūra */ /*bendrieji viso dokumento nustatymai*/ html, body ( šriftų šeima: "Open Sans", sans-serif; šrifto dydis: 14 pikselių; paraštė: 0; min aukštis: 180px ; padding: 0; plotis: 380px ) /*nustatyti pirmojo lygio antraščių nustatymus ; spalva: #2f5876 / ) .modal -header ( align-items: centre; /*lygiuoti elementus į centrą*/ border-bottom: 0,5px solid #dadada; /*apačios skiriamosios linijos savybės*/ aukštis: 50 pikselių; ) .modal-content ( padding: 0 22px; /*padding viršuje ir apačioje, viršuje ir kairėje*/ .modal-icons (bordas-viršus: 0,5px solid #dadada; /*viršutinės skiriamosios linijos savybės*/ aukštis: 50px; plotis: 100%; ) .logo ( padding : 16px; /*padding iš visų pusių*/ ) .logo-icon ( vertikalus lygiavimas: tekstas apačioje; /*lygiuoti su teksto apačia*/ paraštė-dešinė: 12 pikselių; /*nustato elementų įtrauką iš vaizdo*/ .version ( spalva: #444; šrifto dydis: 18px; ) .flex-container ( ekranas: flex; /*rodo konteinerį kaip bloko elementą*/ justify-content : tarpas tarp; /*vienodas elementų lygiavimas*/ užpildymas: 10px 22px ) /*konteinerių su piktogramomis nustatymai*/ .flex ( neskaidrumas: 1; /* piktogramos neskaidrumo parametras */ plotis: 120 pikselių; ) .flex; :hover (nepermatomumas: 0,4; /*nepermatomumo lygis užvedus pelės žymeklį virš elemento*/ ) .flex .fa (šrifto dydis: 40 pikselių; spalva: #2f5876; ) 
Greita prieigaį tipinio programuotojo turinio svetaines
Po patvirtinimo galite pradėti skelbti plėtinį. Norėdami tai padaryti, turite turėti šiuos failus ir aplankus:
Norėdami atsisiųsti plėtinį į parduotuvę, turime eiti į meniu, užveskite pelės žymeklį ant " papildomi nustatymai“, tada pasirinkite „plėtiniai“ arba įveskite adreso juosta chrome://extensions/.
