Chrome拡張機能の構造のーと

• Google Chrome 65.0.3325.181
• https://developer.chrome.com/extensions/getstarted
• https://developer.chrome.com/extensions/manifest

Chrome拡張機能の説明を読んだら、似たような言葉にいい感じに混乱したので図にしとく。

クラス名に使用しているのはドキュメントにでてきた言葉。
"ダブルクォーテーション" は manifest.json に登場する言葉。

図のソース

これでも見れるけど、なんとなく貼っておく

@startuml
hide circle
class Extension

Extension *-- "0..1" UI_elements
Extension *-- content_scripts
Extension *-- background_scripts
Extension *-- option_pages
Extension *-- various_logic_files

background_scripts <|-- background_page
background_scripts <|-- event_page

option_pages <|-- options_ui
option_pages <|-- options_page

UI_elements <|-- browser_action
UI_elements <|-- page_action

class background_scripts {
"background_page"
--
裏方で動く仮想的なページ
HTMLの体裁を保つ理由は多分ない
}
class background_page {
"persistent" = true
--
非推奨（ずっと動いちゃう）
}
class event_page {
"persistent" = false
--
必要な時だけ動くもの
}

class content_scripts {
"content_scripts"
--
ページのDOMを触るもの
}

class option_pages {
--
「拡張機能のオプション」
から開く設定画面
}
class options_ui {
"options_ui"
}
class options_page {
"options_page"
--
古い（options_uiに移行）
}

class UI_elements {
--
ユーザーが使うUI
}
class browser_action {
"browser_action"
--
いつでも使うもの
}
class page_action {
"page_action"
--
特定ページで使うもの
}

class various_logic_files {
--
スクリプトとか画像とか
他の拡張で使う諸々
}
@enduml