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

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

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

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

対象読者

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

私の環境

• Windows10
• Chrome ver.74.0.3729.131
• JQuery ver.3.4.0

Chrome Extensionのわかりにくさ

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

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

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

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

Permissionの話

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

Permissionに何があるのか、については Declare Permissions - Google Chrome

にあります。

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

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

Content Scripts

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

Content Scripts にあるように「アクセスできるAPIが制限されている」という特徴があります。

Browser Action (Page Action)

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

そのスクリプトの中で Declare Permissions に書かれているChromeのAPIを使っていろんな事ができます。例えば下記の情報にアクセスできます

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

など。

Event Page (Background Page)

Chromeを起動している間ずっと動いてるスクリプトです。こちらもDeclare Permissions に書かれているChromeのAPIを使っていろんな事ができます。

ということで

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

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

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

(続く)

連載リンク

Chrome Extension の作り方 (その1: 3つの世界) - Qiita
Chrome Extension の作り方 (その2: Contents Script) - Qiita
Chrome Extension の作り方 (その3: Browser Action / Page Action) - Qiita
Chrome Extension の作り方 (その4: Event Page / Background Page) - Qiita
Chrome Extension の作り方 (最終話: メッセージパッシング) - Qiita