Amazonサイトの広告(スポンサー)を非表示にしてみよう

はじめに

Amazonのスポンサー表示ってウザいですよね。chrome拡張機能で非表示にしようという話です。

すでに広告ブロッカーはchromeウェブストアに行けばたくさんあります。けど、よく分からない人が作った拡張機能は怖いです。なので自分で作ろうということになりました。ちょー簡単実装なのでコピペで使えます。

とりあえず

下の左画像がオリジナルのスポンサー箇所をピンクにしてみました。右画像が今回作った拡張機能の結果です。
「腕時計 電波」で検索しているのに目覚まし時計が先頭のスポンサー。ひどい。アマゾンさん、それはないでしょ。

とりあえずピンクにしてどんな所がスポンサーなのかを確認してから使用すると良いです。ピンクのままで使用しても良いと思います。

chrome拡張機能

「chrome拡張機能」についての詳細は省きますが、テキストエディタさえあれば誰でも作れます。ウェブストアに登録しなくても自作ローカルのモノを使えます。

ファイル

今回用意するファイルは以下の３つ。
manifest.json ・・・ マニフェストファイル（拡張機能の定義ファイル）
content_script.js ・・・ プログラム本体（javascript）
jquery-3.7.1.min.js ・・・ jQueryライブラリ

マニフェストファイル

必要最低限のアクセス権。Amazonサイトだけ動くようにする。

manifest.json

{
    "manifest_version": 3,
    "name": "myadblock",
    "description": "",
    "version": "1.0",
    "content_scripts": [{
        "matches": [
            "https://www.amazon.co.jp/*"
        ],
        "js": ["jquery-3.7.1.min.js", "content_script.js"]
      }]
}

プログラム本体

DOM監視をして、jQueryのセレクタで非表示するだけです。スポンサーDOMが色々あってDOM検索のセレクタが沢山必要になってしまいました。すべてのスポンサーDOMを網羅できてはいません。

下方の none()関数の中でピンク表示にできます。

content_script.js

$(function() {
  // amazon
  if(location.host == 'www.amazon.co.jp') {

    let selector_array = [
      '.AdHolder',
      '[data-feature-name="heroQuickPromo"]',
      '[cel_widget_id="MultiBrandCreativeDesktopCombined"]',
      '[data-component-type="s-ads-metrics"]',
      '[data-feature-name="sims-themis-sponsored-products-2"]',
      '#ape_Detail_ad-endcap-1_Glance_placement',
      '#cr-ADPlaceholder',
      '#ape_Detail_dp-ads-center-promo_Desktop_placement',
      '#amsDetailRight_feature_div',
      '#px-profile_feature_div',
      '.acswidget'
    ];

    let selector_parents_array = [
      ['.s-widget-sponsored-label-text','.s-result-item'],
      ['.puis-sponsored-label-text','.s-result-item'],
      ['[data-form-header-text="フィードバックを残す"]','.s-result-item'],
      ['[aria-label="スポンサー広告にフィードバックを残す"]','#similarities_feature_div'],
      ['[aria-label="スポンサー広告にフィードバックを残す"]','#discovery-and-inspiration_feature_div'],
      ['[aria-label="スポンサー広告にフィードバックを残す"]','.apb-default-slot'],
      ['[aria-label="スポンサー広告にフィードバックを残す"]','#percolate-ui-ilm_div'],
      ['.sp_detail_sponsored_label','#similarities_feature_div'],
      ['.sp_desktop_sponsored_label','#sp_detail_thematic-cfv'],
      ['.sp_desktop_sponsored_label','#similarities_feature_div'],
      ['.s-ad-feedback-link','.s-widget-container']
    ];

    // 監視ターゲットの取得
    let target = $('body')[0];
    if(target) {
      // オブザーバーの作成
      let observer = new MutationObserver(records => {

       // DOM検索
        for (let i = 0; i < selector_array.length; i++) {
          // 非表示
          none($(selector_array[i]));
        }
        for (let i = 0; i < selector_parents_array.length; i++) {
          // 非表示
          none($(selector_parents_array[i][0]).parents(selector_parents_array[i][1]));
        }
      });

      // 監視の開始
      observer.observe(target, {
        characterData: true,
        attributes: true,
        childList: true,
        subtree: true
      });
    }

    function none($selector) {
      //$selector.css('background-color', 'lightpink'); // これを有効して↓をコメントアウトするとピンク表示になる
      $selector.css('display', 'none');
    }
  }
});

jQueryライブラリ

jQueryを使いますので、以下よりダウンロード願います。

拡張機能の読み込み

1. myadblockフォルダを作成して、上記の３つのファイルを置く
2. chromeで chrome://extensions/ を開く
3. デベロッパーモードをONにする
4. パッケージ化されていない拡張機能を読み込むをクリック
5. 作成した myadblockフォルダを選択

（詳しくは https://support.google.com/chrome/a/answer/2714278 参照）

chrome://extensions/

上記のように、「すべての拡張機能」に「myadblock」がエラーなく表示されていれば完了。あとはAmazonサイトを開くだけ。サイトを開いて１秒ぐらいのタイムラグがありますが、あまり気にならないと思います。

最後に

あくまでもセレクタにヒットしたものだけなので、すべては網羅できていません。各自でメンテナンスしてください