Pokud vás zajímá, jak vytvořit rozšíření Chrome, rozšíření Chrome je skvělé pro základní implementace. Nicméně, používat pokročilejšífunkce vyžaduje hodně Googling a přetečení zásobníku. Udělejme rozšíření intermediate Chrome, které interaguje se stránkou: najdeprvní externí odkaz na stránce a otevřete jej na nové kartě.

manifest.json

manifest.json soubor říká Chrome důležité informace o vásrextension, stejně jako jeho název a oprávnění, která potřebuje.,

nejzákladnější možné rozšíření je adresář smanifest.json soubor.Pojďme vytvořit adresář a do něj následující JSONinto manifest.json:

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

to je nejzákladnější možné manifest.json, s všechny požadované pole filledin. manifest_version by měl být vždy 2, protože verze 1 isunsupported od ledna 2014. Zatím naše rozšíření nedělá absolutně nic, ale stejně ho načteme do Chromu.,

Vložte rozšíření do Chrome

načíst rozšíření v Chrome, otevřete chrome://extensions/ browserand klikněte na „Developer mode“ v pravém horním rohu. Nyní klikněte na“ Načíst rozbalenérozšíření… “ a vyberte adresář rozšíření. Nyní byste měli vidět vásrozšíření v seznamu.

Když změníte nebo přidáte kód do rozšíření, stačí se vrátit na tuto stránku azatížení stránky. Chrome znovu načte rozšíření.

obsahové skripty

obsahový skript je “ soubor JavaScript, který běží v kontextu webových stránek.,“To znamená, že obsahový skript může komunikovat s webovými stránkami, které browservisits. Ne každý soubor JavaScript v příponě Chrome to dokáže; uvidíme, proč později.

Pojďme přidat obsah skript s názvem content.js:

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

aplikovat skriptu, musíme říci, že naše manifest.json soubor.,

Přidat do manifest.json file:

"content_scripts": , "js": } ]

Toto říká, Chrome, aby se vstřikovat content.js na každé stránce jsme návštěvu pomocí thespecial <all_urls> vzor adresy URL. Pokud chceme skript aplikovat pouze na některéstránky, můžeme použít vzory shody. Zde je několik příkladů hodnot pro"matches":

znovu načtěte rozšíření Chrome. Každá stránka, kterou navštívíte, nyní zobrazí upozornění. Pojďme místo toho najít první URL na stránce.,

protokolování adresy URL

jQuery není nutné, ale vše usnadňuje. Nejprve si stáhněte averzi jQuery z jQuery CDN a vložte ji do složky rozšíření. Idownloaded nejnovější verzi minified, jquery-2.1.3.min.js. Chcete-li jej načíst, přidejte do manifest.json před "content.js"., Celý manifest.json by měl vypadat podobně jako tento:

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

Nyní, že máme jQuery, pojďme ji použít k přihlášení URL první externí linkon stránky v prvku content.js:

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

Všimněte si, že nemusíme používat jQuery zkontrolovat, zda dokument byl načten. Bydefault, Chrome vstřikuje obsahové skripty po dokončení DOM.

Vyzkoušejte to-výstup v konzoli byste měli vidět na každé navštívené stránce.,

akce prohlížeče

když rozšíření přidá malou ikonu vedle adresního řádku, je to prohlížečakce. Vaše rozšíření může poslouchat kliknutí na toto tlačítko a pak dosomething.

vložte ikonu.png z Google je rozšíření výukového programu v rozšíření složku, apřidat to, aby manifest.json:

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

aby bylo možné používat prohlížeč akci, budeme muset přidat předávání zpráv.

předávání zpráv

obsahový skript má přístup na aktuální stránku, ale je omezen v API itcan access., Například nemůže poslouchat kliknutí na akci prohlížeče. Weneed přidat jiný typ skriptu do našeho rozšíření, skript na pozadí, který má přístup ke každému API Chrome, ale nemůže přistupovat k aktuální stránce. AsGoogle to říká:

obsahové skripty mají určitá omezení. Nemohou použít chrome.* Api, s výjimkou extension i18n runtime storage.,

obsah skriptu bude schopen vytáhnout URL aktuální stránky, butwill třeba ruka, která URL na pozadí skript, aby něco udělat usefulwith. Abychom mohli komunikovat,použijeme to, co Google volá předávání zpráv, což umožňuje skriptům odesílat a poslouchat zprávy. Je to jediný způsob, jakobsahové skripty a skripty na pozadí pro interakci.,

Přidejte následující říct, manifest.json o pozadí skript:

"background": { "scripts": }

Nyní přidáme background.js:

Tento pošle libovolný JSON payload na aktuální kartě. Klíče Jsonpayloadu mohou být cokoli, ale pro jednoduchost jsem si vybral "message". Nyní potřebujeme tolisten za vzkaz v content.js:

Všimněte si, že všechny naše předchozí kód byl přesunut do posluchač, tak, že je spuštěn pouze když náklad je obdržel., Pokaždé, když kliknete na ikonu prohlížečeakce, měli byste vidět adresu URL, která se přihlásí ke konzoli. Pokud nepracuje, zkuste znovu načíst rozšíření a znovu načíst stránku.

Otevření nové záložky

můžeme použít chrome.tabs API otevřete novou kartu:

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

chrome.tabs může být použit pouze tím background.js, takže budeme muset přidat ještě nějaké další předávání zpráv od background.js můžete otevřít kartu, ale nemůžu chytit theURL., Zde je myšlenka:

  1. poslouchejte kliknutím na akci prohlížeče v background.js. Když je zaškrtnuto, pošlete událostclicked_browser_action nacontent.js.
  2. kdyžcontent.js událost přijme, uchopí URL prvního odkazu na stránce. Poté odešle open_new_tab zpět na background.js s adresou URL toopen.
  3. background.js poslouchá na open_new_tab otevře nový tab s givenURL, když obdrží zprávu.,

Kliknutím na akci prohlížeče spustí background.js, který pošle zprávu na content.js, který pošle na adresu URL zpět do background.js, který willopen nová záložka s daným URL.

nejprve musíme říct content.js odeslat adresu URL na background.js., Změnitcontent.js chcete-li použít tento kód:

Teď musíme přidat nějaký kód na to říct background.js poslouchat pro tuto událost:

Nyní, když kliknete na prohlížeč akční ikonu, otevře se nová záložka s firstexternal URL na stránce.

balení

plné content.js a background.js jsou výše., Tady je to plný manifest.json:

A tady je v plné adresářovou strukturu:

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

Více o tom, jak vytvořit rozšíření pro Chrome

Pro více informací, zkuste oficiální rozšíření pro Chrome dokumentace.