Chrome拡張 | アーキテクチャ

## :musical_score: 概要
Chrome 拡張のアーキテクチャ

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

background pages は二種類あります。

### <i class="fa fa-leaf" style="font-size:1em;"></i><i class="fa fa-desktop" style="font-size:1em;"></i><i class="fa fa-recycle" style="font-size:1em;"></i> Persistent Background Pages
常に開いている。
background page は Chrome 拡張の機能により自動的に生成されている。
もし、任意のページを利用したい場合は自分で指定することも可能。

* manifest.json

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

Persistent Background Pages に関する詳細は以下を参照  
<i class="fa fa-external-link" style="font-size:1em;"></i> [Background Pages](https://developer.chrome.com/extensions/background_pages)

### <i class="fa fa-leaf" style="font-size:1em;"></i><i class="fa fa-desktop" style="font-size:1em;"></i><i class="fa fa-clock-o" style="font-size:1em;"></i> Event Pages
必要に応じて開いたり、閉じたりする。
常に開いている必要がないなら event pages を利用する方がよい。

* manifest.json

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

Event Pages に関する詳細は以下を参照  
<i class="fa fa-external-link" style="font-size:1em;"></i> [Event Pages](https://developer.chrome.com/extensions/event_pages)

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

### <i class="fa fa-google" style="font-size:1em;"></i> Browser Action + Popup
Browser Action とともに HTML で作成された ポップアップを利用可能です。
ポップアップは内部的には、裏で保持している background.html から呼び出されます。

* Tampermonkey のポップアップの例

![ui1.png](https://qiita-image-store.s3.amazonaws.com/0/43480/06b29122-1cde-04f0-7d03-800b79ff6334.png)

Browser Action + Popup に関する詳細は以下を参照  
<i class="fa fa-external-link" style="font-size:1em;"></i> [Browser Action](https://developer.chrome.com/extensions/browserAction)

### <i class="fa fa-plus-square" style="font-size:1em;"></i> Options Page
Chrome 拡張のカスタマイズのための設定画面を HTML で用意することができます。

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

![ui2.png](https://qiita-image-store.s3.amazonaws.com/0/43480/8c3df8a6-0e7e-d29b-4441-c7b32e5e5bd4.png)

Options Page に関する詳細は以下を参照  
<i class="fa fa-external-link" style="font-size:1em;"></i> [Options Page](https://developer.chrome.com/extensions/options)

### <i class="fa fa-refresh" style="font-size:1em;"></i> Override Page
Override Page は、 Google Chrome が通常提供している画面を拡張できます。
例えば

* Bookmark Manager Page
* History Page
* New Tab Page

など。

Override Page に関する詳細は以下を参照  
<i class="fa fa-external-link" style="font-size:1em;"></i> [Override Page](https://developer.chrome.com/extensions/override)

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

* getViews()
* getBackgroundPage()

など。

Communication between pages に関する詳細は以下を参照  
<i class="fa fa-external-link" style="font-size:1em;"></i> [Communication between pages](https://developer.chrome.com/extensions/overview#pageComm)

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

content script は

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

Content scripts に関する詳細は以下を参照  
<i class="fa fa-external-link" style="font-size:1em;"></i> [Content scripts](https://developer.chrome.com/extensions/content_scripts)

## :musical_note: Using the chrome.* APIs
<i class="fa fa-external-link" style="font-size:1em;"></i> [chrome.* APIs](https://developer.chrome.com/extensions/api_index)

## :books: 外部資料
<i class="fa fa-external-link" style="font-size:1em;"></i> [Chrome Extension | Overview | Architecture](https://developer.chrome.com/extensions/overview#arch)