Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

弊社の「自動化チーム(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を使ったことがある人 (← 使わなくても可能なのですが、私が使いたいから)

私の環境

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

Chrome Extensionのわかりにくさ

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

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

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

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

Permissionの話

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

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

sakaimo
みなさんの記事に助けられております。私も何かお役に立てるよう頑張ります。。。 2020年からはGoogle Apps Script、Query関数、Data Portal、たまにChromeエクステンション を使って 自動化・効率化・見える化を担当しています。
https://note.mu/sakaimo
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした