Chrome拡張は作るもの
GoogleChrome、使ってますか？
いまやシェア50％超えのブラウザです。
拡張ってなんだよ
最近のブラウザには、ユーザの好みに合わせてカスタマイズできるものが多いです。
例に漏れず、GoogleChromeにも「拡張機能」という名称で実装できまして、少し触ってみたところ、色々悪いことできそうなので作ってみることにしました。
作るもの
今回は以下の二つです
①選択したファイルから名前やメールアドレスなどのデータを読み込み、ブラウザ上のフォームに書き込む
②今見ているサイトのURL文字列とQRコード化した画像をSlackに送る
ではやっていきます
Chrome拡張に必要なもの
- manifest.json（設定ファイル）
- Javascriptファイル
- htmlファイル（ポップアップ画面出す場合必要）
- imgファイル（アイコン用、任意）
- cssファイル（見た目用、任意）
です。
いがいと少ないです。
manifest.jsonについて
リファレンスをみた方が早いです
とりあえず以下は必須です。
{
"manifest_version": 2,
"name": "（なまえ）",
"version": "0.1",
}
その他は必要に応じて記載します。
①ではpermissions、content_scripts、browser_action
②ではbackground、permissions
をそれぞれ使用しました
①をつくる
①では、
・自動書き込みを行いたいサイトへ行く
・ツールバーの拡張機能アイコンをクリック -> ポップアップ画面が表示される
・画面上からファイル選択ボタンをクリック -> ファイル選択ダイアログが表示される
・形式通りに書かれたテキストファイルを選択
・フォームに書き込まれる
というものを実現します。
ユーザ登録とか、毎回面倒なので、、、楽にしたい
テキストファイルの形式はこんな感じです
改行と'='で分けます
name=testboy
email=aaa@example.com
tel=0123456789
password=QWERasdf123!
ポップアップ画面を作ります
popup.html
<!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>ポップアップ画面の処理を書きます
main.js
// domが読み込まれたら発火する用のリスナ
document.addEventListener('DOMContentLoaded', function() {
// id=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)
})
}
})
})開いているページに行う処理を書きます
content.js
// 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に使うファイルなどの情報を記載します
manifest.json
{
"name": "Insert",
"manifest_version": 2,
"version": "0.0.1",
"permissions": [
"tabs"
],
"content_scripts": [
{
"matches": ["<all_urls>"],
"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からディレクトリを指定して読み込めば拡張機能がインストールされます！簡単！！
うごいているところ
動きました✌️
②をつくる
②では、
・サイトへ行く
・Chrome上で右クリック -> メニューが出てくる
・Send to Slackをクリック
・Slackに共有される
というものを実現します。
PCでネットサーフィンしててあとでスマホで読みたい、っていうのありますよね。
（最近のブラウザだとアカウント同じであれば履歴共有できるというのは置いとく）
②はポップアップ画面がいらないので、右クリックした時のメニューに表示する用の記述と処理を書きます
background.js
// 右クリックメニューを作る処理
chrome.contextMenus.create({
title: 'Send to Slack',
type: 'normal',
onclick: function(info) {
const xhr = new XMLHttpRequest()
const slackUrl = 'Slackのurlを書く '
// SlackへPOSTする処理
xhr.open('POST', slackUrl, true)
// ヘッダつけとく
xhr.setRequestHeader('Content-type', 'application/json')
xhr.send(
JSON.stringify({
attachments: [
{
fields: [
{
title: 'QR',
value: info.pageUrl, //ページのURL
},
],
// chart.apisを使ってqrコードを作る
image_url: `http://chart.apis.google.com/chart?chs=200x200&cht=qr&chld=M|4&choe=UTF-8&chl=${info.pageUrl}`,
},
],
})
)
},
})manifestとディレクトリ
{
"manifest_version": 2,
"name": "Send to Slack",
"version": "0.1",
"background": {
"scripts": ["background.js"]
},
"permissions": ["webRequest", "<all_urls>", "contextMenus", "tabs"]
}
manifest.json
/
├ manifest.json
└ background.js -- 内部処理用js、domは触れない
うごいているところ
できました✌️✌️✌️
作成したQRコード
まとめ
イベントリスナに癖がありますが、そこさえ乗り越えれば普通のjsとhtmlで書けるので、色々できそうです。
bookmarkletでいいじゃん感もありますが、右クリックのメニューからいけたり、バージョン管理やユーザの使用状況を可視化できたりなど、メリットは多そう。
時間を見つけてまた触ってみます。
散財します。