Chrome Extensionの作り方講座その1・用語とか

Author:
sample01

以前ちょっと勉強したのですが、どこにも公開していなかったので何回かに分けてちょっと残しておくことにします。
第一回は用語周りの説明から。

Chrome Extensionの作り方講座その2・BrowserActionを使ってみる
Chrome Extensionの作り方講座その3・ContentScriptを使ってみる
Chrome Extensionの作り方講座その4・popupとContent Scriptを連携させてみる
Chrome Extensionの作り方講座その5・Event Page(Background Script)を使う
Chrome Extensionの作り方講座その6・omniboxを使う
Chrome Extensionの作り方講座その7・bookmark APIを使う

Chrome Extensionの3つのJS

まず、Chrome Extensionは大きく3つのJavaScriptで構成されています。

一つはpopup.js。右上のボタンを押した時に小さく出るウィンドウ、そこも一つのhtmlで構成されているのですが、ここで動くjsです。

そして二つ目はコンテンツスクリプトと呼ばれるjs。特定のページで動作するjsです。
右上のボタンを押すとページの情報を取得する、などの処理で使います。

最後の三つ目はバックグラウンドスクリプト。どんなページでも常にバックグラウンドで動きタイマーの監視などを行います。
この三つのスクリプトのうち一つしか使わないChrome Extensionもあるし、三つすべてを使うChrome Extensionもありますが、これが基本となります。

マニフェスト

Chrome ExtensionにもAndroidManifest.xmlみたいなマニフェストファイルがあり、これをいじってどのURLでChrome Extensionを動かすか、などの設定ができます。余計なところで動かしてもリソースを無駄に使うだけですからね。
中身はjsonで書かれます。

{
  "manifest_version": 2,

  "name": "sample10",
  "description": "リンク一覧を抜き出す",
  "version": "1.0",

    "icons": {"16":"icon16.png"},
    "content_scripts" : [
        {
            "matches": ["http://*/*", "https://*/*"],
    		"js": ["jquery-2.0.3.min.js", "content.js"]
        }
    ],
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "permissions": ["tabs", "http://*/*", "https://*/*"]
}

Chrome Extensionの用語

Chrome Extensionの用語を説明します。
まずはブラウザアクションとページアクション。
ブラウザアクションはどんなページでも共通で実行できるアクションボタン。
ページアクションは特別のページだけ実行できるアクションボタンのことです。

chromeext

ブラウザアクションのボタンにはバッジを生成することができます。
sample09

また、検索ボックスの事をomniboxと呼び、ここで特別な計算をするChrome Extensionを作ることもできます。
sample15

Chrome Extensionで何ができる?

基本的にJavaScriptなので、JavaScriptができることはなんでもできます。
DOMをいじったり、タイマーを貼ったり、ajaxを呼ぶなど用途は様々です。
またChromeの履歴やブックマークへのアクセス、他のタブやウィンドウへのアクセスも可能です。

長くなってきたので今回はここまで。
次回は実際の作リ方を説明しましょう。

Chrome Extensionの作り方講座その2・BrowserActionを使ってみる
Chrome Extensionの作り方講座その3・ContentScriptを使ってみる
Chrome Extensionの作り方講座その4・popupとContent Scriptを連携させてみる
Chrome Extensionの作り方講座その5・Event Page(Background Script)を使う
Chrome Extensionの作り方講座その6・omniboxを使う
developer.chrome.com/extensions

Share on Facebook
Pocket