Go to Qiita Advent Calendar 2024 Top
LoginSignup
28
26

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@M_Kagawa(Muneyasu Kagawa)

Chrome拡張開発 超概要

Last updated at Posted at 2019-10-23

社内勉強会用資料です。

はじめに

Chrome拡張の開発にライブラリやSDKは必要なく、js のみで開発できます。
フォルダ構成も自由で、配置した js を manifest.json で定義して使用します。

フォルダ構成例
[アプリ名フォルダ]
　├ manifest.json
　├ js
　│　├ content.js
　│　└ background.js
　├ css
　│　└ main.css
　├ html
　│　└ option.html
　└ img
　　├ 16x16.png
　　└ 32x32.png

拡張にはいくつか種類があり、実行されるタイミングや場所などによって種類が分けられています。
manifest.json で Chrome のどの拡張を開発するのかを定義します。

manifest.json

公式 : Manifest File Format

  • 拡張名やバージョン、説明、JSの紐づけや権限設定など、全ての設定はこのファイルで行います
  • 複数指定できる項目は上から順に読み込まれるため、依存関係がある場合は注意が必要です
manifest.json設定例
{
  "name": "拡張の名前(拡張設定画面に出る)",
  "description": "拡張の説明(拡張設定画面に出る)",
  "version": "拡張のバージョン",
  "manifest_version": 2,
  "content_scripts": [
    {
      "matches": [ "<all_urls>" ],
      "js": ["js/content_script.js"],
      "css": ["css/main.css"]
    }
  ],
  "background": {
    "scripts": ["js/background.js"]
  },
  "permissions": [
    "tabs",
    "clipboardRead",
    "clipboardWrite",
    "storage",
    "cookies",
  ],
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "options_page": "html/options.html"
}

  • manifest_version
    マニフェストのバージョン。
    2019/10/24現在、新しく開発する場合は 2 で固定です。

  • content_scripts
    後述する Content Scripts を定義します。
    複数定義可。

    • matches
      Content Scripts を挿入するページのURLを正規表現で指定出来ます。
      余計なページで実行すると不具合が起きたり遅くなったりするので、最低限にしておくのがベストです。
      <all_urls> で全てのページへ挿入されます。

  • background
    後述する Background Scripts を定義します。
    1つだけ定義可。( js は分割できます)

  • permissions
    使用する Chrome API の種類をここで定義します。
    定義されていないAPIは使えません。
    セキュリティ上の観点から、最低限にしておくのがベストです。
    必要以上の権限を設定すると審査に通りにくくなるらしい。

ローカルからインストールする

開発中にもChrome上で動作させますが、
まだストアには公開されていないためローカルの 拡張 を Chrome へ入れる必要があります。

  • アドレスバーにchrome://extensions/と入力、Enter。
  • 右上のデベロッパーモードを ON にする。
  • [アプリ名フォルダ]を Chrome の画面に D&D → Install !

ちなみにこの方法でインストールすると、Chrome起動時にポップアップが出るようになります。
公式に消す方法は存在せず、Chromeのバイナリを書き換えるしか方法はないようです。

参考 : 【Chrome】「デベロッパーモードの拡張機能を無効にする」ポップアップをバイナリ書き換えで消し飛ばす

公式ドキュメント

Develop Extensions

チュートリアルや API リファレンス、サンプルなど豊富に揃ってます。

主な拡張の種類

  • Content Scripts ★
  • Background Scripts ★
  • Page Action / Browser Action
  • Override Pages
  • Context Menus
  • Omnibox
  • Option Page

Content Scripts

公式 : Content Scripts

  • 表示しているページに挿入される js
  • タブを開いたりリロードした際に読み込まれます
  • マウス操作やキーボード操作、タブの操作等をイベントとして拾えます
  • 表示中のDOMも操作できます
  • 外部通信は出来ません(CORSが設定されていれば出来る、たぶん)
  • 使用できるAPIが制限されています

Background Scripts

公式 : Manage Events with Background Scripts

  • Chromeの裏で動く js
  • ブラウザ起動時 or 拡張有効化時に1回だけ読み込まれます
  • 重い処理や通信系などはこちらで行います
  • 直接DOMの操作は取得出来ないのでタブを指定してスクリプトを送り込む等の工夫が必要です
  • 外部通信が出来ます
  • ほぼ全てのAPIを使えます

Page Action / Browser Action

公式 : Page Actions / Browser Actions

  • ブラウザの右上にある拡張のアイコンをクリックしたときに動く js や html です
  • 特定のページでのみ有効か全体で有効かの違いです

Override Pages

公式 : Override Pages

  • 新規タブ作成画面、ブックマークマネージャ画面、履歴画面のいずれかを差し替えることが出来ます

Context Menus

公式 : Context Menus

  • 右クリック時のメニューを拡張できます

Omnibox

公式 : Omnibox

  • 検索バーでの操作を拡張できます

Option Page

公式 : Options Pages

  • 設定ページです
  • 右上のアイコンから飛べます
  • 設定は基本的にローカルストレージに保存して利用します

Content Scripts と Background Scripts での通信（Message Passing）

DOMの操作やイベントの検知は Content Scripts で行いますが、APIが制限されているので細かいことが出来ない場合が多いです。
その場合は Background Scripts へ制御を移して処理を行います。
Message Passing という各スクリプトでやり取りが出来る仕組みがあります。

公式 : Message Passing

content_script.js から background.js へ Message Passing を行う例

処理は 1 → 2 → 3 の順で実行されます。

content_script.js
chrome.runtime.sendMessage({

    // 好きなオブジェクトを渡せる ====== 1
    mode: "foo",
    html: document.body.outerHTML // htmlを渡したり

}, response => {

    // background.js からのコールバック(sendResponse) ====== 3
    console.log(response); // bar
});
background.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {

    // 渡されたオブジェクトが request として入ってくる ====== 2
    let mode = request.mode; // foo
    let restext = request.html; // 表示中ページのhtml

    // 処理分岐書いたり
    switch(mode) {
        case "foo": {
            // 処理
            // ...
            // ...
            sendResponse("bar"); // content_script.js にコールバック
            break;
        }
        default: {
            break;
        }
    }
    return true;
});

よく使うAPI

処理はほぼ全てコールバックで続けていくので地獄にならないよう工夫が必要です。

  • chrome.tabs.create(object createProperties, function callback)
    新しいタブを作成します。
    オプションで「どのウィンドウに作るか」「どの位置に作るか」「アクティブにするか」等を指定できます。

  • chrome.tabs.query(object queryInfo, function callback)
    タブの情報を取得します。
    オプションで「どのウィンドウから取得するか」「特定のURLを開いているタブ」「アクティブなタブ」等を指定できます。

  • chrome.tabs.executeScript(integer tabId, object details, function callback)
    指定したタブでスクリプトを実行できます。
    スクリプトを直接書いたり、ファイルを指定したりもできます。
    実行タイミングの指示も可能です。
    タブを指定しないといけないので、 chrome.tabs.query と併用することが多いです。

  • StorageArea.get(string or array of string or object keys, function callback)
    StorageArea.set(object items, function callback)
    ローカルストレージを利用します。

    • StorageArea
      • chrome.storage.local 拡張ごとのローカルストレージ
      • chrome.storage.sync アカウントごとに共通なローカルストレージ

  • chrome.cookies.getAll(object details, function callback)
    全ドメインのクッキーを取得します。
    getAll ではなく get を使えばドメイン指定できます。

  • chrome.runtime.sendMessage(string extensionId, any message, object options, function responseCallback)
    Content Scripts から Background Scripts へメッセージを送ります。
    上で紹介したものです。

  • chrome.tabs.sendMessage(integer tabId, any message, object options, function responseCallback)
    Background Scripts から Content Scripts へメッセージを送ります。
    上で紹介した通信の逆方向バージョン。
    外部通信、処理を行った結果を Content Scripts へ渡したいときに使います。

まとめ

manifest.jsonで定義した構造、ファイル名で html / js / css が動けばいいので、TypeScript + babel や webpack 等を使って作ることも出来ます。
ライブラリやAnguler・React等のフレームワークも動きます。

ストアに公開した拡張は利用者からソース見れてしまうので要注意。
直接ソースを見られるようにしたサイトもあります。(zipでDL出来るサービス付き)

28
26
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
28
26

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?