以前ちょっと勉強したのですが、どこにも公開していなかったので何回かに分けてちょっと残しておくことにします。 ChromeExtensionはJavaScriptでさくっと開発できるので、覚えておくと役に立つかも。 第一回は用語周りの説明から。 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ってそもそも何なのか

Chrome ExtensionってのはJavaScriptです。 常時どんなページも走らせておいたり、特定のページのみ動かしたり、ボタンクリックで実行できたりします。 これにChromeブラウザの持つ機能(ブックマーク、検索、ダウンロード等)を組み合わせることもできます。 まあ要は他人のサイトをJavaScriptでいじるようなものですね。 自分のページだとブックマークボタンとかそういう機能つけられますけど、他人のページだとそういうわけにもいかない。 そんな時に活躍する機能なのです。

他のブラウザでの互換性はあるの?

基本的にJavaScriptなので、他のブラウザも互換性を持たせるように設計してたりします。 だからEdgeとかでも動かせます。

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で書かれます。 [javascript] { "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://*/*"] } [/javascript]

Chrome Extensionの用語

Chrome Extensionの用語を説明します。 まずはブラウザアクションとページアクション。 ブラウザアクションはどんなページでも共通で実行できるアクションボタン。 ページアクションは特別のページだけ実行できるアクションボタンのことです。 Browser Action for Chrome Extension ブラウザアクションのボタンにはバッジを生成することができます。 sample09 また、検索ボックスの事をomniboxと呼び、ここで特別な計算をするChrome Extensionを作ることもできます。 omnibox for Chrome Extension

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