Amazonの商品ページから、「人気のインディーズマンガ」を消したい（chrome）

5750 ワード
dom操作 ScriptAutoRunner JavaScript Amazon JavaScript テキストリンク

モチベーション

Amazonでマンガのページを見ていると、人気のインディーズマンガというカルーセルが出てくる。

↑こういうやつ。
作品を読んでいないので、内容をどうこう言うつもりはないんですが、一度も買ったことないし、無闇に肌色が多かったりして邪魔だなと思ったのだが・・・非表示にする方法が公式の設定から見つけられなかった。
と言うわけで、放置し続けるストレスより作業するストレスの方が少ないと思って、DOMから強制的に排除することにしました。

拡張機能の導入

今回はscriptAutoRunnerを使いました。
scriptAutoRunner
サイトにアクセスするたびに、自動でjavascriptを走らせてくれるお方です。

javascriptを準備する

「人気のインディーズマンガ」をタイトルにもつdivを取得し、その上の階層を削除するjavascriptを書きます。

追記他にも判定すべきエレメントがあるようなのでコードを書き直しました。いたちごっこは嫌だなぁ。


const deleteIndiesMangaCarousel = () => {
  const targetTitleList = [
    "人気のインディーズマンガ",
    "高評価のインディーズマンガ",
    "無料マンガ ランキング インディーズ",
    "この商品に関連するスポンサー",
    "Kindle Unlimited読み放題対象のマンガ",
    "無料マンガ ランキング インディーズ"
  ];
 const widgetHeadElementList = document.querySelectorAll(".dbs-widget-head,.a-carousel-heading,.dbs-widget-head-title,.unified_ad_labeling_title_margin,.sp_book_carousel_header");
 const targetTitleElements = Array.from(widgetHeadElementList).filter((element) => {
    const textContent = element.textContent;
    return targetTitleList.find((title) => {
      return textContent.includes(title);
    });
  });

if (!targetTitleElements) {
    return;
}
for(const element of targetTitleElements){
    const targetNode = element.parentNode;
     targetNode.remove();
    }
};

deleteIndiesMangaCarousel();

拡張機能を設定する

chromeのアドレスバーに
chrome://extensions/
と入力
scriptAutoRunnerが表示されるので、詳細をクリック。

拡張機能のオプションをクリック

GUIが表示されるので、先程のjavascriptをコピペ

プラグを繋ぐ

これで表示されなくなりました。カルーセルがあった位置でリロードすると一瞬チラッと見えたりしますが、まぁいいでしょう。
ここまで書いた時点で、「人気のインディーズマンガ」以外にも「高評価のインディーズマンガ」というタイトルが出てきてコード書き直しとSS撮り直しになったのが、ちょっとイラッとしました。

めでたしめでたし