Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
55
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

@tbpgr

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

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
55
Help us understand the problem. What are the problem?