はじめに

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

はじめに

Laravel で View 用のロジックを分離できるライブラリ robclancy/presenter の使い方について整理した。

TL;DR

• robclancy/presenter を使うと簡単に Decorator パターンを実装できる
• composer require robclancy/presenter でインストール
• ちょっとした設定、XxxxPresenter クラスの作成、Model ファイルの編集だけで View 用のロジックを分離できて便利

はじめに

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

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

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

TL;DR

• 2019/09 時点で使えそうなのは以下の4つ
  • terser/terser
  • javascript-obfuscator/javascript-obfuscator
  • babel/minify
  • google/closure-compiler-npm
• Chrome 拡張機能で使えそうなのは terser/terser
• 自分で管理するウェブサイトとかなら javascript-obfuscator/javascript-obfuscator が良さそう？

はじめに

MacBook Pro を修理に出したので、修理状況を定期的に確認できる Python スクリプトを書いた…んだけど、全部終わった後に「ステータス変わったらメールで通知ある(はずだ)から要らないんじゃね？」ってなった。

とは言え腐らせるのももったいないので記事にまとめておく。

TL;DR

• リポジトリクローン(git clone git@github.com:17number/fetch-apple-repair-status.git)
• 設定ファイルの変更(リネーム、内容書き換え)
• cron などで定期的に実行すると良さげ

はじめに

Git を使った開発をしていて composer.lock の content-hash でコンフリクトが発生した時の解決方法のメモ。

TL;DR

• composer.lock の content-hash のコンフリクトは以下で解決できる
  • content-hash のどちらかを残す
  • composer update --lock を実行

はじめに

Git を使った開発をしていて package-lock.json でコンフリクトが発生した時の解決方法のメモ。

TL;DR

• package-lock.json のコンフリクトは npm install すれば解決できる

はじめに

Git のバージョンアップ に合わせて git-completion.bash もアップデートしたら、g(git のエイリアス)で補完が効かなくなった。

g などのエイリアスに対しても補完を有効化する方法を忘れないようにまとめておく。(お察しの通り、過去の自分が有効化してたものを無効化してしまうという無能っぷり)

TL;DR

• ~/.git-completion.bash の末尾に __git_complete g __git_main を追加する
• ↑ でも良いが、また git-completion.bash をアップデートする時には絶対忘れている(確信)
• ~/.git-completion.bash の読み込み後に処理を追加する方が良さそう(大抵は ~/.bashrc)
  • if [ -f ~/.git-completion.bash ]; then source ~/.git-completion.bash; __git_complete g __git_main; fi
    • ワンライナーで書いてるが、実際は複数行で書いて OK(後述)

はじめに

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

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

TL;DR

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

はじめに

jQuery Select2 で、初期値を設定する方法と、クリアをする方法を調べた。

TL;DR

• $('#mySelect2').val("val").trigger('change'); で初期化
  • multiple なら $('#mySelect2').val(["val1", "val2", ...]).trigger('change');
• $('#mySelect2').val(null).trigger('change'); でクリア