クローム拡張開発

By quguoliang {.text-intro}

クローム拡張機能とは

• Chrome拡張機能とは、ブラウザの機能を拡張するためにウェブ技術を使って開発されたソフトウェアの一部です。 実際には、HTML、CSS、JS、イメージ、その他のリソースを圧縮したパッケージで、拡張子は.crxです。

• Chromeの拡張機能は、このような360エクストリームブラウザなどのブラウザ上で実行することができます, 360セーフブラウザ, Sogouブラウザ, QQブラウザ, これに加えて、, Firefoxはまた、Chromeプラグインのいくつかのサポートを提供しています.

開発とデバッグ

Chromeのプラグインは、厳密なプロジェクト構造の要件を持っていない, 限り、あなたは、ディレクトリがmanifest.jsonがあることを確認しているようにすることができます, また、特別なIDEを必要としません, 普通のWeb開発ツールがすることができます.

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

カーネル紹介

manifest

• browser_action：右上隅のインジケータアイコンの設定。

• background：背景常駐ページ、高権威

• chrome_url_overrides: Chromeのデフォルトページを拡張機能が提供するものに置き換えます。

• manifest.json 完整配置项アドレス

:::

content-scripts

{
	// ページに直接JSを注入する必要がある
	"content_scripts": 
	[
		{
			//"matches": ["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", or "document_idle"，最後のものは、ページがアイドル状態であることを示す。_idle
			"run_at": "document_start"
		}
	],
}

::.

{
	// 常に常駐するバックエンドJSまたはバックエンドページ。
	"background":
	{
		// 2JSを指定すると、バックグラウンドページが自動的に生成される。
		"page": "background.html"
		//"scripts": ["js/background.js"]
	},
}

:::

popup

• ポップアップは任意のHTMLコンテンツを含むことができ、そのサイズに適応します。
• default_popupフィールドを通してポップアップページを指定するか、setPopup()メソッドを呼び出すことができます。
• 宣言サイクルは短く、長く実行されるコードは可能な限り避けるべきです。

{
	"browser_action":
	{
		"default_icon": "img/icon.png",
		// アイコンホバー時のキャプション（オプション
		"default_title": "これはChromeプラグインのサンプルだ。,
		"default_popup": "popup.html"
	}
}

chrome提供するAPI

• ブックマークコントロール
• 閲覧履歴コントロール
• ウィンドウコントロール
• ラベルコントロール
• ネットワークリクエストコントロール、各種イベントリスニング
• ネイティブメニューのカスタマイズ
• デスクトップ通知
• 完璧な通信メカニズム
• ...

コミュニケーション

その他

ローカルストレージ

• chrome.storageはプラグイングローバル用で、バックグラウンドでデータを保存してもcontent-scriptで取得できます；
• chrome.storage.syncは現在ログインしているユーザーに追従して自動的に同期することができます。このコンピュータで変更された設定は自動的に他のコンピュータに同期されます；

webRequest

//manifest.json
{
	// 許可リクエスト
	"permissions":
	[
		"webRequest", // web 
		"webRequestBlocking", // ウェブリクエストをブロックする
		"storage", // プラグインのローカルストレージ
		"http://*/*", // executeScriptまたはinsertCSSでアクセスできるウェブサイト。
		"https://*/*" // executeScriptまたはinsertCSSでアクセスできるウェブサイト。
	],
}
// background.js
// イメージを表示するかどうか
var showImage;
chrome.storage.sync.get({showImage: true}, function(items) {
	showImage = items.showImage;
});
// webリクエストリスナー、最後のパラメーターはブロッキングを意味する。
chrome.webRequest.onBeforeRequest.addListener(details => {
	// cancel リクエストがキャンセルされたことを示す。
	if(!showImage && details.type == 'image') return {cancel: true};
	// シンプルなトーン検出
	// ほとんどのウェブサイトはメディアタイプではないし、アンチダウンロードなので、これはデモンストレーションのためだけで、本当の意味はない。
	if(details.type == 'media') {
		chrome.notifications.create(null, {
			type: 'basic',
			iconUrl: 'img/icon.png',
			title: 'トーンが検出された,
			message: 'トーンアドレス: ' + details.url,
		});
	}
}, {urls: ["<all_urls>"]}, ["blocking"]);

:::