Alle varer i Chrome Nettmarked er delt inn i applikasjoner og utvidelser. Vi vil gjøre begge deler. Applikasjonen vi oppretter vil vises som et ikon i en ny nettleserfane og lar deg raskt starte nettstedet ditt. Utvidelsen er en spesiell knapp på verktøylinjen, hvis du klikker på den, vises et panel med de siste nettstedoppdateringene.

Bygge en applikasjon for Google Chrome

1. Last ned arkivet med utvidelsesmalen fra denne lenken.

2. Pakk den ut til et hvilket som helst sted som passer deg. Det er en fil inni manifest.json og ikon icon.png.

3. Åpne filen manifest.json i en notisblokk og rediger innholdet. Du må skrive inn navnet på nettstedet ditt på linje 2, beskrivelsen (opptil 132 tegn) på linje 3, og nettstedsadressen på linjene 5 og 7. Lagre endringene som er gjort.

4. Endre ikonet fra arkivet til ditt eget bilde i PNG-format, størrelse 128*128.

Bygge en utvidelse for Google Chrome

Selv om utvidelsen funksjonelt er vesentlig forskjellig fra applikasjonen, er ikke monteringsalgoritmen mye mer komplisert.

1. Få utvidelsesmalen fra denne lenken.

2. Pakk ut. Åpne manifest.json-filen i Notisblokk og lim inn navnet på nettstedet ditt, dets korte beskrivelse og tittelen på utvidelsesvinduet (linje 2, 3 og 8).

3. Åpne filen labnol.js og angi adressen til RSS-feeden til nettstedet ditt.

4. Bytt ut ikonet fra arkivet med ditt eget bilde i PNG-format, størrelse 128*128.

Utgivelse

Utvidelsen og applikasjonen vi laget kan brukes på to måter. Hvis du er eier av et nettsted og ønsker å tiltrekke flere brukere til det, kan du publisere arbeidet ditt i Chrome Nettmarked. For å gjøre dette, pakk utvidelses- og tilleggsfilene inn i sitt eget arkiv, gå til Chrome Dashboard-siden og last opp arbeidet ditt til Google Store. Her vil du bli bedt om å laste opp et skjermbilde, gi en utvidet beskrivelse og spesifisere noen andre parametere. Siden er på russisk, så du kan lett forstå den. Bare vær oppmerksom på at for å publisere en utvidelse, må du være den bekreftede eieren av nettstedet du opprettet utvidelsen for. I tillegg må du angi en inngangsavgift på $5 per publikasjon.

Hvis du samlet inn utvidelser kun for personlig bruk, for eksempel for å enkelt overvåke oppdateringer til favorittsiden din, åpner du bare utvidelsessiden i nettleseren din og aktiverer utviklermodus. Klikk deretter på knappen Last ned utpakket utvidelse og spesifiser banen til mappen med filene.

Ved å bruke den foreslåtte metoden vil enhver nettsted- eller bloggeier kunne opprette og plassere en merkevareutvidelse for ressursen sin i katalogen for nettleserutvidelser for Google Chrome. Dette vil hjelpe besøkende med å holde seg oppdatert med de siste oppdateringene, noe som vil bringe flere besøkende til nettstedet ditt og øke populariteten.

Jeg har alltid ønsket å fortelle folk om interessante muligheter (teknologier) som nå kan være tilgjengelige for alle, men av en eller annen grunn ikke er tilgjengelige for alle. Ja, det viste seg å være en tautologi, men den gjenspeiler fullt ut min indre indignasjon over dette brennende temaet for meg. Uansett så vil ikke praten nå handle om hvordan de sier. I dag skal vi snakke om å lage utvidelser for Google Chrome-nettleseren (heretter kalt Chrome).

Utvidelsen som vi skal utvikle gjennom denne artikkelen finner du i Google Chrome Nettmarked, med den eneste forskjellen at den har avansert funksjonalitet. I tillegg er det kildekode på GitHub, igjen med forbehold om at alt der er skrevet i CoffeeScript, og her skal historien skrives med JavaScript. Forresten, jeg er ikke en fan eller tilhenger av CoffeeScript, men det er ganske interessant og nyttig - jeg anbefaler deg å prøve det.

Hvis du noen gang har vurdert ideen om å lage en utvidelse for Chrome, Firefox, Maxthon og andre nettlesere, har du sannsynligvis allerede lagt merke til at minimumsinnsatsen du trenger å legge ned er for Chrome. Du kan bekrefte dette ved å se på dokumentasjonen for de tilsvarende nettleserne.

Formulering av problemet

Å skrive en utvidelse begynner med beskrivelsen og innstilling av oppgavene den skal løse. Siden jeg er min egen sjef og jeg kan gå glipp av tidsfrister så mange ganger jeg vil, trenger jeg ikke skrive tekniske spesifikasjoner - det er nok å forstå at:

• Utvidelsen skal skjule alle kommentarer på det sosiale nettverket VK;
• Utvidelsen må kunne vise kommentarer;
• Utvidelsen må kunne vise kommentarer på bestemte sider;

Ved første øyekast er alt enkelt og vi kan gjøre det. Innenfor rammen av artikkelen vil vi imidlertid implementere bare de to første punktene.

Jeg forutser spørsmål hvis innhold kan være noe sånt som dette: "Hvorfor skjule kommentarer hvis dette er hele poenget med et sosialt nettverk?!" Vel, det er et rettferdig spørsmål som fortjener et detaljert svar:

Omstendighetene har vist seg at jeg i det siste, når jeg ser kommentarer på VK, ønsker å gi fjell av facepalmer til kommentatorene. Jeg abonnerer på et stort antall forskjellige offentlige sider, tematisk (nettutvikling) og ikke så mye. Og uansett hvor rart det kan virke, blir jeg den mest sjenerøse i grupper med innhold som er interessant for meg, og ikke katter (i mitt tilfelle, pandaer). Jeg har aldri sett så mye uprofesjonell og stygg informasjon flyte i kommentarene noe annet sted, og de tenker til og med på å krangle. I tillegg ser ikke kommentarer i nyhetsstrømmen estetisk tiltalende ut. Generelt sagt og gjort.

Utvidelsesramme

Den mest hyggelige overraskelsen for meg var at vi helt i begynnelsen av reisen blir møtt av handlingenes beskrivende karakter. Enkelt sagt må vi beskrive applikasjonen vår, dens rettigheter og muligheter - manifest.json-filen brukes til dette.

Først av alt må du fylle ut tre obligatoriske felt:

( "manifest_version": 2, // Starter med Chrome 18 sett 2, ellers 1 (slike gamle ting støttes ikke) "name": "My Extension", // Extension name "version": "versionString" // Extension version )

Hvis alt er klart med navnet, og manifestversjonen er enda enklere, må du se nærmere på utvidelsesversjonen.

Så vi er alle vant til det faktum at en versjon av noe består av tre tall atskilt med prikker - Major.Minor.Patch (Betydningsnummer). Med npm, bower og andre herligheter er samtalen kort: enten på denne måten eller ikke i det hele tatt. Men Google tilbyr følgende alternativer:

"version": "1" "versjon": "1.0" "versjon": "2.10.2" "versjon": "3.1.2.4567"

Du kan lære mer om alle feltene i manifestfilen fra dokumentasjonen.

I vårt tilfelle vil manifestfilen se slik ut:

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

Fra det som ikke har vært vurdert før

• __MSG_key__ er Chromes syn på appinternasjonalisering (i18n). Kan brukes både i manifestfilen og i andre filer (til og med CSS).
• web_accessible_resources - en rekke ressursbaner som senere vil bli brukt i sammenheng med nettsider. Uten å spesifisere banen i den, kan ingenting brukes på nettsider hvis slik oppførsel forventes.

Utvidelsesressurser

Et stort pluss for Chrome karma er at vi nå kan aktivere utvidelsen, selvfølgelig, hvis alle ressursene spesifisert i manifest.json er opprettet.

Jeg tror ikke det er verdt å fokusere på hva som er i filene commentblocker.css og commentblocker_on.css. Jeg vil bare gi den første, som viser alle velgerne som inneholder kommentarer:

@charset "utf-8"; .wall_module .reply_link_wrap. : ingen !import maur, synlighet: skjult ! viktig; ) body:after (posisjon: fast; innhold: "__MSG_mode_enable__"; topp: 5px; høyre: 5px; polstring: 6px 12px; bakgrunnsfarge: #ffc; kantlinje: 1px solid #ddd; z-indeks: 9999 ;)

I commentblocker_on.css-filen, som du kanskje gjetter, er det motsatte. Merk at rett i CSS bruker jeg en linje med språknøkkelinnholdet: "__MSG_mode_enable__" . Det er på tide å lage en fil hvor disse nøklene skal lagres.

I roten til utvidelsen vår lager vi _locales-katalogen og en og ru-katalogene som er nestet i den. Deretter beskriver vi nøklene våre i messages.json-filen.

( "app_name": ( "message": "VK-kommentarblokkering" ), "app_description": ( "message": "En praktisk måte å skjule kommentarer i nyhetsfeeden og gruppene." ), "browser_action": ( "message ": " Bytt kommentartype" ), "mode_enable": ( "message": "Ingen kommentarer!" ), "mode_disable": ( "message": "Med kommentarer!" ) )

I tillegg til meldingsfeltet er det andre felt som du kan lære om fra dokumentasjonen.

Nå lager vi background.html-filene, først slik:

Bakgrunn

Alt her er det samme som i vanlig HTML - ikke noe uvanlig. Du trenger forresten ikke å lage filen background.html, siden den genereres automatisk basert på feltene i manifest.json .

Lansering av utvidelsen

Du kan kjøre utvidelsen uten å skrive en eneste linje med JavaScript. For å gjøre dette, må du gå gjennom menyen:

• Sette opp og administrere Google Chrome (Hamburger)
• Ekstra verktøy
• Utvidelser
• Merk av i boksen ved siden av "utviklermodus"
• Last ned utpakket utvidelse
• Velg mappe med utvidelse

Utvidelsen lastet og dukket opp i menyen. Ja, ja, dette er denne "B".

Det ser ut til at utvidelsen vi nettopp opprettet ikke har noe i hodet (det er ingen logikk), og alle kommentarer på sidene til det sosiale nettverket med bokstaven "B" er nå skjult. Svaret ligger i manifest.json, der vi i feltet "content_scripts": () indikerte på hvilke sider (http://vk.com/* og https://vk.com/*) commentblocker.css-filen vil inkluderes automatisk, noe som skjuler alle kommentarer. Jeg anbefaler deg å lese mer om matematikkmønstre. Det er bare så enkelt i utseende, men under panseret er det nesten en grå vallak, med alle klokkene og fløyter.

Så, uten å skrive en eneste kodelinje, har vi allerede en utvidelse som utfører hovedoppgaven som er tildelt den.

Gjenopplive utvidelsen

Det gjenstår å fullføre det andre punktet i oppgaven, nemlig å implementere muligheten til å vise kommentarer. Kort sagt, vi må presse en commentblocker_on.css-fil, som vil overstyre reglene for commentblocker.css-filen. Og her kommer vår allmektige JavaScript til å hjelpe oss.

Husker du hva jeg sa om background.html? Ja, ja, om det faktum at det ikke må lages. La oss endre manifest.json litt:

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

Bare koblet til JavaScript-filen. Ikke noe spesielt. La oss gå til denne filen.

Du kan ikke bare stappe JS inn på en side. Og det samme problemet eksisterer ikke bare med skript. Derfor må vi bruke en spesiell executeScript-injeksjon.

Først må du legge til en klikkhendelsesbehandler til utvidelsesikonet:

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

Hvor toggleComments er en funksjon som vil injisere CSS-filen vår på siden:

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("hode").removeChild(document.getElementById("utvidelse"))) );

Jeg tror at ordene om at denne kodebiten sjekker om CSS-en vår er tilkoblet på siden og trekker konklusjoner om behovet for å aktivere eller deaktivere den, vil være nok.

Det er forresten ikke mange arrangementer tilgjengelig som dekker et annet spekter av behov. For eksempel er det slike hendelser:

• onCreated - opprette en fane.
• onUpdated - oppdatering av fanen.
• onRemoved - lukker en fane.

Det er verdt å merke seg at onUpdated-hendelsen kalles to ganger:

• Sideoppdatering;

På StackOverflow anbefaler de å sjekke sidestatusen:

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

Nå, når du klikker på ikonet, kobles en stilfil til som viser kommentarer, og å klikke på ikonet igjen vil skjule dem igjen.

konklusjoner

Forresten, det er verdt å nevne min fullversjon av VK Comment Blocker-utvidelsen, som er tilgjengelig i

De mest autoritative personene på dette området er Wladimir Palant (han skrev AdBlock Plus), ... Utvidelser for Chrome er lettere å skrive enn for Firefox. Interessant nok er den mest populære utvidelsen for Chrome "Tyuryaga VKontakte" (ifølge Yandex-statistikk).

Utfordringen er å utvikle en utvidelse som vil svare på enkelte HTML-sider som åpnes i nettleseren. Endre for eksempel HTML-koden til en side for å gjøre det mer praktisk å bruke dette nettstedet.
Løsningen ble testet på Google Chrome 24.x og Chromium 6.x (Debian 6.0.6, amd64).

Løsningen på problemet

Oppsummering av hovedspørsmålene som dukker opp under skrivingen av crx-utvidelsen.

Hvordan registrere en utvidelse?

Hvordan stille inn en timer?

Hvordan registrere en utvidelse?

For en minimumsutvidelse er 4 filer nok:

128.png background.js content.js manifest.json

Hvor er manifest.json:

( "manifest_version": 2, "name": "DomainCheck-utvidelse", "version": "0.1", "background": ( "scripts": ["background.js"]), "content_scripts": [ ( "matches ": [ "*://*/*" ], "js": [ "content..png") // ingen web_accessible_resources )

Background.js-filen inneholder koden som kjøres når nettleseren starter. I dette skriptet kan du "henge" dokumentinnholdshåndteringen (document.location.href).

Chrome genererer selv _generated_background_page.html:

For å kommunisere mellom background.js og innholdsskriptet kan du bruke meldinger (forespørsel/melding) og chrome.extension.getBackgroundPage(). Se også arkitekturoversikten over Chrome-utvidelser. Den sier at "Et innholdsskript er noe JavaScript som kjøres i sammenheng med en side som er lastet inn i nettleseren".

Merk: Det er vanskelig å feilsøke bakgrunnssiden (background.js) i Chromium, siden det ikke er noe tilsvarende. fanene på «Utvidelser»-siden i utviklermodus.

Hvordan sjekke gjeldende URL, trimme den og beregne hashen?

Hvordan installere en behandler på DOMContentLoaded er beskrevet på developer.chrome.com. Se også dokumentasjon om bakgrunnssider (background.js).

For å legge inn HTML-kode på en side kan vi bruke rådene fra artikkelen om Habré (se der for omtale av det globale variabeldokumentet), men vi må også sammenligne gjeldende URL med listen.

Er document.location.href avviklet?

Eksempel fra stackoverflow.com for å få det fullt kvalifiserte domenenavnet:

var url = "http://www.domain.ru/tmp/file.txt?abc=1&cde=2#123" var getLocation = function(href) ( var l = document.createElement("a"); l. href = href; return l; ); var l = getLocation(url); alert(l.vertsnavn)

Du kan velge et underdomene på 2. nivå som dette:

var l = getLocation(url); var d = l.vertsnavn; function cutd(str) ( var re = /.*?\.([\w\d-\u0100-\uffff-\.]+\.[\w\d-\u0100-\uffff-\.]+ )/; return str.replace(re,"$1"); ) alert(cutd(d));

(se tips på stackoverflow.com).

sha1.js injeksjon ...

Hvordan stille inn en timer? Se eksempelutvidelser: Eksempel på hendelsesside, background.js:

chrome.alarms.create((delayInMinutes: 0.1)); chrome.alarms.onAlarm.addListener(function() ( alert("Tiden er ute!"); ));

Denne feilen i Chromium ble lukket 9. januar 2013, men har ennå ikke dukket opp i de siste versjonene for Windows.

Hvis du fortsatt bestemmer deg for å bruke "moderne" alarmer, så er det beskrevet på stackoverflow.com hvordan du riktig stiller inn en alarmtidtaker av en vilkårlig varighet/periode.

For kompatibilitet med eldre nettlesere er det bedre å bruke window.setInterval() i background.js:

var i = 0; window.setInterval(function() ( alert(i); i++), 2*1000); // i millisekunder

Funksjonen setTimeout() er en enkelt "alarmklokke".

Deaktiver-aktiver chrome-utvidelser lanserer background.js på en ny måte. *) må jeg sjekke det samme for å gå inn i modusen? og sove.

Hvordan laste ned config.xml/time.txt, og hvordan analysere dem?

Hvis du bare laster ned via XMLHttpRequest, kan du få følgende melding: "XMLHttpRequest kan ikke laste http://site/config.xml. Origin http://www.google.ru er ikke tillatt av Access-Control-Allow-Origin. ". Dette betyr at når du sendte en forespørsel på tvers av domener, aktiverte du ikke alternativet for CORS, .htaccess:

Overskriftssett Access-Control-Allow-Origin "*"

Du kan tillate forespørsler på tvers av domener i Chrome-utvidelsen og gjennom tillatelser i manifest.json:

( "manifest_version": 2, ... "permissions": [ "http://site/" ],

Begge disse veskene fungerer imidlertid ikke for utpakkede Chromium-utvidelser. For pakkede utvidelser viser Chromium-versjoner 6.0-7.0 noen ganger "Bad magic number" (for ren Chrome observeres ikke denne feilen).
Merk: CORS-beskyttelse kan omgås i Chromium via --disable-web-security-alternativet:

$ chromium-nettleser --disable-web-security http://domene/bane

Tillegg: for Chromium må du endre linjene i manifest.json til følgende (eksplisitt spesifisere domenet og legge til en stjerne i banen):

( "permissions": [ "http://site/*" ],

For å forhindre at nettinspektøren(?) i chrome klager på XMLHttpRequest() når Internett er slått av, kan du gjøre dette:

var req = null; try ( req = new XMLHttpRequest(); ) catch(err) () // se råd på stackoverflow.com

(dette er skrevet på råd fra stackoverflow.com). ...

For å feilsøke parsing kan du bruke console.log("line"). Strenger godtar vognretur ved å bruke "\n".

Parsing av XML til JavaScript i chrome-utvidelsen gjøres slik:

var xml = req.responseXML.documentElement; var ts = xml.getElementsByTagName("timeout"); var timeout = ts.textContent; if (ts) (console.log("timeout="+timeout);) var ds = xml.getElementsByTagName("domene"); if (ds) ( for (var i = 0; i< ds.length; i++) { console.log("domain: "+ds[i].textContent); } }

Hvordan bruke globale atomvariabler og tabelldata i chrome-utvidelse?

For å synkronisere utvidelsesdata ved hjelp av Storage API, trenger du Chrome-versjon >= 20. I manifestet (manifest.json) må du skrive følgende:

"premissions": ["lagring" ]

Som de skriver i google-gruppen "Chromium HTML5", "Jeg vendte oppmerksomheten mot Web SQL Database, men det ser ut til at Web SQL ikke lenger er i "aktivt vedlikehold", noe som får meg til å tro at den vil bli droppet fra HTML-spesifikasjonen." Se W3C Web SQL Database, merk for flere detaljer. Du kan prøve å bruke grunnleggende konsepter - for å utvide plassen for databasen kan du bruke tillatelser: unlimitedStorage i manifest.json. For å bruke "Ubegrenset lagring" er det følgende Offline APIer: 1) App Cache; 2) Filsystem; 3) IndexedDB; 4) WebSQL (avviklet). For et eksempel på bruk av IndexedDB i Chrome, se. For et eksempel på arbeid med IndexedDB, se gist.github.com:

window.indexedDB = window.indexedDB || window.webkitIndexedDB; var req = indexedDB.open("min db") req.onerror = function() ( console.log("error"); )

Indekserte DB-filplasseringer,
Windows: C:\Users\\AppData\Local\Google\Chrome\User Data\Default\IndexedDB,
Linux: /home//.config/google-chrome/Default/IndexedDB/chrome-xxx.indexeddb.leveldb/:

$ sudo ls -la /home/anonymous/.config/google-chrome/Default/IndexedDB/chrome-extension_ojeihbjghbabiocoglbfhdebhhckdnol_0.indexeddb.leveldb/ totalt 24 drwx------ 2 anonyme anonyme 8 4096 Feb0: drwx------ 3 anonym anonym 4096 7. feb 03:08 .. -rw-r--r-- 1 anonym anonym 285 7. feb 03:08 000003.log -rw-r--r-- 1 anonym anonym 16. feb 7 03:08 AKTUELL -rw------- 1 anonym anonym 0 7. feb 03:08 LÅS -rw-r--r-- 1 anonym anonym 46. feb 7 03:08 LOGG -rw-r --r-- 1 anonym anonym 32. feb 7 03:08 MANIFEST-000002

Du kan se på eksempler på bruk av IndexedDB på Mozilla Developer Network.

Å sette inn et stort antall poster i IndexedDB dekkes på stackoverflow.com.

For å legge til elementer til IndexedDB, må du bruke

indexedDB.db.transaction().objectStore().put())

I IndexedDB-databasemappen lagres gamle databaser som .sst-filer, og nye (gjeldende) lagres som .log-filer.

setVersion() er utdatert. Men det er ett triks her [om onupgradeneeded()]: ...

Som det står i Parashuram Narasimhans blogg, "For Chrome: I tilfelle av chrome, kalles ikke den oppgraderte funksjonen. Databasens suksessfunksjon kalles. Her kontrolleres eksistensen av setVersion-metoden. Hvis metoden eksisterer, og den angitte versjonen er større enn databaseversjonen, kalles en setVersion-metoden. Ved suksess for setVersions forespørsel kaller brukeren den oppgraderte metoden med versjonstransaksjonen. Når metoden er fullført, blir versjonstransaksjonen forpliktet ved å lukke databasen. Databasen åpnes igjen med den nyeste versjonen, og denne sendes til suksessen som er definert av brukeren." (så for å kalle onupgradeneeded(), gjør jeg db.setVersion("3")).

Slik henter du data i content.js:

dbreq.onupgradeneeded = function(event) ( console.log("dbreq.onupgradeneeded"); var db = event.target.result; var tx = db.transaction(["test_db"], "readonly"); var store = tx.objectStore("todo");

For å åpne databasen, bruk koden fra axemclion+jepp (openReqShim-funksjon).

Når vi åpner en IndexedDB-database som ikke eksisterer, vil den bli opprettet med et versjonsnummer, versjon = 0. I dette tilfellet kalles onupgradeneeded() og onsuccess() sekvensielt. Første gang vi kaller onupgradeneeded(), er versjonen allerede = 1. Når vi åpner [eksisterende database] en gang til, kalles ikke lenger onupgradeneeded() opp, og versjonsnummeret = 1. (?øker ikke) Bare dbreq .onsuccess() kalles.

En ting til. Det står at "Med Chrome før 23 må du opprette en slik transaksjon manuelt ved å kalle setVersion() - en API som har blitt fjernet fra spesifikasjonen. Den eldre spesifikasjonen kan finnes på: http://www.w3. org /TR/2011/WD-IndexedDB-20110419/", det vil si for å unngå feilen "NotFoundError: DOM IDBDabase Exception 8" i chrome-loggene, må du kalle setVersion().

I Chromium 6.0.472.63 (59945) er ikke IndexedDB-implementeringen stabil, så den er deaktivert og fungerer ikke =)

Generelt må du bruke background.js + iframe + exchange med innholdsskript via meldinger

Hvordan håndtere sideåpningsarrangementet?

"content_scripts": [ ( "matches": [ "*://*/*" ], "js": [ "content.js" ], "run_at": "document_start" ) ], ...

Content.js:

document.addEventListener("DOMContentLoaded", function () ( alert("Abc "+document.location.href); ));

Hvordan formatere HTML-koden til en side? Se å skrive Firefox-utvidelser. Hvordan pakke en utvidelse og hvor skal den plasseres?

For å plassere en utvidelse på Chrome WebStore, må du betale Google en inngangsavgift på $5 (da kan du plassere et hvilket som helst antall utvidelser). Du kan betale med VISA, MasterCard, AMEX eller DISCOVER (i tillegg må du oppgi full postadresse og for- og etternavn ved betaling).

For å plassere utvidelsen trenger du en Google-konto, og så videre. Du trenger et skjermbilde og et reklamebilde. Du må oppdatere utvidelseskoden manuelt, gjennom den samme Chrome WebStore (som jeg forstår, er det ingen automatisk oppdatering via URL, som i Firefox). I manifest.json-filen må du oppdatere utvidelsesversjonen. Noen minutter etter at utvidelsen er lagt til, vil den være tilgjengelig i søket etter Chrome-utvidelser.

Utvidelsespakke for Linux:

#!/bin/bash 7z a -tzip ../domainck-chromium.zip ./* mv ../domainck-chromium.zip ../domainck-chromium.crx

Nøkkelord: Chromium builds for Windows HOWTO, Google Chrome nedlastingsside, Eksempelutvidelser for Google Chrome.

Det er mange nettsteder på Internett som gir muligheten til å rulle opp en side uten å bruke mus eller rullefelt. Men samtidig er det fortsatt nettsteder der det ikke er en slik implementering. "Hvorfor ikke prøve å skrive et skript som vil legge til en slik knapp på alle nettsteder?" – Jeg tenkte og satte i gang med å implementere det. Slike skript kalles brukerskript og har utvidelsen *.user.js. Du kan for eksempel lese den på Habré. Dessverre kan det ikke gjøres uten fallgruver. Det er noen forskjeller i implementeringen av userjs for forskjellige nettlesere. Jeg vil fokusere på å beskrive implementeringen av brukerskriptet vårt som en utvidelse for Google Chrome-nettleseren.

manifest.json

Filen som kreves for Google Chrome-utvidelsen er manifest.json som beskriver parametere, stier til eksterne filer (*.js, *.css, etc.), versjonsstøtte osv. for utvidelse. Du kan lese mer om filen. I vårt tilfelle ser manifest.json-filen slik ut:

( "manifest_version": 2, "content_scripts": [ ( "exclude_globs": , "include_globs": [ "*" ], "js": [ "jquery.js", "backTopUserJS.user.js" ], "css ": [ "css/style.css" ], "matches": [ "http://*/*", "https://*/*" ], "run_at": "document_end" ) ], "converted_from_user_script ": true, "description": "Back top userscript extension for google chrome", "name": "backTopUserJS", "version": "1" )

For enkelhets skyld bruker vi JQuery-biblioteket, som vi plasserte ved siden av manifest.json-filen og hovedskriptfilen (i vårt tilfelle, backTopUserJS.user.js). Innholdet er som følger:

// ==UserScript== // @name backTopUserJS // @author Aleksandr Filatov // @license MIT // @versjon 1.0 // ==/UserScript== funksjon main() ( var disp = $(window).scrollTop () > 400 ? "block" : "ingen"; var $upButton = $("

"); $(document).find("body").append($upButton); $upButton.click(function () ( $("html, body").animate(( scrollTop: 0 ), "slow" ); )); $(window).scroll(function () (if ($(window).scrollTop() > 400) $upButton.fadeIn("slow"); ellers $upButton.fadeOut("slow"); )); ); var script = document.createElement("script"); script.appendChild(document.createTextNode("("+ main +"))();")); (document.body || document.head | | document.documentElement).appendChild(script);

Jeg synes manuset er klart nok til å vurdere i detalj. Bare de siste 3 linjene er verdt å forklare. Faktisk er dette et lite hack som setter inn skriptet vårt i sidens kode. Hvis noen av dere finner en bedre måte, kan dere skrive rettelsene deres i kommentarfeltet :)

Installere utvidelsen i nettleseren

Du kan installere tilpassede skript i Google Chrome, på samme måte som andre nettlesere, men siden Google bryr seg om sikkerheten vår, må de pakkes inn i nettleserutvidelser. La oss se på installasjonen trinn for trinn.

Opprett en mappe for utvidelsen vår slik: C:\MyChromeExtensionUserJS

For hver utvidelse lager vi vår egen katalog, for eksempel i vårt tilfelle vil vi kalle den C:\MyChromeExtensionUserJS\backTopUserJS . Legg til utvidelsesfiler i denne katalogen.

Gå til "Om Google Chrome-nettleseren" -> "Utvidelser"-fanen eller skriv chrome://extensions/ i adressefeltet

Merk av i boksen "Utviklermodus"

Klikk på knappen "Last utpakket utvidelse" og velg katalogen til utvidelsen vår. Klikk "OK".

Utvidelsen er installert og klar til bruk. For å oppdatere utvidelser etter at du har gjort endringer i den, klikker du ganske enkelt "Oppdater utvidelse"-knappen eller, i utviklermodus, trykker du på hurtigtasten Ctrl+R.

Bunnlinjen

Du kan se skriptkildene på github. Skriptet hevder ikke å være ideelt, men fungerer bare som et eksempel og drivkraft for å skrive dine egne tilpassede skript for Google Chrome.