23 oktober 2013 kl. 01:21

Vi skapar vår egen förlängning för Google Chrome

Webbplatsutveckling,
JavaScript,
Google Chrome

Handledning

Habré har redan flera artiklar om att skapa förlängningar för krom, jag kommer att dela med mig av min erfarenhet och beröra de viktigaste sakerna och platserna där jag hade svårt.
Vad du behöver för att skapa ett tillägg i ett nötskal:
1) Grundläggande kunskaper om Javascript
2) Grundläggande kunskaper om HTML
3) 5$

Jag visar dig hur du skapar en förlängning för krom med mitt eget exempel, skapat för att beräkna "bortkastad tid" på Internet. Detta innebär att den här tillägget räknar den tid som spenderas på webbplatser med möjlighet att bestämma besökta webbplatser efter kategori: användbar tid eller förlorad tid.

Så jag börjar skapa ett tillägg genom att skapa en mapp för själva tillägget, där vi kommer att lägga alla filer vi skapar. Jag kallar det "borttappad tid". Därefter skapar jag en manifest.json-fil, den ser ut så här:

manifest.json
("manifest_version": 2, "name": "Lost Time", "version": "1.0", "icons": ("128": ""), "content_scripts": [("matches": ["* : // * / * "]," js ": [" content.js "])]," background ": (" scripts ": [" background.js "])," permissions ": [" http: / /losttime.su/* "]," browser_action ": (" default_title ":" LostTime "," default_icon ":" "," default_popup ":" popup.html "))

Några av raderna bör vara intuitiva, men vad du behöver veta är:
- Värdet manifest_version måste vara "2";
- I content_scripts skriver vi vilket skript som ska köras på alla sidor separat;
- Skriv i bakgrunden ett allmänt skript (bakgrundsskript) som startas när webbläsaren startar;
- I behörigheter skriver vi adressen till webbplatsen från vilken informationen kommer att hämtas.

Allt som jag kommer att använda är inte nödvändigt för dig, om du logiskt taget inte behöver det. ...

Själva fönstret som du kan se genom att klicka på tilläggets ikon är sidan: popup.html.

Det ser ut så här:

popup.html
Lost Time LostTime

För att göra det tydligare införde jag kodbeskrivningen i själva HTML-koden. Jag organiserar menyn enkelt: Jag lägger till den interna länken till tillägget på bilden.

Sedan jag började om popup.html berättar jag om popup.js direkt.

Det ser väldigt enkelt ut för mig:

popup.js
var xhr \u003d ny XMLHttpRequest (); xhr.open ("GET", "http://losttime.su/?tmpl\u003dlogin&token\u003d"+localStorage [" lostlogin "], sant); // det finns en GET-begäran till den angivna sidan xhr.onreadystatechange \u003d function () (om (xhr.readyState \u003d\u003d 4) // om allt gick bra, gör vad som är inom parentes (var dannie \u003d document.getElementById ("dannie") ; dannie.innerHTML \u003d xhr.responseText; // lägg till den mottagna koden i blocket med id \u003d dannie)) xhr.send ();

Jag lade också in en beskrivning av koden.

Det är konstruktionen som beskrivs ovan som låter dig dra och visa innehåll från din, eller kanske inte från din webbplats. Men vad är viktigt att veta:
- I manifestfilen, i behörighetsfältet, måste vi skriva adressen till webbplatsen som informationen kommer från.
- Popup.js-filen är länkad till background.js-skriptet på grund av inmatad data lokalt utrymme på background.js, synlig på popup.js också.

Innan vi tittar på skriptfilen background.js, låt oss titta på skriptfilen som körs på varje sida separat: content.js

Det ser ut så här för mig:

content.js
funktion onBlur () (// fönster förlorar fokus chrome.runtime.sendMessage ((webbplats: sait, tid: localStorage)); // skicka meddelande till background.js localStorage \u003d "0";) window.onblur \u003d onBlur; // om fönstret förlorar fokusfunktionen sek () // körs varje sekund (if (document.webkitVisibilityState \u003d\u003d "synlig") // om sidan är aktiv (localStorage \u003d parseInt (localStorage, 10) +1; // uppdatera webbplatsdata i lokal lagring)) var sait \u003d location.hostname; // vilken webbplats är skriptet på localStorage \u003d "0"; setInterval (sek, 1000); // kör funktionen varje sekund

Jag tror att den mest intressanta punkten från mitt manus borde vara:
chrome.runtime.sendMessage ((webbplats: sait, tid: localStorage));
Det är här ett meddelande skickas till bakgrundsskriptet, nämligen två variabler: site: sait - innehåller adressen till den webbplats där manuset är
time: localStorage - Den tid som spenderas i detta skript.

background.js
chrome.runtime.onMessage.addListener (funktion (begäran, avsändare, sendResponse) (var a \u003d request.site; // data om webbplatsen var b \u003d request.time; // data om den spenderade tiden // här gör vi med dessa data vad vilja.));

Här är hon faktiskt. Jag kommer inte att analysera i detalj någonting, tk. i princip är detta inte nödvändigt. Det räcker att känna till ett illustrativt exempel för att genomföra planen. Om du lägger till lite data till det lokala lagringsutrymmet i background.js-skriptet (liksom cookies, web-sql), kan samma data användas i popup.js-skriptet.

Det är faktiskt allt jag ville berätta om att skapa en förlängning, men jag kommer att beröra ytterligare en punkt där jag stötte på svårigheter.

På inställningssidan behövde jag organisera att dra och släppa webbplatser i olika kolumner.

Eftersom Eftersom data infogas via InnerHtml, kommer den här funktionen inte att visas precis så. Här var vad jag var tvungen att organisera:

$ ("# 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"). på ("mouseover", ".sait", funktion () ($ (". sait"). dragbar ((hjälpare: "klon"))));
istället för det vanliga:
$ (". sait"). mouseover (funktion () ($ ("#" + this.id) .css (("border": "3px solid #ffffff")))); $ (". sait"). mouseout (funktion () ($ ("#" + this.id) .css (("border": "3px fast svart")))); $ (". sait"). mousedown (function () ($ ("#" + this.id) .css (("border": "0px solid black")))); $ (". sait"). draggable ((hjälpare: "klon",));

iMacros är ett tillägg som hjälper till att testa webbsidor. I stället för att gå igenom samma åtgärder på sidan på egen hand behöver utvecklaren bara spela in den nödvändiga sekvensen av åtgärder i iMacros och starta tillägget när det behövs.

Tillägget kan arbeta med webbplatser som implementeras med Java, Flash, Flex, Ajax och Silverlight-teknik.

2. Font lekplats

Tillägg för dem som gillar att "leka med teckensnitt" - låter dig experimentera med hela utbudet av teckensnitt från Google Fonts-biblioteket utan att ändra sidkoden. Du kan inte bara ändra teckensnittet utan också dess storlek, skrivstil och så vidare.

3. Projekt Naptha

En förlängning för Google Chrome, som låter dig välja och kopiera text även från bilder, kommer enligt Cretive Bloq att vara användbar för alla som någonsin har haft att göra med inbäddad text i sitt arbete.

4. Vilket typsnitt

En förlängning som låter dig direkt avgöra vilket typsnitt som används på en viss sida utan att utföra nästan några ytterligare åtgärder - genom att hålla muspekaren över inskriptionen.

5. YSlow

YSlow är ett verktyg som inte bara kontrollerar laddningshastigheten för en viss webbsida utan också berättar för utvecklaren vad som saktar ner den. För att göra detta kontrollerar tillägget webbplatsen mot 23 av de 34 prestandaregler som formulerats av Yahoo-teamet.

6. Webutvecklare

En hel uppsättning användbara verktyg för att hantera webbplatselement - till exempel för att analysera webbresurser och layouter, testa kod och omedelbart ändra parametrar och utseende sidor.

7. Checklista för webbutvecklare

En förlängning för automatisk kontroll av om webbplatsen uppfyller huvudet sEO-principerom det är tillräckligt effektivt och användarvänligt. Resultatet av kontrollen presenteras i form av en slags checklista - du kan se mer detaljerad information och rekommendationer för var och en av de ouppfyllda punkterna, samt att omedelbart korrigera misstag.

8. DevTools Autosave

Låter dig automatiskt spara alla ändringar som görs i sidkoden med Chrome DevTools. Som författaren till materialet noterar hjälper verktyget utvecklare att spara mycket tid.

9. Instant Wireframe

Ett tillägg med vilket du kan "förvandla" vilken sida som helst till blockdiagram materiallayout - trådram. Tillåter utvecklare och webbdesigners att bekanta sig med layouten för vilken sida som helst på webben utan att lämna webbläsaren.

10. Ripple Emulator

Ripple Emulator är ett emuleringstillägg för Google Chrome som låter dig testa webbplatser på olika mobila plattformar med olika skärmupplösningar. Kan användas tillsammans med andra tillägg för att testa och felsöka resurser.

11. Strimma

Streak är en förlängning som gör att du kan transformera brevlåda till Gmail till CRM-systemet. Du kan spåra status för transaktioner och förhandlingar som pågår i e-post med motparter, använd Streak för att bearbeta produktanvändarförfrågningar och spåra buggfixar och så vidare.

12. Sök efter Stackoverflow

Tillägg för snabbsökning på den populära utvecklarresursen Stack Overflow.

13. PHP Ninja Manual

Låter dig direkt få tillgång till PHP 5.5-dokumentation från din webbläsare.

14. PerfectPixel

PerfectPixel är ett tillägg för Google Chrome. Det låter dig "överlägga" ett genomskinligt rutnät på en webbsida och kontrollera de angivna avstånden mot det. Du kan också lägga över andra bilder - till exempel originallayouten - för att säkerställa att den resulterande sidan matchar den exakt:

15. Kod Cola

Visningsverktyg källkod sidor och redigering av CSS-kod.

Du kan ändra skuggor, ruta cirklar och så vidare genom att dra skjutreglaget. När du har gjort ändringar kan du kopiera den resulterande koden och ersätta den i webbplatskoden.

16. Chrome Sniffer

Ett webbläsartillägg som avgör vilka JavaScript-bibliotek, ramverk eller CMS som används på resursen.

17. Switcher för användaragent

User-Agent Switcher är ett tillägg som låter dig "dölja" webbläsaren Google Chrome under Internet Explorer, Opera eller någon annan webbläsare.

18. IE-flik

Inbyggd Internet Explorer-emulator för Chrome.

19. PicMonkey

Enkel och gratis bildredigerare online. Låter dig "ta" bilder eller ta skärmdumpar av webbläsaren - och redigera dem omedelbart med hjälp av tillägget för Chrome.

20. Chrome Daltonize

En förlängning som hjälper till att anpassa webbtjänster för dem som är färgblinda - visar utvecklaren hur webbplatsen ses av dem som är färgblinda. Tillåter webbdesigners och utvecklare att skapa mer tillgängliga tjänster.

21. Sidlinjal

Ett enkelt verktyg som hjälper dig att bestämma höjd, bredd och position för alla element på sidan.

22. Kontrollera Mina länkar

Ett tillägg som kontrollerar en webbsida för trasiga eller felaktiga länkar.

23. Flickr-flik

En förlängning som inte hjälper så mycket i utvecklingen som att hitta inspiration och bra foton. Visar en bild från Flickr-tjänsten på varje ny flik i Google Chrome. När man klickar på det går användaren till författarens sida, där han kan bekanta sig med sina andra verk.

24. Google Art Project

Ett webbläsartillägg som liknar det tidigare pluginet i den här listan - bara istället för foton från Flickr i en ny flik, ser användaren igenkända konstverk - till exempel dukar av Van Gogh eller Manet.

25. Datasparare

Det officiella trafikkomprimeringstillägget från Google, som inkluderar trafikbesparingar i webbläsaren Google Chrome.

Handledning

Allt som jag kommer att använda är inte nödvändigt för dig, om du logiskt taget inte behöver det. ...

Själva fönstret som du kan se genom att klicka på tilläggets ikon är sidan: popup.html.

Det ser ut så här:

popup.html
Lost Time LostTime

För att göra det tydligare införde jag kodbeskrivningen i själva HTML-koden. Jag organiserar menyn enkelt: Jag lägger till den interna länken till tillägget på bilden.

Sedan jag började om popup.html berättar jag om popup.js direkt.

Det ser väldigt enkelt ut för mig:

Jag lade också in en beskrivning av koden.

Det är konstruktionen som beskrivs ovan som låter dig dra och visa innehåll från din, eller kanske inte från din webbplats. Men vad är viktigt att veta:
- I manifestfilen, i behörighetsfältet, måste vi skriva adressen till webbplatsen som informationen kommer från.
- Popup.js-filen är länkad till background.js-skriptet på grund av data som lagras i lokal lagring på background.js syns också på popup.js.

Innan vi tittar på skriptfilen background.js, låt oss titta på skriptfilen som körs på varje sida separat: content.js

Det ser ut så här för mig:

Det är faktiskt allt jag ville berätta om att skapa en förlängning, men jag kommer att beröra ytterligare en punkt där jag stötte på svårigheter.

På inställningssidan behövde jag organisera att dra och släppa webbplatser i olika kolumner.

Eftersom Eftersom data infogas via InnerHtml, kommer den här funktionen inte att visas precis så. Här var vad jag var tvungen att organisera:

Skriva en enkel Chrome-webbläsartillägg

Från DeveloperWorks arkiv

Duane O "Brian

Arkiverat datum: 25.02.2019 | Först publicerad: 13.03.2013

Varje webbläsare har sina egna anhängare och motståndare - och sina egna fördelar och nackdelar. Det som förbinder dem är att människor spenderar mer och mer tid i webbläsare. Den här artikelserien visar hur du skriver ditt eget tillägg för Chrome, Firefox, Internet Explorer och Safari. Läsaren uppmanas att bygga samma enkla tillägg för varje webbläsare, så att han kan få en känsla för vad detta översätts till, hur svårt eller enkelt det är att lösa vissa typiska uppgifter och vad som behövs för att distribuera hans tillägg. Den här artikeln handlar om ett tillägg för webbläsaren Chrome.

Detta innehåll uppdateras inte eller stöds inte längre. Full text artiklar tillhandahålls "som de är" kl pDF-format... Med tanke på den snabba utvecklingen av teknik kan vissa steg och illustrationer ändras.

Tillägg och plugins är användbara tillägg till befintliga funktioner på webbplatsen och i webbläsaren. Med deras hjälp kan du spela in ljud och video från skärmen, aktivera felsökning och mycket mer.
I den här artikeln kommer vi att titta på att skapa det enklaste tillägget - en stjärnmärkt webbplatslansering. Även om applikationen kommer att vara primitiv kommer den fortfarande att täcka processen för att skapa och ladda ner ett tillägg för Google Chrome.

Det är tillrådligt att känna till HTML, CSS och JS (om du måste utöka uppsättningen funktioner) på den mest grundläggande nivån för att förstå materialet bättre, men i vilket fall som helst kommer vi att förklara koden.

Varje Chrome-tillägg måste ha en manifest.json-fil. Det tjänar bara till att beskriva programmets funktioner, allmän beskrivning, versionsnummer och behörigheter. Du kan läsa den här filen mer detaljerat på Chrome dev-teamets blogg.

Låt oss bidra till utvecklingen av webben

Allt är mycket enkelt här:

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

När vi har beskrivit vårt tillägg i filen manifest.json kan vi säkert gå vidare till nästa steg, nämligen markeringen.

Låt oss först skriva lite grundläggande HTML:

Ovan skrev vi ramverket för plugin, nu är det helt tomt och du måste ange ett namn, länkar till ikoner och ett teckensnitt. Detta kan göras med hjälp av länktaggen, notera att den inte stängs:

Tproger Media Quick Launcher

Glöm inte att ange kodningen, annars kommer de kyrilliska bokstäverna inte att visas.

Låt oss gå vidare till det andra kodblocket, nämligen body-taggen och dess innehåll.

Stilar

För att göra tillägget snyggare och bekvämare än det är nu måste du lägga till stilar i CSS.

Vi försökte förklara så mycket som möjligt i kommentarerna om de svåra punkterna. Och nu behöver vi bara ladda vårt tillägg till chrome-webbläsare och det kommer att fungera, och om det modereras, kommer det att visas i förlängningen (plugins).

Låt oss nu lägga till en .js-fil om vi behöver utöka webbläsarens tilläggsfunktionalitet.