ホーム / 拡張機能 /

ブラウザバック禁止を無効化するアドオン

4/17/2023

Browser 拡張機能

t f B! P L

戻るボタンを押した際にポップアップが出たり、ブラウザバックが禁止になっているサイトをたまに見かけます。

個人的にそういった悪質なサイトがなくなるのが一番だとは思いますが、サイト自体をどうにかすることは出来ないので、無効化を無効化するAddonを作成しました。

戻るボタンを押しているのだから正しく前のサイトに戻りたいものです。

SNS上でもブラウザバック禁止を調べると、一定値困っている人がいるようでした。だいぶマイナーな悩みだとは思いますが...

前提

ブラウザバックを禁止する方法は何種類かあり、現時点ではこのアドオンは履歴操作とpopstateの検知を伴う方法にのみ対応しているため、 一部のサイトでは動作しない可能性があります。

アドオンのインストールと使い方

アドオンのインストール

Chromium系（Chrome, Edge, Opera, Vivaldi, Brave等）

Chromium系のブラウザでは、Chrome Web Storeからインストールすることができます。

Firefox系

Firefox系のブラウザでは、Mozillaの拡張機能ストアからインストールすることができます。

アドオンの使い方

今回はFirefoxを例に説明しますが、Chromium系のブラウザでも同じように使えます。

ブラウザメニューよりアドオンアイコンをクリックします。

例として、example.comとexample.netが登録されています。

この後の行にブロックしたいサイトのURLを入力して、適用ボタンを押します。

もしくはブロックしたいサイトを開いた状態で、このタブのドメインを追加を選択、ドメインが追加されたら、適用ボタンを押します。（適用ボタンを選択しないと内容が保存されません）

これでブロックしたいサイトが登録され、ブラウザバックの禁止が無効化されます。

技術的な話

そもそもどのようにブラウザバックを禁止しているか

ブラウザバックを禁止するにはいくつか方法があるのですが、メジャーなものとしては以下のようなものがあるのではないかと思います。

  • リダイレクトによるブロック
  • 履歴操作とpopstateの検知によるブロック

リダイレクトによるブロック

まず、別のサイトからの流入があったら、強制的に別のページか別のサイトにリダイレクトします。

そのページで戻るボタンを押して前のページに戻ると、リダイレクトにより、また元のページに戻されるわけです。

先にも説明した通り、今回のアドオンはこのタイプのサイトには効果がありません。このアドオンでは履歴操作を伴うサイトのみで効果を発揮します。

履歴操作とpopstateの検知によるブロック

この方法は、履歴操作を行い自サイト内で、戻るボタンが押されたときに発火するpopstateイベントを検知することで、ブラウザバックを禁止します。

具体的には以下のようなものです。

// 履歴追加
history.pushState({}, "", new URL(window.location));
// popstateイベントの検知
window.addEventListener('popstate', function (e) { 
    // ポップアップの表示、イベントの無効化などの処理
    alert('popstate');
});

どのようにブラウザバックの禁止を無効化するか

ブラウザバックの禁止を無効化するには、以下のような方法があります。

  • サイト側のpopstateのaddEventListenerよりも先に登録して戻るボタンを強制発火させる
  • ブラウザバックの禁止を行う処理をオーバーライドして無効化する

戻るボタンを強制発火させる

サイトがaddEventListenerを行う前にアドオン側のスクリプトによりaddEventListenerを登録し、先にhistory.back()を発動させしまおうというゴリ押し戦法です。

具体的には以下のようなものです。（必ずサイト側のスクリプトより先に実行させる必要があります。）

window.addEventListener("popstate", function (e) {
    history.back();
}, false);

ブラウザバックの禁止を行う処理をオーバーライドして無効化する

pushStateとpopstateのaddEventListenerをオーバーライドして、そもそもイベントの処理や登録ができないようにします。

具体的には以下のようなものです。

window.history.pushState = function() {};

const originalAddEventListener = EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener = function (type, listener, options) {
    if (type !== 'popstate') {
        originalAddEventListener.call(this, type, listener, options);
    }
};

このアドオンのコアとなる部分は実はこれだけの単純なものです。

まとめ

というわけで、ブラウザバックの禁止を無効化するアドオンが完成しました。

そのうちリダイレクトによるブラウザバックの禁止を行うサイトにも対応させたいと思います。

ブラウザやサイトでこんな機能があったらいいなと思う機能があれば、下部のお問い合わせよりご連絡ください。 （私自身の技術も含め）技術的に可能そうであれば、作成してみるかもしれません。

それでは、ここまでお読みいただきありがとうございました。