Chrome プラグイン (拡張機能) 開発ガイド (完全デモ)

前面に書かれた

このブログ記事を断続的に書き上げるのに約 1 か月かかり、完全なデモを慎重に書き上げました。ブログを書くのがいかに大変かは誰もが知っているので、転載する際には必ずソースをそのまま残してください。この記事で取り上げるコードのほとんどは、このデモ (https://github.com/sxei/chrome-plugin-demo) にあります。ダウンロードして直接実行できます。

また、この記事には写真が多く含まれており、写真サーバーの帯域幅が限られています。右下隅のディレクトリスクロール監視は、すべての写真が読み込まれるまで待機してからトリガーされますので、読み込みが完了するまでしばらくお待ちください。

この記事の内容:

デモのスクリーンショットをいくつか紹介します。

序文

Chromeプラグインとは

厳密に言えば、ここで取り上げているのはChrome Extensionと呼ぶべきものです。真の Chrome プラグインは低レベルのブラウザ機能拡張機能であり、開発するにはブラウザのソースコードに関する一定の理解が必要になる場合があります。 Chrome プラグインと呼ぶことに慣れている人は多いため、この記事でもこの名前を使用しますが、この記事で説明する Chrome プラグインは実際には Chrome 拡張機能を指していることを読者は認識しておく必要があります。

Chrome プラグインは、ブラウザの機能を強化するために Web テクノロジを使用して開発されたソフトウェアです。これは、HTML、CSS、JS、画像、その他のリソースで構成される .crx サフィックスを持つ圧縮パッケージです。

crx Chrome Extension次の 3 文字の略語ではないかと思います。

さらに、これは単なるフロントエンド技術ではありません。Chrome プラグインは、C++ で記述された dll ダイナミック リンク ライブラリと連携して、全画面スクリーンショットなどのいくつかの低レベル機能 (NPAPI) を実装することもできます。

セキュリティ上の理由により、Chrome ブラウザ バージョン 42 以降では NPAPI プラグインがサポートされなくなり、より安全な PPAPI に置き換えられました。

Chrome プラグイン開発を学ぶことの意義は何ですか?

ブラウザの機能を強化し、独自の「カスタマイズされた」ブラウザを簡単に作成できます。

Chrome プラグインには、次のような便利な API が多数用意されています。

• ブックマークコントロール。
• ダウンロード制御;
• ウィンドウコントロール。
• ラベル制御;
• ネットワーク要求制御および各種イベント監視。
• ネイティブメニューをカスタマイズします。
• 完璧な通信メカニズム。
• 等;

Firefox プラグインではなく Chrome プラグインを使用するのはなぜですか?

• Chrome は市場シェアが高く、より多くのユーザーに使用されています。
• 開発が容易になります。
• 適用シナリオはより広範囲です。Firefox プラグインは Firefox でのみ実行できますが、Chrome は 360 Speed Browser、360 Security Browser、Sogou Browser、QQ Browser など、WebKit カーネルを搭載したすべての国産ブラウザで実行できます。
• さらに、Firefox ブラウザは Chrome プラグインの操作に対しても一定のサポートを提供します。

開発とデバッグ

Chrome プラグインには厳密なプロジェクト構造の要件はありません。このディレクトリにmanifest.jsonがあれば、特別な IDE は必要なく、通常の Web 開発ツールを使用できます。

プラグイン管理ページには、右上のメニュー -> その他のツール -> 拡張機能から入るか、アドレスバーに chrome://extensions と直接入力してアクセスすることもできます。

プラグインをフォルダー形式で直接読み込むには、開發者模式をオンにしてください。そうでない場合は、 .crx形式のファイルのみをインストールできます。 Chrome では、プラグインは Chrome App Store からインストールする必要があります。他の Web サイトからダウンロードしたプラグインは直接インストールできません。そのため、 crxファイルを解凍し、開発者モードから直接読み込むことができます。

開発中は、コードを変更するとプラグインを再読み込みする必要があります。プラグイン管理ページでCtrl+Rを押すだけです。念のため、ページを更新することをお勧めします。

コアの紹介

マニフェスト

これは Chrome プラグインの最も重要かつ不可欠なファイルです。プラグイン関連のすべての設定を構成するために使用され、ルート ディレクトリに配置する必要があります。このうち、 manifest_version 、 name 、 version必須で、 descriptionとiconsは推奨されます。

以下は一般的な設定項目の一部です。すべて中国語のコメントが付いています。完全な設定ドキュメントについては、ここをクリックしてください。

{
	// マニフェストファイルのバージョン。必ず記述する必要があり、2である必要があります。
	"マニフェストバージョン": 2,
	// プラグインの名前 "name": "demo",
	// プラグインのバージョン "version": "1.0.0",
	// プラグインの説明 "description": "シンプルな Chrome 拡張機能のデモ",
	// アイコン、すべてのアイコンに 1 つのサイズを使用するだけで問題ありません "icons":
	{
		"16": "img/icon.png",
		"48": "img/icon.png",
		"128": "img/icon.png"
	},
	// 常に存在する背景 JS または背景ページ "background":
	{
		// 指定方法は 2 つ、JS を指定すると背景ページが自動的に生成されます "page": "background.html"
		//"スクリプト": ["js/background.js"]
	},
	// ブラウザアイコンの設定は右上隅で、browser_action、page_action、app を選択する必要があります "browser_action": 
	{
		"default_icon": "img/icon.png",
		// アイコンがホバーされたときのタイトル、オプション "default_title": "これはサンプルの Chrome プラグインです",
		"default_popup": "popup.html"
	},
	// 特定のページを開いたときにのみ表示されるアイコン /*"page_action":
	{
		"default_icon": "img/icon.png",
		"default_title": "私はページアクションです",
		"default_popup": "popup.html"
	},*/
	// ページにJSを直接挿入する必要がある
	「コンテンツスクリプト」: 
	[
		{
			//"一致": ["http://*/*", "https://*/*"],
			// "<all_urls>" はすべてのアドレスに一致することを意味します "matches": ["<all_urls>"],
			// 複数の JS が順番に挿入されます "js": ["js/jquery-1.8.3.js", "js/content-script.js"],
			// JS は気軽に挿入できますが、CSS は注意が必要です。注意しないとグローバル スタイルに影響する可能性があります。"css": ["css/custom.css"],
			// コード挿入の時間です。オプションの値: "document_start"、"document_end"、または "document_idle"。最後のものはページがアイドル状態であることを意味します。デフォルトは document_idle です。
			"run_at": "ドキュメントの開始"
		},
		// これは、content-script が複数のルールで設定できることを示すためだけのものです {
			「一致」: ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"],
			"js": ["js/show-image-content-size.js"]
		}
	]、
	// 権限アプリケーション「permissions」:
	[
		"contextMenus", // 右クリックメニュー "tabs", // タグ "notifications", // 通知 "webRequest", // Web リクエスト "webRequestBlocking",
		"storage", // プラグインのローカルストレージ "http://*/*", // executeScript または insertCSS 経由でアクセスできる Web サイト "https://*/*" // executeScript または insertCSS 経由でアクセスできる Web サイト ],
	// 通常のページから直接アクセスできるプラグイン リソースのリスト。設定されていない場合は直接アクセスできません "web_accessible_resources": ["js/inject.js"],
	// プラグインのホームページ、これは非常に重要です。この無料の広告スペースを無駄にしないでください "homepage_url": "https://www.baidu.com",
	// ブラウザのデフォルト ページ「chrome_url_overrides」を上書きします:
	{
		// ブラウザのデフォルトの新規タブページを上書きする "newtab": "newtab.html"
	},
	// Chrome 40 より前のプラグイン設定ページの書き方 "options_page": "options.html",
	// Chrome 40 以降でプラグイン設定ページを書く方法。両方書いた場合、新しいバージョンの Chrome は後者の "options_ui" のみを認識します。
	{
		"ページ": "options.html",
		// デフォルトのスタイルをいくつか追加します。"chrome_style": true を使用することをお勧めします。
	},
	// アドレスバーにキーワードを登録して検索候補を表示します。設定できるキーワードは 1 つだけです "omnibox": { "keyword" : "go" },
	// デフォルト言語 "default_locale": "zh_CN",
	// devtools ページエントリ。JS ファイルではなく HTML ファイルのみを指すことができることに注意してください "devtools_page": "devtools.html"
}

コンテンツ スクリプト

いわゆるコンテンツ スクリプトは、実際には Chrome プラグインのページへのスクリプト挿入の一種です (スクリプトと呼ばれていますが、実際には CSS を含めることができます)。 content-scriptsを使用すると、構成を通じて指定されたページに JS と CSS を簡単に挿入できます (動的な挿入が必要な場合は、以下を参照してください)。最も一般的な例は、広告のブロック、ページの CSS のカスタマイズなどです。

構成例:

{
	// ページにJSを直接挿入する必要がある
	「コンテンツスクリプト」: 
	[
		{
			//"一致": ["http://*/*", "https://*/*"],
			// "<all_urls>" はすべてのアドレスに一致することを意味します "matches": ["<all_urls>"],
			// 複数の JS が順番に挿入されます "js": ["js/jquery-1.8.3.js", "js/content-script.js"],
			// JS は気軽に挿入できますが、CSS は注意が必要です。注意しないとグローバル スタイルに影響する可能性があります。"css": ["css/custom.css"],
			// コード挿入の時間です。オプションの値: "document_start"、"document_end"、または "document_idle"。最後のものはページがアイドル状態であることを意味します。デフォルトは document_idle です。
			"run_at": "ドキュメントの開始"
		}
	]、
}

run_at document_startとして指定されていない場合 (デフォルトはdocument_idle )、次のコードは機能しないことに注意してください。

document.addEventListener('DOMContentLoaded', 関数()
{
	console.log('処刑されました!');
});

content-scriptsと元のページは DOM を共有しますが、JS は共有しません。ページの JS (JS 変数など) にアクセスする場合は、 injected jsを通じてのみ実行できます。 content-scripts 、次の 4 つを除いて、 chrome.xxx.apiほとんどにアクセスできません。

• chrome.extension(getURL、inIncognitoContext、lastError、onRequest、sendRequest)
• chrome.i18n
• chrome.runtime(connect、getManifest、getURL、id、onConnect、onMessage、sendMessage) を実行します。
• chrome.ストレージ

実際、これを見て悲観的にならないでください。ほとんどの場合、これらの API で十分です。他の API を本当に呼び出す必要がある場合は、通信を使用してバックグラウンドで呼び出しを行うこともできます (通信については後で詳しく説明します)。

Chrome プラグインは、このような強力な JS インジェクション機能を提供します。あとは想像力を駆使してブラウザを操作するだけです。

背景

バックグラウンド（このように翻訳しましょう）は、プラグイン内のすべての種類のページの中で最も長いライフサイクルを持つ永続的なページです。ブラウザを開くと開き、ブラウザを閉じると閉じるので、常に実行する必要があり、起動時に実行されるグローバルコードは、通常、バックグラウンドに配置されます。

Background は非常に高い権限を持ち、ほぼすべての Chrome 拡張機能 API (devtools を除く) を呼び出すことができ、制限なくドメインをまたいであらゆる Web サイトにアクセスできます。つまり、相手側がCORSを設定する必要なく、ドメインをまたいであらゆる Web サイトにアクセスできます。

テストの結果、バックグラウンドだけでなく、 chrome-extension://id/xx.htmlから直接開かれるすべての Web ページが制限なくクロスドメインできることがわかりました。

設定では、 background pageを通じてウェブページを指定するか、 scriptsを通じて直接 JS を指定できます。Chrome はこの JS のデフォルトのウェブページを自動的に生成します。

{
	// 常に存在する背景 JS または背景ページ "background":
	{
		// 指定方法は 2 つ、JS を指定すると背景ページが自動的に生成されます "page": "background.html"
		//"スクリプト": ["js/background.js"]
	},
}

chrome-extension://xxx/background.htmlを通じてバックグラウンド ページを直接開くことはできますが、開いたバックグラウンド ページは実際にバックグラウンドで実行されるページと同じではないことに注意してください。つまり、無数のbackground.htmlを開くことはできますが、実際にバックグラウンドに残っているのは 1 つだけです。そのインターフェイスを見ることはできず、コードをデバッグすることしかできません。

イベントページ

ここでイベントページについて紹介したいと思います。イベントページとは何でしょうか？バックグラウンドのライフサイクルが長すぎるため、バックグラウンドを長時間マウントするとパフォーマンスに影響する可能性があるため、Google はevent-pagesを作成しました。設定ファイルにおけるこれとバックグラウンドの唯一の違いは、追加のpersistentパラメータです。

{
	"背景"：
	{
		"スクリプト": ["イベントページ.js"],
		「永続的」: false
	},
}

そのライフサイクルは、必要なときにロードされ、アイドル状態のときに閉じられることです。必要なときとはどういう意味ですか?たとえば、最初のインストール、プラグインの更新、コンテンツ スクリプトによるメッセージの送信などです。

設定ファイルの変更に加えて、コードにもいくつかの小さな変更があります。簡単に確認する必要があります。一般的に言えば、バックグラウンドはパフォーマンスをあまり消費しません。

ポップアップ

popup browser_actionまたはpage_actionアイコンをクリックすると開く小さなウィンドウの Web ページです。フォーカスが Web ページから離れるとすぐに閉じます。通常は一時的なインタラクションに使用されます。

popup任意の HTML コンテンツを含めることができ、サイズは自動的に変更されます。 default_popupフィールドを通じてポップアップ ページを指定するか、 setPopup()メソッドを呼び出すことができます。

設定方法:

{
	「ブラウザアクション」:
	{
		"default_icon": "img/icon.png",
		// アイコンがホバーされたときのタイトル、オプション "default_title": "これはサンプルの Chrome プラグインです",
		"default_popup": "popup.html"
	}
} 

ポップアップはアイコンをクリックすると開き、フォーカスが外れるとすぐに閉じられるため、ポップアップ ページのライフ サイクルは一般に非常に短いことに注意することが重要です。長時間実行する必要があるコードは、ポップアップ内に記述しないでください。

権限の面では、バックグラウンドと非常に似ています。両者の最大の違いは、ライフサイクルの違いです。ポップアップでは、 chrome.extension.getBackgroundPage()を介してバックグラウンド ウィンドウ オブジェクトを直接取得できます。

挿入されたスクリプト

ここでのinjected-scriptは私が付けた名前で、DOM 操作を通じてページに挿入される一種の JS を指します。なぜこの種の JS を個別に議論する必要があるのでしょうか?あるいは、なぜこのように JS を挿入する必要があるのでしょうか?

これは、 content-scriptは大きな「欠陥」があり、ページ内の JS にアクセスできないためです。DOM を操作することはできますが、DOM から呼び出すことはできません。つまり、DOM 内のイベントをバインドしてcontent-script内のコードを呼び出すことはできません ( onclickやaddEventListener直接記述することを含む)。ただし、「ページにボタンを追加してプラグインの拡張 API を呼び出す」というのは非常に一般的な要件であるため、どうすればよいでしょうか。実際、これがこのセクションの目的です。

content-script inject-scriptコード例が DOM を通じてページに挿入されます。

// ページにJSを挿入する
関数 injectCustomJs(jsPath)
{
	jsPath = jsPath || 'js/inject.js';
	var temp = document.createElement('script');
	temp.setAttribute('type', 'text/javascript');
	// 取得したアドレスは次のようになります: chrome-extension://ihcokhadfjfchaeagdoclpnjdiokfakg/js/inject.js
	temp.src = chrome.extension.getURL(jsPath);
	temp.onload = 関数()
	{
		// ページ上で見栄えが悪いので、実行後に削除します。this.parentNode.removeChild(this);
	};
	document.head.appendChild(temp);
}

それだけだと思いますか？実行すると、次のエラーが表示されます。

chrome-extension://efbllncjkjiijkppagepehoekjojdclc/js/inject.js の読み込みを拒否しています。拡張機能外部のページでリソースを読み込むには、web_accessible_resources マニフェスト キーにリソースをリストする必要があります。

つまり、Web 上のプラグインのリソースに直接アクセスしたい場合は、明示的に宣言する必要があります。構成ファイルに次の内容を追加します。

{
	// 通常のページから直接アクセスできるプラグイン リソースのリスト。設定されていない場合は直接アクセスできません "web_accessible_resources": ["js/inject.js"],
}

inject-script content-script内のコードをどのように呼び出すかについては、後ほどメッセージ通信の特別章で詳しく紹介します。

ホームページURL

開発者またはプラグインのホームページ設定は、通常、次の 2 つの場所に表示されます。

Chromeプラグインの8つの表示モード

browserAction (ブラウザの右上隅)

browser_actionを設定すると、ブラウザの右上隅にアイコンを追加できます。browser_action browser_actionは、アイコン、 tooltip 、 badge 、 popup含めることができます。

構成例は次のとおりです。

「ブラウザアクション」:
{
	"default_icon": "img/icon.png",
	"default_title": "これはサンプルの Chrome プラグインです",
	"default_popup": "popup.html"
}

アイコン

browser_actionアイコンには、幅と高さが 19 ピクセルの画像を使用することをお勧めします。アイコンが大きいほどサイズが小さくなります。形式は任意ですが、通常は png が推奨されます。マニフェストのdefault_iconフィールドまたは setIcon() メソッドを呼び出すことで設定できます。

ツールチップ

browser_actionマニフェストのdefault_titleフィールドを変更するか、 setTitle()メソッドを呼び出します。

バッジ

badgeと呼ばれるものは、アイコン上にテキストを表示するためのもので、これを使用して、いくつかの小さな拡張ステータス プロンプト情報を更新できます。バッジのスペースが限られているため、4 文字以下 (英語の場合は 4 文字、中国語の場合は 2 文字) のみがサポートされます。バッジは構成ファイルを通じて指定することはできず、コードを通じて実装する必要があります。バッジのテキストと色を設定するには、それぞれsetBadgeText()とsetBadgeBackgroundColor()を使用します。

chrome.browserAction.setBadgeText({text: 'new'});
chrome.browserAction.setBadgeBackgroundColor({color: [255, 0, 0, 255]});

効果：

pageAction (アドレスバーの右側)

pageActionとは、特定のページを開いたときにのみ表示されるアイコンのことです。browserAction との最大の違いは、 browserActionは常に表示されるのに対し、browserAction は特定の状況でのみ表示されるという点です。

Chrome の以前のバージョンでは、pageAction がアドレス バーの右端に配置されていたことに注意してください。左クリックするとポップアップが表示され、右クリックするとデフォルトのオプション メニューが表示されます。

Chrome の新バージョンでは、この戦略が変更されました。PageAction は通常の browserAction と同様にブラウザの右上隅に配置されますが、点灯していないときは灰色で、点灯しているときはカラフルです。灰色のときは、左クリックでも右クリックでもオプションがポップアップ表示されます。

どのバージョンから変更が始まったのか詳しくは調べていませんが、v50.0 では前者のままで、v58.0 で後者に変更されたことはわかっています。

調整後は、 pageActionグレー表示できるbrowserActionと見なすことができます。

• chrome.pageAction.show(tabId) はアイコンを表示します。
• chrome.pageAction.hide(tabId) はアイコンを非表示にします。

例（アイコンはBaiduを開いたときにのみ表示されます）：

// マニフェスト.json
{
	「ページアクション」:
	{
		"default_icon": "img/icon.png",
		"default_title": "私はページアクションです",
		"default_popup": "popup.html"
	},
	"権限": ["宣言コンテンツ"]
}

// 背景.js
chrome.runtime.onInstalled.addListener(function(){
	chrome.declarativeContent.onPageChanged.removeRules(未定義、関数(){
		chrome.declarativeContent.onPageChanged.addRules([
			{
				条件: [
					// Baidu が開かれたときのみ pageAction が表示されます
					新しい chrome.declarativeContent.PageStateMatcher({pageUrl: {urlContains: 'baidu.com'}})
				]、
				アクション: [新しい chrome.declarativeContent.ShowPageAction()]
			}
		]);
	});
});

効果画像:

右クリックメニュー

Chrome プラグインを開発すると、主にchrome.contextMenus API を通じてブラウザの右クリック メニューをカスタマイズできます。右クリック メニューは、通常のページ、選択したテキスト、画像、リンクなど、さまざまなコンテキストで表示できます。同じプラグインで複数のメニューが定義されている場合、Chrome は次のように、それらをプラグインにちなんで名付けられたセカンダリ メニューに自動的に結合します。

最も単純な右クリックメニューの例

// マニフェスト.json
{"権限": ["コンテキストメニュー"]}

// 背景.js
chrome.contextMenus.create({
	タイトル: 「右クリックメニューのテスト」
	onclick: function(){alert('右クリックメニューをクリックしました!');}
});

効果：

右クリックでBaidu検索を追加

// マニフェスト.json
{"権限": ["コンテキストメニュー", "タブ"]}

// 背景.js
chrome.contextMenus.create({
	title: 'Baidu で検索: %s', // %s は選択されたテキストを示します contexts: ['selection'], // この右クリック メニューはテキストが選択されている場合にのみ表示されます onclick: function(params)
	{
		// location は背景に属するウィンドウ オブジェクトであるため、location.href は使用できません。chrome.tabs.create({url: 'https://www.baidu.com/s?ie=utf-8&wd=' + encodeURI(params.selectionText)});
	}
});

効果は以下のとおりです。

構文

ここでは一般的なものをいくつか紹介します。完全な API については、https://developer.chrome.com/extensions/contextMenus をご覧ください。

chrome.contextMenus.create({
	type: 'normal', // タイプ、オプション: ["normal", "checkbox", "radio", "separator"]、デフォルトは normal
	title: 'メニュー名', // 表示されるテキスト。タイプが「セパレータ」でない限り、このパラメータは必須です。タイプが「選択」の場合、%s を使用して選択されたテキストを表示できます。コンテキスト: ['page'], // コンテキスト。オプション: ["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio"], デフォルト ページ
	onclick: function(){}, // クリック時にトリガーされるメソッド parentId: 1, // 右クリック メニュー項目の親メニュー項目 ID。親メニュー項目を指定すると、このメニュー項目は親メニュー項目のサブメニューになります。 documentUrlPatterns: 'https://*.baidu.com/*' // 特定のページでのみこの右クリック メニューを表示します});
// メニュー項目を削除します。chrome.contextMenus.remove(menuItemId);
// すべてのカスタム右クリックメニューを削除します。chrome.contextMenus.removeAll();
// メニュー項目を更新します chrome.contextMenus.update(menuItemId, updateProperties);

オーバーライド（特定のページをオーバーライドする）

overrideページを使用すると、Chrome のデフォルト ブラウザの特定のページを拡張機能によって提供されるページに置き換えることができます。

拡張機能は次のページを置き換えることができます:

• 履歴: ツールメニューから履歴をクリックするか、アドレスバーに直接 chrome://history と入力してアクセスしたページ
• 新しいタブ ページ: 新しいタブを作成したとき、またはアドレス バーに chrome://newtab と入力したときにアクセスするページです。
• ブックマーク: ブラウザのブックマーク、または直接chrome://bookmarksと入力

知らせ：

• 拡張機能は 1 ページのみを置き換えることができます。
• これはシークレット ウィンドウの新しいタブ ページの代わりではありません。
• Web ページにはタイトルが必要です。タイトルがないと、ユーザーが Web ページの URL を見て混乱する可能性があります。

以下のスクリーンショットは、デフォルトの新しいタブ ページと拡張機能によって置き換えられた新しいタブ ページを示しています。

コード (プラグインは 1 つのデフォルト ページのみを置き換えることができることに注意してください。以下はデモンストレーション用です):

「chrome_url_overrides」:
{
	"新しいタブ": "新しいタブ.html",
	"履歴": "history.html",
	"ブックマーク": "bookmarks.html"
}

開発ツール

予熱

Vue を使用したことがある人なら、このタイプのプラグインを見たことがあるはずです。

はい、Chrome では、主に次の方法でプラグインが開発者ツール (devtools) を改ざんすることを許可しています。

• Elements 、 Console 、 Sourcesなどと同じレベルで 1 つ以上のパネルをカスタマイズします。
• サイドバーをカスタマイズします。現在、カスタマイズできるのはElementsパネルのサイドバーのみです。

まず、カスタム パネル (現在のページで jQuery が使用されているかどうかを判断するため) の 2 つの簡単なデモ スクリーンショットを見てみましょう。

サイドバーをカスタマイズします（現在のページのすべての画像を取得します）：

devtools拡張機能の紹介

ホームページ: https://developer.chrome.com/extensions/devtools

公式の写真はこちらです:

開発者ツール ウィンドウが開かれるたびに、devtools ページのインスタンスが作成されます。F12 ウィンドウが閉じられるとページも閉じられるため、devtools ページのライフ サイクルは devtools ウィンドウと一致します。 devtools ページでは、一連の固有のDevTools APIと、限定された一連の拡張 API にアクセスできます。この一連の固有のDevTools API 、devtools ページからのみアクセス可能で、バックグラウンドからはアクセスできません。これらの API には次のものが含まれます。

• chrome.devtools.panels : パネル関連;
• chrome.devtools.inspectedWindow : 検査されたウィンドウに関する情報を取得します。
• chrome.devtools.network : ネットワーク リクエストに関する情報を取得します。

ほとんどの拡張 API はDevToolsページから直接呼び出すことはできませんが、 content-scriptのようにchrome.extensionおよびchrome.runtime API を直接呼び出すことができます。またcontent-scriptのように Message インタラクションを使用してバックグラウンド ページと通信することもできます。

例: devtools拡張機能の作成

まず、開発者ツール用のプラグインを開発するには、マニフェスト ファイルで以下を宣言する必要があります。

{
	// HTML ファイルのみを指定でき、JS ファイルを指定することはできません "devtools_page": "devtools.html"
}

このdevtools.htmlには通常何も含まれていないので、js を導入するだけです。

<!DOCTYPE html>
<html>
<ヘッド></ヘッド>
<本文>
	<script type="text/javascript" src="js/devtools.js"></script>
</本文>
</html>

実際のコードはdevtools.jsであり、html ファイルは「冗長」であることがわかります。そのため、ここで少し行き詰まっているように感じます。なぜdevtools_page JS を直接指定できないのでしょうか?

devtools.js のコードを見てみましょう。

// カスタム パネルを作成します。同じプラグインで複数のカスタム パネルを作成できます。// パラメータは、パネルのタイトル、アイコン (実際には表示する場所はありません)、読み込むページ、読み込み成功後のコールバックです。chrome.devtools.panels.create('MyPanel', 'img/icon.png', 'mypanel.html', function(panel)
{
	console.log('カスタム パネルが正常に作成されました!'); // このログは通常表示されないことに注意してください});

// カスタムサイドバーを作成する chrome.devtools.panels.elements.createSidebarPane("Images", function(sidebar)
{
	// sidebar.setPage('../sidebar.html'); // 読み込むページを指定します sidebar.setExpression('document.querySelectorAll("img")', 'All Images'); // 式で指定します //sidebar.setObject({aaa: 111, bbb: 'Hello World!'}); // オブジェクトの表示を直接設定します});

setPageの効果:

次のスクリーンショットはコードを示しています。

// jQuery を検出
document.getElementById('check_jquery').addEventListener('click', 関数()
{
	// 検査されたページのDOMにアクセスするにはinspectedWindowを使用する必要があります
	// 簡単な例: チェック対象のページが jQuery を使用しているかどうかを確認します
	chrome.devtools.inspectedWindow.eval("jQuery.fn.jquery", 関数(結果、isException)
	{
		var html = '';
		if (isException) html = '現在のページでは jQuery を使用していません。 ';
		else html = '現在のページは jQuery を使用しており、バージョンは次のとおりです:' + result;
		アラート(html);
	});
});

// リソースを開く document.getElementById('open_resource').addEventListener('click', function()
{
	chrome.devtools.inspectedWindow.eval("window.location.href", 関数(結果、isException)
	{
		chrome.devtools.panels.openResource(結果、20、関数()
		{
			console.log('リソースが正常に開かれました!');
		});
	});
});

// 要素を確認する document.getElementById('test_inspect').addEventListener('click', function()
{
	chrome.devtools.inspectedWindow.eval("inspect(document.images[0])", function(result, isException){});
});

// すべてのリソースを取得する document.getElementById('get_all_resources').addEventListener('click', function()
{
	chrome.devtools.inspectedWindow.getResources(関数(リソース)
	{
		アラート(JSON.stringify(リソース));
	});
});

デバッグのヒント

devtools ページでコードを変更する場合は、chrome://extensions ページでCtrl+Rを押して拡張機能を再読み込みし、ページを更新せずに開発者ツールを閉じて再度開く必要があります (開発者ツールを更新せずにページを更新しても変更は反映されません)。

devtools 自体は開発者ツール ページであるため、直接デバッグする方法はほとんどありません。 chrome-extension://extid/devtools.html"を使用してページを直接開くと、関連する特別な API がサポートされていないため、必ずエラーが発生します。これらのエラーをブロックするいくつかのメソッドを記述し、デバッグ後にリリースすることしかできません。

オプション（オプションページ）

いわゆるoptionsページは、プラグインの設定ページです。入口は 2 つあり、1 つはアイコンを右クリックしたときの「オプション」メニュー、もう 1 つはプラグイン管理ページです。

Chrome 40 より前では、オプション ページは他の通常のページと変わりませんでしたが、Chrome 40 以降ではいくつか変更がありました。

まず、オプションの古いバージョンを見てみましょう。

{
	// Chrome 40 より前のプラグイン設定ページの書き方 "options_page": "options.html",
}

このページの内容はあなた次第です。設定後、プラグイン管理ページに選項ボタンの入り口が表示されます。それをクリックすると、Web ページが開きます。特に言うことはありません。

効果：

optionsV2 の新しいバージョンを見てみましょう。

{
	「オプション_ui」:
	{
    	"ページ": "options.html",
		// デフォルトのスタイルをいくつか追加します。"chrome_style": true を使用することをお勧めします。
	},
}

options.htmlのコードは変更せず、設定ファイルのみを変更しました。効果は次のようになります。

背が高くて雄大に見えませんか？

いくつかの注意事項:

• 互換性のために、両方の方法を記述することをお勧めします。両方を記述した場合、Chrome 40 以降ではデフォルトで新しいバージョンが読み取られます。
• 新しいバージョンのオプションではアラートは使用できません。
• データの保存には、ユーザーと自動的に同期されるため、chrome.storage を使用することをお勧めします。

オムニボックス

omniboxは、ユーザーに検索候補を提供する手段です。これが何であるかを理解するために、 gifを見てみましょう。

キーワードを登録してプラグイン独自の検索候補インターフェースをトリガーすると、それを使って好きなことを実行できるようになります。

まず、設定ファイルは次のようになります。

{
	// アドレスバーにキーワードを登録して検索候補を表示します。設定できるキーワードは 1 つだけです "omnibox": { "keyword" : "go" },
}

次に、 background.jsにリスナー イベントを登録します。

// オムニボックスデモ chrome.omnibox.onInputChanged.addListener((text, suggest) => {
	console.log('入力変更: ' + テキスト);
	if(!text) 戻り値:
	if(text == '美しさ') {
		提案する（[
			{content: '中国' + text, description: '「中国の美女」をお探しですか? '},
			{content: '日本' + text, description: '「日本の美人」をお探しですか? '},
			{content: 'タイ' + テキスト、説明: '「タイの美女またはレディーボーイ」をお探しですか? '},
			{content: '韩国' + text, description: '「韓国美人」をお探しですか? '}
		]);
	}
	そうでない場合(テキスト == 'Weibo') {
		提案する（[
			{コンテンツ: 'Sina' + テキスト、説明: 'Sina' + テキスト},
			{コンテンツ: 'Tencent' + テキスト、説明: 'Tencent' + テキスト},
			{コンテンツ: 'Sohu' + テキスト、説明: '検索' + テキスト},
		]);
	}
	それ以外 {
		提案する（[
			{コンテンツ: 'Baidu 検索' + テキスト、説明: 'Baidu 検索' + テキスト},
			{コンテンツ: 'Google 検索' + テキスト、説明: 'Google 検索' + テキスト},
		]);
	}
});

// ユーザーがキーワード候補を受け取ったときにトリガーされます chrome.omnibox.onInputEntered.addListener((text) => {
    console.log('入力内容: ' + テキスト);
	if(!text) 戻り値:
	var href = '';
    if(text.endsWith('美女')) href = 'http://image.baidu.com/search/index?tn=baiduimage&ie=utf-8&word=' + text;
	そうでない場合は、text.startsWith('Baidu Search')) href = 'https://www.baidu.com/s?ie=UTF-8&wd=' + text.replace('Baidu Search', '');
	そうでない場合、if(text.startsWith('Google 検索')) href = 'https://www.google.com.tw/sea​​rch?q=' + text.replace('Google 検索', '');
	そうでない場合は、href = 'https://www.baidu.com/s?ie=UTF-8&wd=' + テキスト;
	オープンUrlCurrentTab(href);
});
// 現在のタブIDを取得する
関数 getCurrentTabId(コールバック)
{
	chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
	{
		if (コールバック) callback (tabs.length ? tabs[0].id: null);
	});
}

//現在のタブでリンクを開く function openUrlCurrentTab(url)
{
	現在のタブIDを取得します(タブID => {
		chrome.tabs.update(タブID、{url: url});
	})
}

デスクトップ通知

Chromeは、 chrome.notificationsとHTML5のネイティブNotificationの間に有意な違いや利点をプッシュするためのプラグインのchrome.notifications APIを提供します。

バックグラウンドJSでは、 chrome.notificationsまたはNotification許可を申請する必要はありません（HTML5メソッドではアクセス許可を申請する必要があります）、直接使用できます。

最も単純な通知：

コード：

Chrome.notifications.create（null、{
	タイプ： 'Basic'、
	iconurl： 'img/icon.png'、
	タイトル：「これはタイトル」、
	メッセージ：「カスタム右クリックメニューをクリックしました！ '
});

通知スタイルは非常にリッチな場合があります：

これは詳細に研究されていません。必要に応じて公式のドキュメントを読むことができます。

5種類のJSの比較

ChromeプラグインJSは、主にこれらの5つのカテゴリに分けることができます： injected script 、 content-script 、 popup js 、 background js 、 devtools js 。

許可の比較

デバッグ方法の比較

JSタイプ	デバッグモード	画像の説明
挿入スクリプト	通常のF12を押すだけです	スクリーンショットを撮るのが面倒です
ContentScript	図に示すようにコンソールとスイッチを開きます
Popup-js	ポップアップページを右クリックして、要素を検査する
背景	プラグイン管理ページの背景ページをクリックします
devtools-js	まだ効果的な方法は見つかりませんでした	-