Chromeおすすめ拡張〇〇選！で摩耗しているみなさんこんにちは。
そしてようこそ、Chrome拡張作成空間へ。
Chrome拡張にひつようなもの
- 作るもの
- manifest.json（設定ファイル）
- jsファイル
- htmlファイル（ポップアップ画面出す場合必要）
- imgファイル（アイコン用、任意）
- cssファイル（見た目用、任意）
- どこかから持ってくるもの
- GoogleChrome
作っていく
manifest.jsonについて
リファレンスをみた方がいいです。
とりあえず以下は必須です。
{
"manifest_version": 2,
"name": "（なまえ）",
"version": "（0.1、、、など）",
}
その他は必要に応じて記載します。
今回は
- permissions
- 拡張機能に干渉を許可するオブジェクトのリスト
- content_scripts
- dom操作まわりの指定
- browser_action
- ブラウザに対する動作まわりの指定
を使用しました
実装する機能としては
・自動書き込みを行いたいサイトへ行く
・ツールバーの拡張機能アイコンをクリック -> ポップアップ画面が表示される
・画面上からファイル選択ボタンをクリック -> ファイル選択ダイアログが表示される
・形式通りに書かれたテキストファイルを選択
・フォームに書き込まれる
というものを実現します。
ユーザ登録とか、毎回面倒なのでこれをブラッシュアップして楽にしたい
テキストファイルの形式はこんな感じです
改行と'='で分けます
name=testboy
email=aaa@example.com
tel=0123456789
password=QWERasdf123!
ポップアップ画面を作ります
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pop</title>
</head>
<body>
<input type='file' id="reader" />
<script src="js/main.js"></script>
</body>
</html>
ポップアップ画面の処理を書きます
// domが読み込まれたら発火する用のリスナ
document.addEventListener('DOMContentLoaded', function() {
// #readerの変更で発火する用のリスナ
document.getElementById('reader').addEventListener('change', function(e) {
// ファイルの内容を読み込む宣言
var file = e.target.files
var reader = new FileReader()
reader.readAsText(file[0])
// 読み込まれたら起動
reader.onload = function(ev) {
// 読み込んだファイルの中身を処理するjsへsend
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, reader.result)
})
}
})
})
開いているページに行う処理を書きます
// messageがsendされてきたら発火する用のリスナ
chrome.runtime.onMessage.addListener(function(msg) {
// msgは読み込んだファイルの生データ
// 改行で分割し、さらに'='で分割
// '='の前がkey, 後がvalueとなる、'='が複数あった場合は考慮しない
const insertObj = {}
msg.split('\n').forEach(v => (insertObj[v.split('=')[0]] = v.split('=')[1]))
Object.keys(insertObj).forEach(v => {
// keyの名前と同じ'name'属性を持つフォームを探し、ある場合は書き込む
const element = document.getElementsByName(v)
element.length && (element[0].value = insertObj[v])
})
return true // いらないかも
})
manifest.jsonに使うファイルなどの情報を記載します
{
"name": "Insert",
"manifest_version": 2,
"version": "0.0.1",
"permissions": [
"tabs" //tabへの干渉を許可している
],
"content_scripts": [
{
"matches": ["<all_urls>"], // 全てのURLで動作
"js": ["content.js"]
}
],
"browser_action": {
"default_popup": "foreground/popup.html" // ポップアップ用ファイルの指定
}
}
ディレクトリ構成はこんな感じ
/
├ manifest.json
├ content.js -- 開いているページを操作するjs
└ foreground/
├ popup.html
└ js/
└ main.js -- popupを操作するjs
んで、できあがったらchrome://extensions/を開いて、右上のDeveloper modeをONに、左隅のLoad unpackedからディレクトリを指定して読み込めば拡張機能がインストールされます！簡単！！
うごいているところ
やってみて
結構ハードルは低めでした
foreground以下は開いたときに読み込まれるので、コードを変えても開き直せば再インストール不要で結構トライ＆エラーしやすかったです。
manifestとbackground周りは再インストールが必要っぽいです。
スーパーリロードでもダメでした
以上