search
LoginSignup
55
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

Chrome拡張 | アーキテクチャ

:musical_score: 概要

Chrome 拡張のアーキテクチャ

:musical_note: The background page

background pages は、 background.html を裏で持ち、
JavaScript でブラウザの action を制御します。

background pages は二種類あります。

Persistent Background Pages

常に開いている。
background page は Chrome 拡張の機能により自動的に生成されている。
もし、任意のページを利用したい場合は自分で指定することも可能。

  • manifest.json
manifest.json
{
  "name": "My extension",
  ...
  "background": {
    "scripts": ["background.js"]
  },
  ...
}

Persistent Background Pages に関する詳細は以下を参照

Background Pages

Event Pages

必要に応じて開いたり、閉じたりする。
常に開いている必要がないなら event pages を利用する方がよい。

  • manifest.json
manifest.json
{
  "name": "My extension",
  ...
  "background": {
    "scripts": ["eventPage.js"],
    "persistent": false
  },
  ...
}

Event Pages に関する詳細は以下を参照

Event Pages

:musical_note: UI pages

Chrome 拡張は通常の HTML のページを UI として利用することができる。

Browser Action + Popup

Browser Action とともに HTML で作成された ポップアップを利用可能です。
ポップアップは内部的には、裏で保持している background.html から呼び出されます。

  • Tampermonkey のポップアップの例

ui1.png

Browser Action + Popup に関する詳細は以下を参照

Browser Action

Options Page

Chrome 拡張のカスタマイズのための設定画面を HTML で用意することができます。

  • iKnow のオプション画面の例

ui2.png

Options Page に関する詳細は以下を参照

Options Page

Override Page

Override Page は、 Google Chrome が通常提供している画面を拡張できます。
例えば

  • Bookmark Manager Page
  • History Page
  • New Tab Page

など。

Override Page に関する詳細は以下を参照

Override Page

:dancers: Communication between pages

Chrome 拡張はしばしば複数のページで相互連携する必要がある。
その際は chrome.extension のメソッドを利用する。
例えば

  • getViews()
  • getBackgroundPage()

など。

Communication between pages に関する詳細は以下を参照

Communication between pages

:musical_note: Content scripts

もし、あなたの Chrome 拡張が Web ページと相互連携したいなら content script が必要です。

content script は

  • web page の詳細を読み取ることができ、ページを変更することができる
  • 親となる Chrome 拡張と切り離すことはできない
  • 親となる Chrome 拡張とメッセージを送り合うことができる

Content scripts に関する詳細は以下を参照

Content scripts

:musical_note: Using the chrome.* APIs

chrome.* APIs

:books: 外部資料

Chrome Extension | Overview | Architecture

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
55
Help us understand the problem. What are the problem?