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

Chrome拡張 | アーキテクチャ

More than 5 years have passed since last update.

: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

tbpgr
主にRubyを扱う Recruiting Operations 。 tbpgr の読み方は(てぃーびー) 個人ブログでも色々と情報を垂れ流してます。 http://tbpgr.hatenablog.com/
http://tbpgr.hatenablog.com/
studist
「伝えることを、もっと簡単に」をミッションにビジュアルSOPマネジメントプラットフォームのBtoB SaaS「Teachme Biz」を開発・運営するスタートアップ
https://medium.com/studist-dev
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
ユーザーは見つかりませんでした