google-chrome-extensiongoogle-chrome-extensionを使い始める


備考

TODO:Chrome拡張機能の簡単な説明

公式文書

参考文献

TODO:重要な概要トピックへのリンクを埋め込む

絶対最小例

どれでもChromeの拡張機能は、 アンパック拡張として開始されます。拡張子のファイルを含むフォルダを。

そのファイルに含める必要があるファイルの1つは、拡張機能の基本的なプロパティを記述するmanifest.json です。このファイルの多くのプロパティはオプションですが、ここには絶対最小のmanifest.json ファイルがあります:

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0"
}
 

どこかにフォルダ( myExtension )を作成し、上記のようにmanifest.json を追加します。

その後、Chromeで拡張機能を読み込む必要があります。

  1. メニュー>その他のツール>拡張機能からアクセスできるchrome://extensions/ pageを開きます。
  2. 右上のチェックボックスが有効になっていない場合は、 デベロッパーモードを有効にします。
  3. Load myExtension extension ...ボタンをクリックし、作成されたmyExtension フォルダを選択します。 ここに画像の説明を入力

それでおしまい!最初の拡張機能はChromeによって読み込まれます:

ここに画像の説明を入力

もちろん、まだ何もしていないので、必要な部分を追加するための拡張アーキテクチャの概要を読むのは良い瞬間です。

重要:拡張機能を変更する場合は、 chrome://extensions/ に戻り、変更後に拡張機能の[再読み込み]リンクを押してください。コンテンツスクリプトの場合は、ターゲットページもリロードしてください。

背景ページ

背景ページは、バックグラウンドスクリプトを含む暗黙のページです。バックグラウンドスクリプトは、いくつかのタスクまたは状態を管理するために、1つの長時間実行されるスクリプトです。これは拡張機能の存続期間中存在し、一度に1つのインスタンスしかアクティブではありません。

manifest.json これを宣言することができますmanifest.json

"background": {
    "scripts": ["background.js"]
}
 

スクリプトプロパティにリストされている各ファイルを含む拡張システムによってバックグラウンドページが生成されます。

すべての許可されたchrome.* APIにアクセスできます。

バックグラウンドページには、常に開いている永続的なバックグラウンドページと、必要に応じて開いたり閉じたりするイベントページの 2種類があります。

バックグラウンドページを非永続化したい場合は、 persistent -flagをfalseに設定するだけです。

"background": {
    "scripts": ["eventPage.js"],
    "persistent": false
}
 

このバックグラウンドスクリプトは、リスナーが登録されているイベントが発生した場合にのみアクティブになります。一般に、登録にはaddListener を使用します。

例:アプリケーションまたは拡張機能が最初にインストールされます。

chrome.runtime.onInstalled.addListener(function() {
   console.log("The Extension is installed!");
});
 

コンテンツスクリプト

コンテンツスクリプトは、通常のページの横にある拡張コードです。

彼らは、WebページのDOMへの完全なアクセス権を持っています(実際には、ページのDOMにアクセスできる拡張機能の唯一の部分です )が、 Isolated Worldという概念であるJavaScriptコードが分離されています。各エクステンションには、他の人やページには見えない独自のコンテンツスクリプトJavaScriptコンテキストがあり、コードの競合を防ぎます。

manifest.json 定義例:

  "content_scripts": [
    {
      "matches": ["http://www.stackoverflow.com/*"],
      "css": ["style.css"],
      "js": ["jquery.js", "myscript.js"]
    }
  ]
 

属性の意味は次のとおりです。

属性説明
マッチこのコンテンツスクリプトをどのページに挿入するかを指定します。 パターン一致のパターンに従います。
CSS 一致するページに挿入されるCSSファイルのリスト。
js 一致するページに挿入するJSファイルのリスト。 リストされた順に実行されます。

コンテンツスクリプトは、 Programmatic Injectionと呼ばれるchrome.tabs.executeScript を使用してオンデマンドで注入することもできます。

も参照してください

新しいタブを作成する

拡張コードでは、必要な権限をデカールした場合、任意のchrome.* APIを使用できます。さらに、いくつかのAPIはバックグラウンドページからのみ動作し、いくつかのAPIはコンテンツスクリプトからのみ動作します。

任意のアクセス権を宣言するほとんどのchrome.tabs メソッドを使用できます。 chrome.tabs.create に注目しchrome.tabs.create

注:新しいタブはpopup 警告なしで開かれます。

chrome.tabs.create({
       url:"http://stackoverflow.com",
       selected:false  // We open the tab in the background
})
 

公式のクローム開発者のタブオブジェクトについて詳しく知ることができます

オプションページ

オプションページは、拡張機能の設定を維持する可能性をユーザーに与えるために使用されます。

バージョン2

Chrome 40以降、 chrome:// extensionsにオプションページを定義済みのダイアログとして表示する可能性があります。

manifest.json オプションページを定義する方法は、次のようになります。

"options_ui": {
    "page": "options.html",
    "chrome_style": true
}
 

このオプションページはダイアログとして動作し、ポップアップとして開き、 options.htmlが表示されます。 chrome_style は、オプションのページにスタイルの一貫性の理由でChromeスタイルシートを適用します。

オプションは、 拡張ボタンのコンテキストメニューまたはchrome:// extensionsページから自動的に公開されます。

拡張ボタン

chrome:// extensions

オプションのページは、たとえばポップアップUIからプログラム開くこともできます

chrome.runtime.openOptionsPage();
 

バージョン1( 非推奨

manifest.json 定義例:

"options_page": "options.html"
 

options_ui 動作はすぐにバージョン1のオプションページに適用されるため、バージョン2を使用することをお勧めします。

ストレージ

通常は設定を維持する必要があるため、 chrome.storage APIを使用することをおすすめします。パーミッションは、 manifest.json 次のように宣言できます。

"permissions": [
   "storage"
]
 

公式文書