はじめに
Chrome 拡張機能で Firebase Authentication を使って認証する方法。
TL;DR
- Email/Password での認証は
signInWithEmailAndPasswordで実施- 次回以降ログインできるように Email/Password を Sync ストレージ に保存(※セキュリティ上の問題あり)
- Email/Password で認証後、トークン発行＆保持 でもいけそうだけど試せてない
- Google 認証などの方法もあるが試せてない
はじめに
Chrome 拡張機能で FontAwesome (FontAwesome 5) を使う方法を整理した。
TL;DR
- 外部アクセス(リモートコード) OK な場合
- 拡張機能内で
<head>に<link>を差し込む
- 拡張機能内で
- 拡張機能内で完結したい場合
- Download | Font Awesome から「Pro/Free for Web」一式をダウンロード
webfonts配下一式、およびcss/all(.min).cssを拡張機能内に配置all(.min).cssのurl(../webfonts/xxxx)をurl(chrome-extension://__MSG_@@extension_id__/xxxx)に変更manifest.jsonでcss/all(.min).cssを読み込みmanifest.jsonのweb_accessible_resourcesにフォント一式を追加
はじめに
Chrome 拡張機能で、同梱しているファイルにアクセスする方法について整理した。
本記事では、画像をページ中に追加表示する例を示す。
TL;DR
manifest.jsonでweb_accessible_resourcesを指定*などのワイルドカードが使用できる
chrome.extension.getURLで URL を取得して使う
はじめに
Chrome 拡張機能で外部サイトへの HTTP リクエスト時に Request Headers をカスタマイズする方法について整理した。
User Agent を変更したり、Cookie を付与したり、色々とできるようになる。
TL;DR
chrome.webRequest.onBeforeSendHeadersを使う- 一部の内容はイベントハンドラ内で参照できないし、設定しても保証されない
- User Agent を変更したり、Cookie を付与したりできる
はじめに
Chrome 拡張機能を React などで構成された SPA で動作させる方法 で、background から JS を注入する方法を整理した。が、別要件で上手くいかないケースがあったのでメッセージドリブンで処理タイミングを通知する方法を整理した。
TL;DR
- content:
chrome.runtime.onMessage.addListenerを使ってメッセージを待つ - background:
chrome.tabs.sendMessageを使ってメッセージを送るchrome.tabs.onUpdated.addListenerでタブの更新の検出や URL の絞り込みを行う
はじめに
とあるページ向けに作っていた拡張機能が上手く動作しなくなったので確認すると、React.js を利用した SPA に変更されていた。
リロードするとちゃんと動作するのだが、クリックなどでページ遷移すると拡張機能が動作しないので、対応方法について調べた。
続編: Chrome 拡張機能で background scripts から content scripts にメッセージを送信する
TL;DR
chrome.tabs.onUpdated.addListenerでページ遷移を検知chrome.tabs.executeScriptで JS を注入- DOM 追加するような場合は、追加位置によっては残存するので適宜削除する
はじめに
Chrome 拡張機能で CSV ファイルを生成してダウンロードする方法について整理した。
TL;DR
ほぼ JavaScriptでファイルダウンロード処理を実現する - Qiita の通り
new Blobでオブジェクトを生成createObjectURLで URL に変換<a href="..." download="hoge.csv">でダウンロード
はじめに
Vue.js を使って Chrome 拡張機能を開発する方法について簡単に整理した。
前回の記事 では、Kocal/vue-web-extension を使った Chrome 拡張機能の開発方法について調べた。が、「Kocal/vue-web-extension では Popup Page や Options Page で Vue.js を使うもの」、つまり「メインページ(メインコンテンツ?)側では使えないもの」という結論に至った。(※自分の中では、の話)
冷静に考えて「メインページ側に使えないわけがない」と思って、どのようにすれば実現できるかについて調査した。
実際に拡張機能を作ってリリースした話 : Vue.js を使ってChrome 拡張機能を作った話(はてなブックマークのコメントを Qiita 記事内に表示) - Qiita
TL;DR
vue.config.jsを用意してvue-cli-serviceでビルドすれば動作することを確認manifest.jsonではchunk-vendors.jsを先に読み込む- minify とか css preprocessor とかはまだ調べきれてない
はじめに
Chrome 拡張機能の開発をしていて、ファイルの変更後に毎回 chrome://extensions を開いて手動で更新するのがダルかったので、ファイルの変更を検知して自動で更新してくれる方法を調べた。
ほぼほぼ元記事通りの内容だけど、忘れないようにメモしておく。
TL;DR
- xpl/crx-hotreload の hot-reload.js をローカルに保存
manifest.jsonに"background": { "scripts": ["hot-reload.js"] }を追加- 開発中の拡張機能を
chrome://extensionsで読み込み(更新)
