Chrome Extensionを作る
Browser Extension Frameworkとか見ると良さそう
フォーマットが妙に読みづらいな...
>#WIP
reactで作る
雛形は使うほどではないので使う必要はない
バージョンが上がっていないにもかかわらず昔の記事は参考にならなかったりする
ChromeAPIのライブラリの型定義ファイルの各methodの説明がかなり詳しいかもしれない
optionalのmethodに、「これを使いたいならこれをincludeしろよ」って書いてあった
限定公開
ハマりポイント
tutorial
ChromeExtensionの種類(普通にもっとある)
Background Page
Chrome全体の裏で動くページ(ページではない)
各イベントリスナーの登録をする
ユースケース
ページ遷移時、ブックマーク登録時
メモリ的に無駄が多いので代わりにEvent Pageの使用が推奨されている
Event Page
Content Scripts
各ページの裏で動くスクリプト
ユースケース
DOM操作、PageActionのキャッシュ保持
Page Action
Chromeのツールバーのアイコンをクリックしたときに表示されるHTML
キャッシュは保持されない
特定のページに作用する
Browser Action
Chromeのツールバーのアイコンをクリックしたときに表示されるHTML
キャッシュは保持されない
ブラウザ全体に作用する
任意のページにアクセスしたときに、そのページのURLを取得したい
それをclgに表示
プロジェクト作成
$ yarn init$ yarn add -D typescript$ yarn tsc --initmanifest.jsonを用意 ref
場所どこでもいいの？
最初はたぶんルート
content_scripts.js ルートなファイル
この名前でないといけないわけではないが、デファクトスタンダード？
以下2つを読めばいける
動かしてみる
ビルドする
chrome://extensions/ で「パッケージ化されていない拡張機能を読み込む」mathesのリンクに行き強制リロード
API
みづれーーーー
manifestの
browser_action.default_popupにhtmlを追加したらクリックしたら表示された
良い記事
メッセージ通信
chrome.runtime.sendMessage でメッセージを送信 chrome.runtime.onMessage.addListener でメッセージを受信デバッグの方法
使う種類によって異なる
これむずすぎやろ。。
popupの場合は、popup上で右クリックでcdtを開く必要がある
backgroundの場合は、
APIの調べ方
EventListner知らなさすぎる
いちいちビルドして読み込ませるの面倒すぎる
なんかあるだろ？？さすがに？？
作ってみた系の記事
React