Chrome拡張を作ろう
社内勉強会の発表資料を兼ねています
はじめに
今回言うこと
Chrome拡張でできることを軽く紹介
簡単なChrome拡張を作る
とにかく作る
ちょっとずつ機能拡張
Tips集
Chrome拡張でできること
特定のWebサイトを改造
YouTubeの翻訳字幕を2言語並べたり
Amazonの価格推移出したり
Tweetdeckのデザインいじったり
Google検索結果から特定のドメインを排除したり
ブラウザの機能を拡張
タブを1クリックでまとめたり
タブごとに音量を制御したり
新しいタブをダッシュボードにしたり
デベロッパーツールでVueのコンポーネント見たり
奥は深そうだが、時間の都合上今回は触れない
実は特定のWebサイトを改造する手段には複数あって
Developer Toolsから直接JSを実行
ご存知の通り
エンジニアじゃないと普通やらない
UserCSS・UserScript
(実はUserScriptはそのままChromeに拡張機能として入ったりするが、面倒なので言及しない)
ブックマークレット
javascript:(function(){alert("Hello!")})();のようなものをブックマークに入れ、実行
モバイルブラウザでも動く
Chrome拡張
Webストアからインストールできる
ブラウザのできる範囲なら、何でもできる
table:ざっくり比較
データ永続化 導入の手間 UIの提供 機能 他ブラウザ対応
UserCSS, UserScript ◯ △ △ △ △
ブックマークレット △ ◯ ✕ △ ◎
Chrome拡張 ◎ ◎ ◎ ◎ ✕
とりあえず簡単なChrome拡張を作ってみる
とりあえず、manifest.jsonとJSファイルの2つがあれば成立する
これだけ覚えて帰ってほしい、めちゃくちゃ簡単
code:manifest.json
{
"name": "Twitterやめ太郎",
"manifest_version": 2,
"version": "1.0",
"content_scripts": [
{
}
]
}
code:script.js
window.onload = function () {
document.querySelector("html").innerHTML = "Twitterを開かない🙅♀️"
}
入れ方
chrome://extensions/を開き、デベロッパーモードを有効化
この2つが入ったフォルダを開いたページにD&D
Twitterをやめることができた
https://gyazo.com/b57ba161481e6d6961f046b53d2159e0
もう少し高度なことをしてみる
アイコンクリックで設定画面が開く
manifest.jsonにbrowser_actionを追加
code:manifest.json
"browser_action": {
"default_icon": {},
"default_title": "twitterやめ太郎",
"default_popup": "popup.html"
}
おもむろにpopup.htmlとpopup.jsを書く
今回はTwitterやめる/やめないをUIから設定できるようにする
code:popup.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
</head>
<body>
<button id="stop">Twitterやめる</button>
<button id="start">Twitterやめない</button>
<script src="popup.js"></script>
</body>
</body>
</html>
code:popup.js
const stopTwitter = () => {
chrome.storage.local.set({
isStopTwitter: true,
})
}
const startTwitter = () => {
chrome.storage.local.set({
isStopTwitter: false,
})
}
document.getElementById("stop").addEventListener("click", stopTwitter, false)
document.getElementById("start").addEventListener("click", startTwitter, false)
インストール時に初期化処理を行う
code:manifest.json
"background": {
"persistent": false
}
code:event.js
chrome.runtime.onInstalled.addListener(() => {
chrome.storage.local.set({
isStopTwitter: true,
})
alert("Twitterやめ太郎")
})
もろもろTips集
既存拡張のソースを見たい
Webストアに登録
5ドル払えばすぐできる
開発体験を上げるには(試してない)
TypeScript
ボイラープレートもある
React
ホットリロード
APIのコールバックをPromise化できたりする
注意すべきこと
権限は絞ろう
便利なChrome拡張
ブラウザ上でスクリーン録画・編集できる
そのWebサイトで使われているライブラリが分かる