ロボフォームのようなパスワードを保存する拡張機能

ロボフォームのようなパスワードを保存する拡張機能

ロボフォームのようなパスワードを保存するJavaScritpを書こうと思った。
ロボフォームは、WEBサイトのログイン情報などを保存できるブラウザの拡張機能だ。

ところが、バージョンが上がるたび使い勝手が悪くなり、つい最近のバージョンアップでは、それまで保管してあったパスワードデータが消えているのだ。

前までバックアップ機能が付いてはいたがIDは、みれても肝心のパスワードは入っていない。

つまり、囲い込みのため着々とバージョンアップを重ねてきたわけだ。
そのバージョンアップの言い訳にどんどんと使いにくくしていったと。
たぶん、開発側は使いやすくしたと自負していると思うが、現場をしらない連中がここにもいる。

つーことで、ツールバーにアイコンを表示させ、そこからWEBサイトのログイン情報の保存とフィールドへの書き込みの2つのボタンでWEBサイトのログイン情報をコントロールしようというわけだ。

とりあえず、グーグルクロームの拡張機能の開発ということで順次情報を追加していこうと思います。

案外簡単グーグルクロームの拡張機能

拡張機能で検索すると「案外簡単」そうに書かれている拡張機能ですけど、あくまでもサンプルの形で実際に使う場面での書き方をしたものがなく、持っているJavaScriptの知識を総動員して想像しないと作れなかったりします。

でも基本は解読できたので書いておきます。

拡張機能の基本構造

manifest.join というファイルに使用するものの宣言をしておきます。

拡張機能には次の3種類があります。

Browser actions
ツールバーから起動
Page actions
アドレスバーの中に表示
Override Pages
Chromeの内部のページを代替することができます

拡張機能を使う場面でどれを使うか決まります。
訪問サイトで使うなら Browser actions
特定のページで使うなら Page actions
クロームの内部画面を変えるなら Override Pages

まぁ、ほとんど Browser actions で用が足りるでしょう。

Browser actions の manifest.join

manifest.join の各構文は、 “～”: “値” の形で書かれ、カンマで , 区切ります。
ブロックは { } でかこみます。複数パラメータは [ ] でくくります。

{
 "name": "拡張機能の名前",
 "version": "拡張機能のバージョン",
 "manifest_version": "マニフェストファイルのバージョン",
 "description": "拡張機能の説明",
 "icons":{ // ここで設定するアイコンは、拡張機能の画面やWEBショップなどで使われます。
  "16": "16x16dotのアイコン画像(png形式)",
  "48": "48x48dotのアイコン画像(png形式)",
  "128": "128x128dotのアイコン画像(png形式)",
 },
 "browser_action": {
  "default_icon": "ツールバーに表示するアイコンファイル(32x32のpngで作りました)",
  "default_title": "ツールバーのアイコンにマウスオーバーしたとき表示する拡張機能の名前",
  "default_popup": "ツールバーの拡張機能のアイコンをクリックしたとき表示する html" // 管理画面ともいえる
 },
 "content_scripts": [
  {
    "matches": ["http://*/*","https://*/*"], // このカードにマッチしたサイトで content.jsを使う
    "js": ["jquery.min.js","content.js"]     // 便利なので jquery も読み込ませておく
  }
 ],
 "permissions": [ // 実行権を与える
  "tabs",
  "http://*/*",
  "https://*/*"
 ]
}

つまり、基本は browser_action からの起動になります。
content_script は、読み込んであるだけで現在アクティブなWEBサイトのページをコントロールするために使います。

browser_action から　メッセージを送信して content_script の関数を呼び出して当該のWEBサイトのページをコントロールします。

メッセージの送信は、非同期なため（メッセージを送った側にメッセージを送られた側からの返信を受け取れない）
あくまでもメッセージ送信はWEBサイトのページ解析のための起動トリガーとなります。

manifest.join の例

{
	"name": "Sample",
	"version": "1.0.0",
	"manifest_version": 2,
	"description": "Sample Chrome Extension",
	"browser_action": {
    	"default_icon": "smapl.png",
		"default_title": "yuzu form",
		"default_popup": "yuzuform.html"
	},
	"icons":{
		"16" : "smapl16.png",
		"48" : "smapl48.png",
		"128" : "smapl128.png"
	},
	"content_scripts": [
		{
			"matches": ["http://*/*","https://*/*"],
			"js": ["jquery.min.js","content.js"]
		}
	],
	"permissions": [
		"tabs",
		"background",
		"contextMenus",
		"http://*/*",
		"https://*/*"
	]
}

“default_popup”: “yuzuform.html”

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<link rel="shortcut icon" href="http://yuzumaru.org/wp-center/favicon.ico" type="image/png">
<link rel="icon" href="http://yuzumaru.org/wp-center/favicon.ico" type="image/png ">
<title>sample.js クローム 拡張</title>
<script src="jquery.min.js"></script>
</head>
<body>
<form name="form0">
  <script src="../actionscript.js"></script>
  <button id="btn">message Call</button>
  <script src="popup.js"></script> <!-- メッセージ送信を行うための javascript -->
</form>
</body>
</html>

メッセージ送信のためのJavaScript popup.js

$("#btn").on("click", () => {
	var queryInfo = {
		active: true,
		windowId: chrome.windows.WINDOW_ID_CURRENT
	};
	chrome.tabs.query(queryInfo, function(result) {
		var currentTab = result.shift();
		var message = {};
		// 現在表示しているタブにメッセージを送る
		chrome.tabs.sendMessage(currentTab.id, message, function() {});
	});
});

メッセージを受け取る側のJavscript content.js

ここで定義した content.js です。

"content_scripts": [
		{
			"matches": ["http://*/*","https://*/*"],
			"js": ["jquery.min.js","content.js"]
		}

content.js

chrome.runtime.onMessage.addListener(
	function(msg) {
		return {response: "ok"}
	}
);