JavaScriptコードを挿入してWebサイトを自動的に操作する方法

インターネットの開発者およびユーザーとして、サブスクリプション要求からペイウォール、広告から通知など、多くのポップアップを表示するWebサイトに出くわすことがよくあります。

多くの場合、私たちはそれらのWebサイトをあらゆる種類の目的で毎日使用しており、それらのポップアップを何度も見ると古くなります。

開発者は、コンソールに移動し、CSSまたはJavaScriptを追加または変更して、Webサイトのドキュメントオブジェクトモデル(DOM)を操作するセレクターを見つけることで、これらを回避できます。

しかし今では、Google Chromeとその拡張ストアのおかげで、誰でも任意のWebサイトに自動的にコードを挿入できます。この小さなガイドでは、プロセスを段階的に説明します。

1.コードを挿入するための拡張機能のインストール

以下は、GoogleChromeを使用している場合にのみ適用されます。Webサイト用の拡張カスタムJavaScriptをインストールします。この小さな拡張機能を使用すると、任意のWebサイトでJavaScriptを自動的に実行でき、Webブラウザーでの今後のアクセスに備えてコードを保存できます。

まず、頻繁に使用する迷惑なポップアップが表示されたWebサイトにアクセスします。このチュートリアルでは、ワシントンポストのWebサイトを使用しています。

2.DOM要素の検索とインジェクションコードの作成

F12キーを押してChromeデベロッパーツールを開き、ポップアップで要素を特定します。

この例ではiframe、IDを持つ要素にwallIframeは、背面に色あせた背景を持つポップアップが含まれています。

次に、小さなJavaScriptスニペットを使用してカスタムCSSを追加し、ポップアップを非表示にできるかどうかを確認します。

/* DOM Manipulation * If you want to update / add single style in DOM Element style attribute you can use this function: * inject javascript after page reloads. */ function setCssStyle(el, style, value) { var result = el.style.cssText.match(new RegExp("(?:[;\\s]|^)(" + style.replace("-", "\\-") + "\\s*:(.*?)(;|$))")), idx; if (result) { idx = result.index + result[0].indexOf(result[1]); el.style.cssText = el.style.cssText.substring(0, idx) + style + ": " + value + ";" + el.style.cssText.substring(idx + result[1].length); } else { el.style.cssText += " " + style + ": " + value + ";"; } } var element = document.getElementById("wallIframe"); setCssStyle(element, "display","none !important");

ご覧のとおり、上記のコードでは、要素wallIframeを強調表示し、インラインCSSを追加して非表示にしています。

3.インジェクションコードのテスト

Chrome開発者のコ​​ンソールでコードをテストして、機能することを確認します。

ワシントンポストのウェブサイトと、Chromeの開発者ツールでもあるアンドリューヤンについて言及している記事を示すスクリーンショット。

上記のように、コードは機能します。

次に、それを拡張機能、Webサイト用のカスタムJavaScriptに追加し、コードが将来の訪問で機能するかどうかをテストします。追加するには、アドレスバーの拡張機能アイコンを左クリックしてカスタムスニペットを追加し、[保存]をクリックします。

追加したコードをテストするために、ページがすぐに再読み込みされます。

ワシントンポストのウェブサイトと、Chromeの開発者ツールでもあるアンドリューヤンについて言及している記事を示すスクリーンショット。

4.インジェクションコードが機能しませんでした。

テストした後、コンソールでテストしたときのようにiframeが消えることはありませんでした。理由の1つは、ページの読み込みからX秒後にiframeが読み込まれることである可能性があります。

ネットワークログを調べて、それが当てはまるかどうかを確認できます。ただし、時間を節約するために、元のスニペットにタイムアウト関数を追加して、それが役立つかどうかを確認します。

setTimeout( function() { function setCssStyle(el, style, value) { var result = el.style.cssText.match(new RegExp("(?:[;\\s]|^)(" + style.replace("-", "\\-") + "\\s*:(.*?)(;|$))")), idx; if (result) { idx = result.index + result[0].indexOf(result[1]); el.style.cssText = el.style.cssText.substring(0, idx) + style + ": " + value + ";" + el.style.cssText.substring(idx + result[1].length); } else { el.style.cssText += " " + style + ": " + value + ";"; } } var element = document.getElementById("wallIframe"); setCssStyle(element, "display", "none !important"); }, 10000);

それが実行される前に、今のコードでは、10秒待ち、そしてほらそれが完璧に動作します

ページが完全に読み込まれるのを待つイベントリスナーを追加することもできます。

5.最終的な考え

例えば:

document.addEventListener("DOMContentLoaded", function() { // Your function goes here }

ただし、X秒後にポップアップコードを追加すると、上記の関数は機能しないため、タイムアウト関数を使用することをお勧めします。

この拡張機能を使用して、広告のブロック、ポップアップのブロック、Webサイトの標準フォントの増加、応答性の向上、外観の更新など、他の多くのクールなスニペットを追加することもできます。JavaScriptスニペットが追加されると、それらのWebサイトへの今後のアクセスで常に実行されます。  

この記事の準備のために編集上のフィードバックをしてくれたfreeCodeCampのAbbeyRennemeyerに特に感謝します。

免責事項:この記事に記載されている見解は著者の見解であり、カーネギーメロン大学または著者に関連する他の企業(直接的または間接的)の見解を表すものではありません。これらの執筆は最終製品を意図したものではなく、議論と改善のきっかけとなるとともに、現在の考え方を反映したものです。

私の個人的なウェブサイト、Medium、Instagram、Twitter、Facebook、LinkedIn、または私のSEO会社を通じて私を見つけることができます。