Chrome拡張機能を作る上で知っとくべき、概念を説明してます！ これで拡張機能の開発が捗ること間違いなし！

1. Chrome拡張機能の
作りかた
あおぞう

2. どうやってつくるの？
• HTML
• javascript
• CSS
だけで作れちゃいます！

3. 抑えておくべき概念
• Browser Action
• Content Script
• Background Page
• Options
• Manifest

4. Browser Action
ツールバーのアイコンをクリックした際の動作
• ポップアップ画面を出せる（HTML/CSS/Javascript）
• ポップアップ画面を出さずに処理を開始することもできる

5. Content Script
下記の特性を持つjavascriptのスコープ
• 開いているページのDOMにアクセスできる
• ページ内で定義されている変数・関数にはアクセスできない
• Chrome APIが一部しか利用できない
• Background Pageとのメッセージ通信ができる

6. イメージ
DOM
var user_name = ”aozou”;
function logout() {
…
}
var el = document.
getElementById(”container”);
var child = ・・・
el.appendChild(child);
alert(user_name); // undefined
logout(); // logout is not defined
変数・関数
chrome.runtime.sendMessage() ○
chrome.downloads.download() ☓
取得・更新
Content Script Chromeで見てるページ

7. Background Page
下記の特性を持つjavascriptのスコープ
• DOMにはアクセスできない
• すべてのChromeAPIを利用できる
• ブラウザ内のイベント監視ができる
• アイコンクリック/ブックマーク削除/タブ閉じる/ページ遷移...etc
• Content Script とのメッセージ通信

8. イメージ
Content ScriptBackground Page
イベント
発火
アイコンクリック
ブックマーク削除
タブ閉じる
ページ遷移
...etc
各EventListenerが叩かれる
DOMが必要な処理の場合、
Content Scriptに相互メッセージ
を行う
DOMくれ
DOM
あげる

9. Options
• オプション用のページを表示（HTML/CSS/javascript）
• 基本的には設定値を保存するためのページ
• Chrome APIも一部利用できる(もしかしたら制限ないかも？)
• Content Script/Background Pageへのメッセージ送信
• ストレージAPI(chrome.storage.*/localStorage...etc)

10. イメージ

11. スコープ間でのメッセージ通信
(※検証不足な点があるので、ご了承ください。。。自分のイメージです)
Content
Script
Background
Page
Options
双方向
単方向
Popup
(Browser Action)

12. Manifest(manifest.json)
↓の概念に対応する設定を記述するファイル
• Browser Action
• Content Script
• Background Page
• Options

13. {
"name": "My extension",
...
"browser_action": {
"default_icon": { // optional
"16": "images/icon16.png", // optional
"24": "images/icon24.png", // optional
"32": "images/icon32.png" // optional
},
"default_title": "Google Mail", // optional; shown in tooltip
"default_popup": "popup.html" // optional
},
...
}

14. {
"name": "My extension",
...
"content_scripts": [
{
“matches”: [“http://*.nytimes.com/*”],
"css": ["myStyles.css"],
"js": ["contentScript.js"]
}
],
...
}

15. {
"name": " My extension",
...
"background": {
"scripts": ["background.js"],
“persistent”: false // chrome.webRequest使用時はtrue
},
...
}

16. {
"name": "My extension",
...
"options_ui": {
"page": "options.html",
"open_in_tab": false
},
...
}
open_in_tab: false
open_in_tab: true

17. イメージ
My_extension/
├── background.js
├── contentScript.js
├── myStyles.css
├── manifest.json
├── options.html
└── popup.html
Background Page
Content Script
Options
Brwoser Action

18. React/Vue.js/Typescript等も使える
• 最終的にjavascript/HTML/CSSにビルドすれば良いので
• React + Typescript のボイラーテンプレートもあるので参考に
• https://github.com/martellaj/chrome-extension-react-typescript-
boilerplate

19. 微妙なところ
• ユニットテストの書き方が分からない（可能なのか？）
• chrome.apiが基本callbackで、async/awaitに対応していない
• コールバックの戻り値をPromise型で返すとawaitできるようです
• chrome-extension-asyncってゆうmodule入れて対応できる
https://www.npmjs.com/package/chrome-extension-async
• Content Scriptではasync/awaitがうまくできないかも？（自分はでき
なかったです。。。）

20. まとめ
• 今まで出てきた概念を抑えると簡単に作れるよ
• 細かいことをやりたくなったら
• 公式ドキュメントを見てChromeAPIを使い倒す
• Manifestの設定項目を確認してみる
https://developer.chrome.com/extensions/api_index