はじめに

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 で読み込み(更新)
続きを読む

はじめに

JavaScript のソースコードの圧縮・難読化ツールについて調べたり試したりしたので記事にまとめた。

Google chrome の拡張機能の開発で javascript-obfuscator/javascript-obfuscator を使って minify をしていたが、Google さんから「Policy 違反」と言われてしまったため、何がまずかったのかと代替できそうなツールを探した。

※2019/09/28 現在では、新しいツール(terser/terser を選択)を使って minify したソースをまだ提出していないので、もし Chrome 拡張機能の JS 圧縮について調べていてこのページにたどり着いた場合は鵜呑みにしないように注意。

TL;DR

続きを読む

はじめに

Vue.js を使って Chrome 拡張機能を開発できるテンプレートを探して、Kocal/vue-web-extension を見つけたので、簡単な使い方のメモ。

追記: 続編として Vue.js を使ってメインページ側で動作する Chrome 拡張機能を開発する方法 という記事も書いた。

TL;DR

  • vue init kocal/vue-web-extension my-extension で初期化
  • npm run builddist 配下にリリースファイル作成
  • npm run watch でファイル変更を検知してビルド
    • src 配下を編集して拡張機能を開発
続きを読む
  • page 1 of 1

r17n


Softwear Engineer


Fukuoka