Zenn
Open2

chrome extension 開発のメモ

JavaScript
Google Chrome
karamawanukaramawanu

Chromeエクステンションを作ろう：Chromeウェブストア編 - Qiita

ChromeExtension - Qiita

manifest.json

icons []

background

Manage Events with Background Scripts - Google Chrome

  • scripts [ <path>, .... ]
  • persistent
    • false なら Event Page
    • true なら Background Page

Chrome Extension の作り方 (その4: Event Page / Background Page) - Qiita

oauth2

OAuth2: Authenticate Users with Google - Google Chrome

permissions

Declare Permissions - Google Chrome

URL or 権限名

browser_action

  • default_icon <path>
  • default_title
  • default_popup <path:html>

content_scripts []

Content Scripts - Google Chrome

  • matches [ <url>, ... ]
  • js [ <path>,... ]
  • run_at
    • document_end

message

Chrome Extension の作り方 (最終話: メッセージパッシング) - Qiita

karamawanukaramawanu

実際に書いてみた知見:特定のサイトに反応して何かをする場合。

manifest.json

name:アプリ名
description: 説明
manifest_version: 3
background: {
  "service_worker": 何らかのデータを保留したい場合は事実上必須
}
action: {
  "popup": エクステンションアイコンを押した時の挙動。html
}
icons: 空ならnameの先頭の文字から勝手にアイコンをつけてはくれる
content_scripts: [
  {
    matches: [ url-glob, ... ],
    run_at: 起動タイミング
    js: [ ファイル名, ... ]
  }
]

スクリプト類

全て別プロセスで動くので通信が必要。
別のchromeextesionと混線する心配はない。

送信はブロードキャスト的に動く。
データについて何通りかの処理が必要であれば、自前で分岐する必要がある。

chrome.runtime.sendMessage(データ,送信成功コールバック)

コールバックは一癖ある。
popupは開いてる間にしか受け取れない。
content_scriptはタブ毎に別プロセス。
事実上、background.service_worker を設置するしかない。

chrome.runtime.onMessage.addListener((req,sender,cb)=>{})
sender.tab === undefined ならpopupから
sender.tab != undefined ならcontent_scriptからの送信
req は、sendmessageの第1引数。ただオブジェクトのclassは剥がれてるので要注意。
cb を呼んでデータを返す。

content_script[].js[]

ページのレンダリングに介入させる。複数記述できる。実際に <script> を埋め込むのと同質の挙動。

action.popup

まずhtmlを貼ってからscriptを貼る。
現在のタブ位置を知るには、 chrome.tabs.query({active:true},(tab)->コールバック) で問い合わせる

background.service_worker

content_scriptもpopupもスクリプトの生存期間が短いため、何かデータを溜めたければ必須。