EagleLand

閲覧履歴を簡単に消せるGoogle Chromeの拡張機能を作った

Published at 2013-03-09

@t32k氏に影響されてChromeの拡張機能を作った。アイコンのクリックで全履歴を消すという非常にシンプルな機能。ソースも非常に小さい構成になっている。機能・実装がブラッシュアップされてきたらウェブストアへの登録もしてみようかな、と。

以下の手順でも使える。

Extensionの構成

ChromeのExtensionは大まかに言って、html / css / js / manifest.jsonの4つから構成されている。

つまり、拡張機能といってもc++を書く訳ではない。HTML・CSS・JavaScriptで構成されており、実装も「JavaScriptでChromeのAPIにアクセスしたり」という単純なものなので、想定しているよりもずっと敷居が低かった

肝となるのはmanifestファイル

Extensionにも実行されるタイミングが色々ある。特定のURLを開いたとき とか、 拡張機能のアイコン をクリックした時など。そのコントロールをしているのがmanifest.json。どのファイルがどこでどのタイミングでロードされるなどもこのmanifest.json次第なので、これがわからないとJSのデバッグまで辿り着けない。逆に、これがわかればconsole.logを駆使して何でもできる。

manifest.jsonのサンプル

後述の公式ドキュメントに詳しく載っているが、以下は今回作った拡張機能の例。

{
  "name": "OneClickClear",      // 拡張機能の名前（必須）
  "version": "0.0.1",           // 拡張機能のバージョン（必須）
  "manifest_version": 2,        // マニフェストファイルのバージョン（必須）
  "description": "",            // 拡張機能の説明（推奨）
  "permissions": ["history"],   // historyオブジェクトにアクセスするための許可
  "background": {
    "scripts": ["js/main.js"]   // バックグラウンドで実行するjsファイル
  },
  "browser_action": {           // Chromeのツールバーに配置されるアイコン
    "default_icon": "img/trash.ico",  // 配置されるアイコン
    "default_title": "OneClickClear"  // タイトル
  }
}

実行されるmain.jsの中でツールバーのアイコンがクリックされる瞬間をハンドリングし、履歴オブジェクトにアクセスして削除するという単純な造り。でもその指定を、"background":...に指定しなければならなかったり、履歴オブジェクトを操作するので、"permissions": ["history"]と記述しなければならなかったり。やはりmanifest.jsonが肝な感じ。

デバッグの取っ掛かり

使う手順の話で出たが、拡張機能の実装が配置されたmanifest.jsonがあるディレクトリを、ディベロッパーモードにしてロードするだけ。実に簡単。console.logの出力もディベロッパーツールで確認することができる。

ただし、今回のような出力先のビューレイヤーがないbackgroundでの実行は、chrome://extensions/の、ロードした拡張機能のビューを調査で生成されているbackground.htmlで確認が可能。事前に作っておいても大丈夫。

参考URL

タイトルと URL をコピーしました