Chrome Extension の作り方 (その1: 3つの世界)

弊社の「自動化チーム(4人)」では、主にGoogle Apps Scriptを使って業務の自動化・効率化に取り組んでいるのですが、「Chromeのエクステンションも使えるようになったら強いよね」ということで、チームで一番エクステンションを使いこなす男 @ikeikeda にレクチャーをしてもらいました。

その時の内容がものすごく良かったので、Qiitaに記事上げなよ、って言ったのですが本人が「そゆの苦手なんで」ってことなので、ネタだけもらって私が私なりに再構成して記事書いちゃいます。

あと、私自身がJavascriptの最新情報に追いつけていないので、誤った記法があったらご指摘いただけると嬉しいです。

# 対象読者

- すでに `Chrome エクステンション` とか `Chrome 拡張 作り方` で検索して、いくつかのQiita記事を読んだり、少なくとも1つは自分で作ったことがある人 (← manifest.jsonに何を書くのかなんとなく分かる人)
- ChromeExtensionには下記の **3つの世界** があることを知ってる人。知らない人は [Chrome拡張の開発方法まとめ　その1：概念編 \- Qiita](https://qiita.com/k7a/items/26d7a22233ecdf48fed8) がわかりやすいです。
    - Content Scripts
    - Browser Action (Page Action)
    - Event Page (Background Page)
- JQueryを使ったことがある人 (← 使わなくても可能なのですが、私が使いたいから)
    - JQueryは [Download jQuery](https://jquery.com/download/) ←ここからダウンロード

# 私の環境

- Windows10
- Chrome ver.74.0.3729.131
- JQuery ver.3.4.0

# Chrome Extensionのわかりにくさ

- 体系的にまとまった記事がみつからない。
    - [Chrome拡張　備忘録　１から１０まで](https://qiita.com/Tachibana446/items/696bb93bd4a23525cbb0)
- 似たような用語が出てきて、どれが何かわからなくなる
    - これについては[Chrome拡張機能の構造のーと](https://qiita.com/nononote/items/66e297aa070f33ae1185)の図がわかりやすかったです。
- 何が最新なのかわからない...のは日本語の記事ばかり追ってるからで、公式サイトである [What are extensions?](https://developer.chrome.com/extensions) あたりから読み解けよ、っていう話なんですよねきっとごめんなさい。

ただ、それを読んだとしても私の一番のひっかかりポイントとしては **何ができるのかよくわからない** に加えて **やりたいことを実現するにはどうしたらいいかわからない** でした。

今回はここについて、自分なりに「こういう説明だったらわかりやすいのでは？」というまとめ方をしたいと思います。あといつも迷うのが「デバッグメッセージってどこに出るの？」なので、これも合わせて載せておきます。

(ちなみに本気の人は [Google Chrome拡張機能入門 \(全20回\) \- プログラミングならドットインストール](https://dotinstall.com/lessons/basic_chrome_v3) の Premiumプラン(有料)に素晴らしいレッスンがあるので、やってみるといいと思います！)


# Permissionの話

そのExtensionがChromeの何に対してアクセスしたいか、によって `manifest.json` に `permissions` を指定する必要があります。

Permissionに何があるのか、については [Declare Permissions \- Google Chrome](https://developer.chrome.com/extensions/declare_permissions)

にあります。

例えば「ストレージ(`storage`)」を私はよく使いますが、`contextMenus`(右クリックで出てくるメニュー) とか `history` とか `pageCapture` というPermissionもあるようです。やりたいことに応じて指定しましょう。


#  3つの世界 のできることの違い

## Content Scripts

今ブラウザ上に表示されているページに対して、スクリプトを挿入してDOM操作(要素の追加、取得、編集、削除)ができます。背景色を変えたり、フォント情報を変更したり、ボタンを追加したり。あるいは「その画面に特定の文字列があったら何かをする」のような処理も可能です。

[Content Scripts](https://developer.chrome.com/extensions/content_scripts) にあるように「アクセスできるAPIが制限されている」という特徴があります。

## Browser Action (Page Action)

Chrome右上に表示されているアイコンをクリックしたときに何かの処理をさせることができます。
ポップアップを表示させる、とか、押したことをトリガーとしてスクリプトを起動させるとか。

そのスクリプトの中で [Declare Permissions](https://developer.chrome.com/extensions/declare_permissions) に書かれているChromeのAPIを使っていろんな事ができます。例えば下記の情報にアクセスできます

- タブ
- ブックマーク
- 履歴
- クリップボード

など。

## Event Page (Background Page)

Chromeを起動している間ずっと動いてるスクリプトです。こちらも[Declare Permissions](https://developer.chrome.com/extensions/declare_permissions) に書かれているChromeのAPIを使っていろんな事ができます。


# ということで

...という **3つの世界** があって、**自分のやりたいことを実現するには、どの世界の技術を使えばいいのか** を探さなければなりません。場合によってはどれか1つの世界だけで完結することもありますし、複数の世界をつなぐ必要があることもあります。

ワタシ的なポイントとしては、「表示されている画面の中の情報は `Content Scripts` からしかアクセスできない」という点です。

これ以降、**3つの世界** それぞれでできることの例と、**3つの世界をつなぐ例** を紹介します。

(続く)


# 連載リンク

[Chrome Extension の作り方 \(その1: 3つの世界\) \- Qiita](https://qiita.com/sakaimo/items/416f36db1aa982d8d00c)
[Chrome Extension の作り方 \(その2: Contents Script\) \- Qiita](https://qiita.com/sakaimo/items/6b7b464de4bdcad18802)
[Chrome Extension の作り方 \(その3: Browser Action / Page Action\) \- Qiita](https://qiita.com/sakaimo/items/129a785146e5873c42a6)
[Chrome Extension の作り方 \(その4: Event Page / Background Page\) \- Qiita](https://qiita.com/sakaimo/items/edd910a770b3d5ba83e3)
[Chrome Extension の作り方 \(最終話: メッセージパッシング\) \- Qiita](https://qiita.com/sakaimo/items/5e41d6b2ad8d7ee04b12)