google-chrome-extension チュートリアル
google-chrome-extensionを使い始める

備考

絶対最小例

どれでも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"]
    }
  ]

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

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

も参照してください

• 公式ドキュメント： コンテンツスクリプト
• スタックオーバーフローのドキュメント： コンテンツスクリプト

オプションページ

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

バージョン2

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

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

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

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

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

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

chrome.runtime.openOptionsPage();

バージョン1（ 非推奨 ）

manifest.json定義例：

"options_page": "options.html"

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

ストレージ

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

"permissions": [
   "storage"
]

公式文書

• オプションページ - バージョン1
• オプションページ - バージョン2
• ストレージAPI

新しいタブを作成する

拡張コードでは、必要な権限をデカールした場合、任意の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
})

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