Ha kíváncsi, Hogyan készítsünk Chrome-bővítményt, a Chrome extensiondocumentation nagyszerű az alapvető megvalósításokhoz. Azonban, hogy több advancedfeatures igényel sok Googling verem túlcsordulás. Készítsünk egy interintermediate Chrome-bővítményt, amely kölcsönhatásba lép az oldallal: megtalálja az első külső linket az oldalon, majd nyissa meg egy új lapon.

manifest.json

a manifest.a JSON file fontos információkat ad meg a Chrome-nak Önről, például a nevét és a szükséges engedélyeket.,

a legalapvetőbb lehetséges kiterjesztés egy manifest.json fájllal rendelkező könyvtár.Hozzunk létre egy könyvtárat, és tegyük a következő JSONinto manifest.json:

{ "manifest_version": 2, "name": "My Cool Extension", "version": "0.1" }

Ez a legalapvetőbb lehetséges manifest.json, az összes szükséges mezővel filledin. A manifest_version – nak mindig 2-nek kell lennie, mert az 1-es verzió 2014 januárjától nem támogatott. Eddig a bővítményünk semmit sem tesz, de egyébként töltsük be a Chrome-ba.,

töltse be a kiterjesztést a Chrome-ba

a kiterjesztés betöltéséhez a Chrome-ban nyissa meg a chrome://extensions/ a böngészőbenés kattintson a jobb felső sarokban a” Fejlesztői mód ” elemre. Most kattintson a” kicsomagolás betöltése… ” elemre, majd válassza ki a kiterjesztés könyvtárát. Most már látnia kell a listát.

amikor megváltoztatja vagy hozzáadja a kódot a kiterjesztésben, csak térjen vissza erre az oldalra és töltse le az oldalt. A Chrome újratölti a kiterjesztést.

content scripts

a content script ” egy JavaScript fájl, amely a weboldalak összefüggésében fut.,”Ez azt jelenti, hogy egy tartalom szkript kölcsönhatásba léphet olyan weboldalakkal, amelyeket a browservisits. Nem minden JavaScript fájl egy Chrome-bővítményben képes erre; látni fogjukmiért később.

adjunk hozzá egycontent.js:

// content.js alert("Hello from your Chrome extension!")

a szkript befecskendezéséhez meg kell mondanunk a manifest.json fájlt róla.,

Add hozzá ezt a manifest.json fájlhoz:

"content_scripts": , "js": } ]

Ez azt mondja a Chrome-nak, hogy adja be a content.js minden olyan oldalra, amelyet meglátogatunk a speciális <all_urls> URL minta. Ha csak néhányra akarjuk beadni a szkriptetoldalak, használhatjuk a match mintákat. Íme néhány példa a"matches"értékeire:

töltse újra a Chrome-bővítményt. Minden egyes oldal, amit meglátogatsz, most megjelenik egy figyelmeztetés. Inkább az oldal első URL-jét írjuk le.,

az URL

jQuery naplózása nem szükséges, de mindent könnyebbé tesz. Először töltsd le a jQuery idegenkedését a jQuery CDN-ről, majd tedd a bővítmény mappájába. A legújabb minified verzió, jquery-2.1.3.min.js. Betöltéséhez addit manifest.json előtt "content.js"., Az egész manifest.json kellene, mint ez:

{ "manifest_version": 2, "name": "My Cool Extension", "version": "0.1", "content_scripts": , "js": } ] }

Most, hogy jQuery, használjuk, hogy jelentkezzen az URL-t, az első külső linkon az oldal a content.js:

// content.js var firstHref = $("a").eq(0).attr("href"); console.log(firstHref);

Megjegyezzük, hogy nem kell használni, jQuery, hogy ellenőrizze, ha a dokumentum betöltése. Bydefault, Chrome fecskendez tartalom szkriptek után a DOM befejeződött.

próbálja ki-minden meglátogatott oldalon látnia kell a kimenetet a konzolban.,

Böngészőműveletek

amikor egy kiterjesztés hozzáad egy kis ikont a címsorhoz, ez egy böngészőakció. A kiterjesztés lehet hallgatni a kattintásokat, hogy a gombot, majd dosomething.

tegye az ikont.png a Google kiterjesztési bemutatójából a kiterjesztés mappájában ésadd hozzá ezt a manifest.json:

"browser_action": { "default_icon": "icon.png" }

a böngésző művelet használatához hozzá kell adnunk az üzenet átadását.

Message passing

a content script hozzáfér az aktuális oldalhoz, de korlátozott az API itcan Hozzáférésben., Például nem hallgathatja meg a böngésző műveletére vonatkozó kattintásokat. Weneed hozzá egy másik típusú script a kiterjesztés, a háttér script, amely hozzáférést biztosít minden Chrome API, de nem tudja elérni az aktuális oldalt. AsGoogle fogalmaz:

tartalom szkriptek van néhány korlátozás. Nem használhatják a chrome.* API-kat, kivéve a extension, i18n, runtime és storage.,

így a tartalom szkript képes lesz egy URL-t kihúzni az aktuális oldalról, demeg kell adnia ezt az URL-t a háttér szkriptnek, hogy valami hasznosat csináljon vele. Annak érdekében, hogy kommunikálni, fogjuk használni, amit a Google hívások üzenet halad, amely lehetővé teszi a szkriptek küldeni, hallgatni az üzeneteket. Ez az egyetlen módja a content szkriptek és a háttér szkriptek interakciójának.,

adja hozzá a következőket amanifest.json a háttér szkriptről: 

"background": { "scripts": }

most hozzáadunkbackground.js:

Ez tetszőleges JSON hasznos terhet küld az aktuális lapra. A jsonpayload kulcsai bármi lehetnek, de az egyszerűség kedvéért a "message" elemet választottam. Most meg kell tolisten az üzenetet content.js:

vegye figyelembe, hogy az összes korábbi kód került át a hallgató, így ezcsak akkor fut, ha a hasznos teher érkezik., Minden alkalommal, amikor rákattint a browseraction ikonra, látnia kell egy URL-t, amely bejelentkezik a konzolra. Ha nem működik, próbálja meg újratölteni a kiterjesztést, majd töltse újra az oldalt.

Új lap megnyitása

használhatjuk a chrome.tabs API-t egy új lap megnyitásához:

chrome.tabs.create({"url": "http://google.com"});

de chrome.tabs csak a background.js, tehát hozzá kell adnunk néhány üzenetet, mivel a background.js megnyithatja a fület, de nem tudja megragadni a fülét., Itt van az ötlet:

  1. Hallgassa meg egy kattintás a böngésző művelet background.js. Ha be van jelölve, küldj egyclicked_browser_action eseményt acontent.js – ra.
  2. amikorcontent.js megkapja az eseményt, megragadja az oldal első linkjének URL-jét. Ezután a open_new_tab – t visszaküldi background.js – ra az URL toopen-nel.
  3. background.js open_new_tab és új lapot nyit a givenurl-lel, amikor megkapja az üzenetet.,

a böngésző műveletre kattintva background.js, amely amessage-t küld a content.js – ra, amely URL-t küld vissza a background.js – re, amely egy új lapot nyit meg az adott URL-vel.

először meg kell mondanunk content.jsaz URL elküldéséhez background.js., Változás content.js a kód használatához:

most hozzá kell adnunk néhány kódot, hogy megmondjuk a background.js az esemény meghallgatásához:

Most, amikor rákattint a böngésző művelet ikonjára, új lapot nyit meg az elsőekkelkülső URL az oldalon.

a teljes content.jsés background.js felett van., Itt van a teljes manifest.json:

és itt van a teljes könyvtárszerkezet:

. ├── background.js ├── content.js ├── icon.png ├── jquery-2.1.3.min.js └── manifest.json

További információ a Chrome-kiterjesztés készítéséről

további információkért próbálja ki a hivatalos Chrome-bővítmény dokumentációt.