そんな今日この頃の技術ネタ

本家側に書くほどでもない小ネタ用

Chrome拡張機能を作ってみる その1. HTMLを改変する

ざっくりChrome拡張機能(Chrome Extension)の作り方を学んでみた。

学ぶにも相応にモチベーションは必要ということで、 ある程度実用的かつ拡張機能らしさがある例題として「ログインページのパスワードフォームの文字列を平文で表示する」機能を作成してみることにした。

具体的には閲覧しているページのHTMLの<input type="password">要素を<input type="text">に置換すれば良い。

この動作を拡張機能で実装してみる。



拡張機能の作成の概要

拡張機能は大雑把には、以下の要素により作成できる。

  • 名称やアイコン、後述する実態ファイルの構成なんかを定義するmanifest.json
  • 機能の実体となるJavascript
  • UIを構成するHTMLとそれに付随するCSS、Javascript

今回の機能では以下のファイルを作成した。

  • manifest.json
  • constantscript.js
  • background.js
  • icon.png

github.com

機能の定義を行う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を指定すれば良いらしい。

namedescriptionversion

作成する機能の名称、説明、バージョンを記述する。

browser_action

ブラウザ上に表示するアイコンとか表示名称とか、 あるいはアイコンを押した際のポップアップとして表示するHTMLファイルを定義する。

今回であればボタンを押したら即機能することを想定しているのでアイコンと名称。

(ポップアップについては次回の別の機能で使ってみる。)

constant_scripts

今回の機能では表示しているHTMLについて改変を行う=表示ページに挿入して動作する必要がある。

これを実現するために後述するconstantscript.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

絵心が無いのでいらすとやさんの「虫眼鏡」を使用。

www.irasutoya.com



Chromeに拡張機能をインストールしてみる

実際にChromeに読み込ませて使用してみる。

メニューから「拡張機能」を開く。

f:id:blue1st:20161218151239p:plain:w500

「ディベロッパーモード」にチェックを入れて、 「パッケージ化されていない拡張機能を読み込む」よりディレクトリを指定して読み込む。

f:id:blue1st:20161218151350p:plain:w600

f:id:blue1st:20161218151426p:plain:w600

f:id:blue1st:20161218151501p:plain:w600

これによりアイコンが追加されたことを確認できる。

f:id:blue1st:20161218151520p:plain:w300



使用してみる

適当なパスワードフォームがあるページを表示。

f:id:blue1st:20161218145220p:plain:w500

アイコンをクリックすると、パスワードフォームが平文で表示されることが確認できる。

f:id:blue1st:20161218145240p:plain:w500



以上のようにある程度Javascriptの心得があれば簡単に作成できる。

現在においてはPCの用途に占めるブラウザ作業の割合も少なくなく、 ちょっとしたものであっても効率化に役立つ可能性は大いにあるのではないかと思う。


一方で邪悪な用途もいくらか思いつくところであり、 実績のない拡張機能を安易にインストールしてはいけないなとも思うところ。

Google Chrome HACK

Google Chrome HACK