はじめに

Chrome 拡張機能で Firebase Authentication を使って認証する方法。

TL;DR

  • Email/Password での認証は signInWithEmailAndPassword で実施
    • 次回以降ログインできるように Email/Password を Sync ストレージ に保存(※セキュリティ上の問題あり)
  • Email/Password で認証後、トークン発行&保持 でもいけそうだけど試せてない
  • Google 認証などの方法もあるが試せてない
続きを読む

はじめに

webpack & Babel を使って Chrome 拡張機能を良い感じに開発できるテンプレート(Hot Reload 付き)を作った。

TL;DR

続きを読む

はじめに

Chrome 拡張機能で FontAwesome (FontAwesome 5) を使う方法を整理した。

TL;DR

  • 外部アクセス(リモートコード) OK な場合
    • 拡張機能内で <head><link> を差し込む
  • 拡張機能内で完結したい場合
    • Download | Font Awesome から「Pro/Free for Web」一式をダウンロード
    • webfonts 配下一式、および css/all(.min).css を拡張機能内に配置
    • all(.min).cssurl(../webfonts/xxxx)url(chrome-extension://__MSG_@@extension_id__/xxxx) に変更
    • manifest.jsoncss/all(.min).css を読み込み
    • manifest.jsonweb_accessible_resources にフォント一式を追加
続きを読む

はじめに

Chrome 拡張機能で、同梱しているファイルにアクセスする方法について整理した。

本記事では、画像をページ中に追加表示する例を示す。

TL;DR

続きを読む

はじめに

Chrome 拡張機能で外部サイトへの HTTP リクエスト時に Request Headers をカスタマイズする方法について整理した。

User Agent を変更したり、Cookie を付与したり、色々とできるようになる。

TL;DR

  • chrome.webRequest.onBeforeSendHeaders を使う
  • 一部の内容はイベントハンドラ内で参照できないし、設定しても保証されない
  • User Agent を変更したり、Cookie を付与したりできる
続きを読む

はじめに

Chrome 拡張機能を React などで構成された SPA で動作させる方法 で、background から JS を注入する方法を整理した。が、別要件で上手くいかないケースがあったのでメッセージドリブンで処理タイミングを通知する方法を整理した。

TL;DR

続きを読む

はじめに

とあるページ向けに作っていた拡張機能が上手く動作しなくなったので確認すると、React.js を利用した SPA に変更されていた。

リロードするとちゃんと動作するのだが、クリックなどでページ遷移すると拡張機能が動作しないので、対応方法について調べた。

続編: Chrome 拡張機能で background scripts から content scripts にメッセージを送信する

TL;DR

続きを読む

はじめに

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-hotreloadhot-reload.js をローカルに保存
  • manifest.json"background": { "scripts": ["hot-reload.js"] } を追加
  • 開発中の拡張機能を chrome://extensions で読み込み(更新)
続きを読む

r17n


Softwear Engineer


Fukuoka