radikoの「ライブ」風船がわざわざ跳ねてイラつかせてくるのでChrome拡張作って黙らせた

そもそも、なぜ不要なアニメーション処理を追加してリスナーの集中力を妨げるのでしょうね？

不思議でしょうがないのですけど、radiko.jpに問い合わせても直す気がまったくない様子でして。
幸い、Chrome拡張作ればなんとかなる＝自分の手の届く範囲だったので、手を動かしてみました。
おかげで、今は平和です。

拡張のページ: radiko.jp Hide Popping Balloon

はじめてのChrome拡張作り

についてのエントリにしようと当初は思っていたものの、Chrome 拡張 作るでググればQiitaの良記事がいくつもヒットするので要らないかなと。

大事なことは
・自分専用の拡張作るならタダでなんぼでも作れる
・Chrome Web Storeで公開するなら、公開用アカウント登録料で$5かかる
です。

やってること

動的に表示される風船要素を監視・抑え込むためにMutationObserverを使っています。自前でpollingするよりも簡潔・軽量です。

(function () {
  const playerDetailObserver = function (mutationsList) {
    const tooltip = document.querySelector('#player-detail .tooltip');
    if (tooltip) tooltip.remove();
  };
  const observer = new MutationObserver(playerDetailObserver);
  observer.observe(document.querySelector('#player-detail'), { childList: true });
})();

ソースリポジトリ: https://github.com/reedom/radiko-hide-popping-balloon

おわりに

だめなUX/UIサイトも自分の手でなんとかできる、というのが判ると夢は広がります。