Chrome拡張機能作ってみた(初)
丸2日かかって、なぜかChrome拡張機能を作っちゃた。
この忙しいときに何をやってるんだと自分でも思うけれど、本来やるべきことを2日連続妨害が入ってやれない気晴らしのようなものか。
Chromeアドオンなんて面倒そうだし作る気なんて全く無かった。
ただ既存のサイトが気に入らなかったりすると独自のJavaScriptを追加したくなるし、データ取得する時も、PHP作ってデータ取得という方法もあるが、JavaScriptの方が使い慣れてるしPHP正直忘れちゃったし、サーバーに設置するの面倒なんで、成り行きでChromeアドオン作ってたらなんかすいすい上手く行ったので調子に乗ってのめり込み丸2日を費やしてしまった。
ーーーーーーーーーー
で、いくつか躓いた点をメモっておこうと思う。
そもそもChromeExtensionって日本語の解説ページ自体が少ない。
参考にさせて頂いたページを最下部に張っておこう。
ーーーーーーーーーー
ーChrome拡張機能を初めて作った際の覚書ー
・アドオンはいくつかの独立した領域に分かれていて、通常はデータをやり取り出来ない
→メッセージパッシング機能を使う
●Content Script
一番良く使う。ページ内で動作する自作Jsファイルを使って任意のタブ内のDOM操作ができる。
●Background PageとEvent Page
Background Pageはメモリを占領し常にバックグラウンドで動作してるプログラム。
Event Pageはバックグラウンドで動作するが、必要な時のみ立ち上がる。
manifest.json の中でpersistent:false→Event Page
persistent:true→Background Pageとして動作するらしい。
●Browser ActionとPage Action
Chrome拡張機能のメイン動作であるアイコンをクリックすると何らかの動作をするアレを実装する部分。
今回の私のアドオンはContent ScriptとBrowser Actionとの連携で動作している。
Manifestのこの項目でpopupのhtmlを指定すると、アドオンのアイコンをクリックすれば指定のhtmlが出てくれるのだが、PopUp表示されるだけなので、他のウィンドウをクリックすると閉じるし、閉じちゃうとデータは保持されない。
そしておそらく閉じた状態だとContent Scriptなど他の領域からメッセージパッシング出来ない？かも。
PopUpし直す度にデータが初期値に戻るのはごめんなので、Chromeアドオンで使えるデータ保存メソッドchrome.storage.sync.setを使いデータを自動的に保存しPopUpが再表示された際chrome.storage.sync.getで読み込みしている。
●メッセージパッシングは、PopUp→Content Scriptへの送信はchrome.tabs.sendMessageを使っている。
どのタブに送るか決めるためだ。
そしてタブを取得するためにchrome.tabs.queryを使う。参考
ちなみにPopUp→Content Scriptへの送信にchrome.runtime.sendMessageを使ってもメッセージは届かないらしい。参考
Content Script→PopUpへの送信はchrome.runtime.sendMessageを使った。タブがない分使い方はシンプルだ。
ちなみに送るデータは連想配列のように複数のデータを送れるし、変数も指定出来る。chrome.runtime.sendMessage({name: "Sayaka",age: 18,hobby: "piano"}, function(response) {
console.log(response.kaeri);
});
ーーーーーーーーーーーー
[凡ミスで躓いた点]
・DOMの操作が上手くいかないと思ったらDOMがちゃんと読み込まれる前に実行してた。
Onloadイベの後にちゃんと書かないとダメですね…。
・Clickイベントが発火しないことで悩んでた。
動的に追加したボタン、nameとidが同じ、DOM読み込み前にクリックイベント置いてる、と発火しない原因になりうるっぽい。参考1
・そもそもコンソールエラー発生してないってのはイベント自体が起こってないって意味っぽい。
・子ウィンドウなどが操作出来るのは同一ドメインからのみ？で、
フォーカスが子ウィンドウに当たってないとDOM操作出来なかった。
Content Script内で子ウィンドウ作成しようとしても、アドオン内のhtmlでなく表示されてるタブページのドメイン内のhtmlを参照して小ウィンドウ作成しようとする。
最近しみじみ思うのは、想定と違うとこに問題の原因が潜んでると迷宮入りしやすい…。
手作業だと途轍も無い手間がかかる作業がすべてオートで進んでいく様は圧巻で、見ていると感動すら覚えるが、軽い気持ちで作るつもりでも毎回それなりの時間を要するうえに、上手くいくとついあれもこれもと欲が出て来て、機能改善に手を出してしまい収集がつかなくなるというのもこういう開発あるあるだと思う今日のこのごろです。
入門：概要、動的なページ読込、dataset解説、data属性、注意ポイント
メッセージパッシング、概念編、サンプルとURL
