はじめに
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 とかはまだ調べきれてない
はじめに
JavaScript のソースコードの圧縮・難読化ツールについて調べたり試したりしたので記事にまとめた。
Google chrome の拡張機能の開発で javascript-obfuscator/javascript-obfuscator を使って minify をしていたが、Google さんから「Policy 違反」と言われてしまったため、何がまずかったのかと代替できそうなツールを探した。
※2019/09/28 現在では、新しいツール(terser/terser を選択)を使って minify したソースをまだ提出していないので、もし Chrome 拡張機能の JS 圧縮について調べていてこのページにたどり着いた場合は鵜呑みにしないように注意。
TL;DR
- 2019/09 時点で使えそうなのは以下の4つ
- Chrome 拡張機能で使えそうなのは terser/terser
- 自分で管理するウェブサイトとかなら javascript-obfuscator/javascript-obfuscator が良さそう？
はじめに
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');でクリア
はじめに
Cordova でネイテイブのダイアログを表示できる cordova-plugin-dialogs について調べた。
TL;DR
cordova-plugin-dialogsはネイティブのダイアログを呼び出す- タイトルやボタン名も変更可能
- 見た目の比較(
window.alertなどとの違い、iOS, Android での違い)をまとめた - 通常の
window.alertなども考慮した Wrapper を作った- Vue.js の mixin なのでそれ以外の人は適宜修正
はじめに
Cordova で Splash Screen を設定できる cordova-plugin-splashscreen についてまとめた。
TL;DR
cordova plugin add cordova-plugin-splashscreenでインストールres/screen/iosなどに画像ファイルを配置config.xmlに<splash src="res/screen/ios/xxxx.png" />を追加- デフォルトは表示から3秒後にフェードアウト
はじめに
JavaScript で URL のクエリパラメータ部分を操作する方法を調べた。
TL;DR
const url = new URL(location)で初期化url.searchParams.set("hoge", "fuga")などで設定url.hrefやurl.toString()で設定後の URL を出力
はじめに
JavaScript で setTimeout, setInterval, addEventListener のコールバック関数に引数を渡す方法をまとめた。
TL;DR
setTimeout,setIntervalにはbind(<this>, <args>)- コールバック関数内では、関数定義の仮引数でアクセス
addEventListenerには第二引数を Object 型で渡す- コールバック関数内では
this.argsで引数にアクセス
- コールバック関数内では
目的・やったこと
setTimeout, setInterval, addEventListener のコールバック関数に引数を渡したかったので調べてまとめた。
