開発者ツール/サイドバーの表示を検出する

はじめに

当サイトは、ブラウザでF12を押すとamazon欲しいものリストもしくは投げ銭ページに飛ばされるようになっています。
F12を押して表示されるのは「開発者ツール（DevTools）」というモノです。
他にはサイドバー・ブックマークなどを開いた時にもページが遷移します。

『開発者ツールなどが開かれた時、何かのイベントを起こしたい！』という方が対象の記事です。

やり方

まず、このjsファイルをダウンロードして下さい。
コードが表示される場合、右クリックして「リンク先を保存」でダウンロードできると思います。

index.js
Download

jsファイル編集後、自分のサイトにjsファイルを定義して完了です。

• Javascript
  3行目は「もし開発者ツールが開かれたら」という判定
  この中に行いたいイベントを記述する

  jQuery(function($){
  	window.addEventListener('devtoolschange', event => {
  	  if (event.detail.isOpen) {
  		window.location.replace('https://ko-fi.com/baikin');
  	  }
  	});
  });

• Headタグ（scriptを定義する場所）
  srcにjsファイルを指定

<script type="module" src="/content/index.js"></script>

さいごに

開発者ツールなど、一定の幅・高さを侵食するモノが開かれた場合に動作します。
開発者ツールが最初から開いていたりドッキングされていない場合は検出できません。
寛容さが必要です。

また、ローカル環境だとセキュリティの関係でCORSエラーが出て確認できません。
サーバ上で試して下さい。

devtools-detectgithub.comgithub.com