Entertainer Engineering

人を楽しませられる技術者を目指すあおかびんのブログ

ChromeのExtentionを作った話

こんばんは、aokabinです。

ちょっと久々にがっつりコード書いてみようと思って、今日は一日開発してました。

作ったのはこれです。
github.com

何を作ったか

何をするExtentionかというと、
Twitterの公式Webクライアントで、検索結果を自動で更新&スパムを除去してくれる」
というツールです。

実際に前回のハッカーズチャンプルーでツイートをストリーム表示するツールを使っていたのですが
RTが表示されたりスパムが何度も登場したりと使いづらい。

かといって公式Webクライアントはユーザーが更新のショートカットキー「.」を押さないといけず
うまく更新されない問題があったため、ちょっとうまく使えないなという問題がありました。
なので、今回はその反省を生かして
「公式Webクライアントを使ったまま、自動更新&スパム除去してしまおう」
と思ったのが作るきっかけです。

めんどくさかったこと

console.logが表示されない

さすがTwitter、色々対策をしているっぽく、console.logを何も実行しない関数でオーバーライドしているようでした。
おかげでデバッグ最初は苦労しましたが、どうやら以下のコードで初期化できるっぽい。

(function(){
  var f = document.body.appendChild(document.createElement('iframe'));
  f.style.display = 'none';
  window.console = f.contentWindow.console;
})();

これはいい知見。

ショートカットキーイベントの発火

今回この機能を作るのに、どうせなら公式のショートカットを使おうと思ったのですが
普通にKeyboardのkeydownイベントを飛ばしてもうまくショートカットが実行されない。

keyupやkeypressを試してもダメだったので、
chromeのdeveloper toolの機能であるEventListnersからイベントを引っ張り出し
その中から怪しいイベントを引っ張り出してきて片っ端から試すという力技に出ました。

Chromeのdeveloper toolのEventListenres

その方法を知るまでに時間がかかりましたが、なんとかそれっぽいイベントに辿り着き
そのイベントがどうやら発火しているらしいということはわかった

getEventListeners(document) // イベントリスナーの一覧表示
monitorEvents(window, ["イベント名"]) // イベントの発火を検知

イベントリスナー側からイベントオブジェクトにアクセスしてそいつを発火できればいいかな?
とか考えたけどそんなにうまくいかず...というか取得できないらしく

色々試行錯誤を重ねた結果、そのイベント名のイベントを発火させることができるコードを発見

var evt = document.createEvent("HTMLEvents");
evt.initEvent("イベント名", true, true);
document.dispatchEvent(evt);

これを見つけるのに3時間くらいかかった...

とはいえまぁうまくいったので、今回はこれでよしとします。

しかしフロントエンドは奥が深い...フロントエンドエンジニアの人、本当に尊敬します 🙏