ざっくりChrome拡張機能(Chrome Extension)の作り方を学んでみた。
学ぶにも相応にモチベーションは必要ということで、 ある程度実用的かつ拡張機能らしさがある例題として「ログインページのパスワードフォームの文字列を平文で表示する」機能を作成してみることにした。
具体的には閲覧しているページのHTMLの<input type="password">
要素を<input type="text">
に置換すれば良い。
この動作を拡張機能で実装してみる。
拡張機能の作成の概要
拡張機能は大雑把には、以下の要素により作成できる。
- 名称やアイコン、後述する実態ファイルの構成なんかを定義する
manifest.json
- 機能の実体となるJavascript
- UIを構成するHTMLとそれに付随するCSS、Javascript
今回の機能では以下のファイルを作成した。
manifest.json
contentscript.js
background.js
icon.png
機能の定義を行うmanifest.json
今回は以下のようなmanifest.json
を作成した。
{ "manifest_version": 2, "name": "Password View", "description": "Chrome Extension 習作: formのpasswordなinputをtextに改変する", "version": "0.7", "browser_action": { "default_icon": "icon.png", "default_title": "Password View" }, "content_scripts": [ { "matches": ["http://*/*", "https://*/*"], "js": ["contentscript.js"] } ], "background": { "scripts": ["background.js"], "persistent": true }, "permissions": [ "tabs" ] }
manifest_version
項
フォーマットとしてはひとまず2を指定すれば良いらしい。
name
、description
、version
項
作成する機能の名称、説明、バージョンを記述する。
browser_action
項
ブラウザ上に表示するアイコンとか表示名称とか、 あるいはアイコンを押した際のポップアップとして表示するHTMLファイルを定義する。
今回であればボタンを押したら即機能することを想定しているのでアイコンと名称。
(ポップアップについては次回の別の機能で使ってみる。)
content_scripts
項
※ 誤記あったので修正しました
今回の機能では表示しているHTMLについて改変を行う=表示ページに挿入して動作する必要がある。
これを実現するために後述するcontentscript.js
を作成して、この項目に記述した。
ここで対象とするURLのパターンも指定できる。
background
項
今回の機能ではユーザがアイコンをクリックしたことをトリガーとする必要がある。
これを実現するためにはブラウザ上で常に動作するbackground
項を用いる。
後述するbackground.js
を作成し、記述した。
permissions
項
後述するが、今回の機能ではタブの情報を閲覧する必要があるのでtabs
を記述した。
HTML改変の動作の実体となるconstantscript.js
動作の実体としてはinput[type="password"]
の要素を拾い、
それらのtype
属性をtext
に変更していく。
常時これが動いてしまうと困るので、リクエストをトリガーとして動作するように記述した。
chrome.extension.onRequest.addListener ( function(request, sender, sendResponse) { var elms = document.querySelectorAll("input[type='password']"); for(var i = 0; i < elms.length; i++){ var elm = elms.item(i); elm.setAttribute("type", "text"); } } )
ボタンクリックを拾ってリクエストを送るbackground.js
表示しているページを指定してブラウザ上の機能ボタンを押されたときにconstantscript.js
にリクエストを送る記述を行った。
chrome.browserAction.onClicked.addListener(function(tab){ chrome.tabs.getSelected(null, function(tab){ var param = {}; chrome.tabs.sendRequest(tab.id, param, function(response){ console.log("password view: complete"); }); }); });
アイコンicon.png
絵心が無いのでいらすとやさんの「虫眼鏡」を使用。
Chromeに拡張機能をインストールしてみる
実際にChromeに読み込ませて使用してみる。
メニューから「拡張機能」を開く。
「ディベロッパーモード」にチェックを入れて、 「パッケージ化されていない拡張機能を読み込む」よりディレクトリを指定して読み込む。
これによりアイコンが追加されたことを確認できる。
使用してみる
適当なパスワードフォームがあるページを表示。
アイコンをクリックすると、パスワードフォームが平文で表示されることが確認できる。
以上のようにある程度Javascriptの心得があれば簡単に作成できる。
現在においてはPCの用途に占めるブラウザ作業の割合も少なくなく、 ちょっとしたものであっても効率化に役立つ可能性は大いにあるのではないかと思う。
一方で邪悪な用途もいくらか思いつくところであり、 実績のない拡張機能を安易にインストールしてはいけないなとも思うところ。
- 作者:蒲生 睦男
- 発売日: 2012/03/17
- メディア: 単行本(ソフトカバー)