Amazonスポンサー商品を非表示にするChrome（またはEdge）の拡張機能を作った

まず、拡張機能を使わずスポンサー商品を簡単に消す方法を見つけたので紹介しておく。

<b>スポンサー商品の簡単な消し方</b>
<b><font color="brown">Amazon の設定メニューで言語を「日本語」から「English」に切り替えると、Kindleコミックの検索結果ではスポンサー商品が表示されない。</font></b>

以下は拡張機能について

<b>機能</b>
Kindle本と紙の本の検索結果（条件判定を修正すれば他の商品分野にも適用可能）のスポンサー商品を非表示にする。

```json:manifest.json
{
  "name": "Amazon Sponsored Products Remover",
  "description": "Remove sponsored products from search results.",
  "version": "1.0",
  "manifest_version": 3,
  "content_scripts": [
    {
      "matches": ["https://www.amazon.co.jp/s*"],
      "js": ["content_script.js"]
    }
  ]
}
```

```javascript:content_script.js
// (注意) このコードは UTF-8 で保存すること。BOMの有無は問わない
// 履歴
// 2021.11.03 スポンサー商品の判定条件修正

(function () {

function hideElement(elem) {

	elem.style.display = 'none';

	//上の文をコメントアウトし、以下をアクティブにすれば、非表示対象を目視できる
	//elem.style['background-color'] = 'darkkhaki';

	//半透明にする手もある
	//elem.style.opacity = '0.4';
}

function main() {
	if(shouldHide()) {
		startHiding();
	}
}

//ページが非表示処理の対象かどうかをboolean値で返す
//   処理対象はKindle本と紙の本の検索結果のページとした
function shouldHide() {

	//画面上部にあるサブメニューを取得して、商品種別を判断する
	const elems = document.querySelectorAll('div[id="nav-subnav"][data-category]');
	for(const elem of elems) {
		switch(elem.dataset.category) {
			case 'digital-text':  //Kindle
			case 'books':         //紙の本
				return true;
		}
	}
	return false;

	// 参考
	// 商品種別をURLの解析で判定するのは難しい
	// 以下のようなURLが随時追加される
	//
	// 【最大50%OFF】Kindle本秋の読書キャンペーン
	// https://www.amazon.co.jp/s?rh=n%3A10387394051&s=featured-rank
	//
	// マンガ大賞2021（紙の本）
	// https://www.amazon.co.jp/s?rh=n%3A3418607051&s=featured-rank
}

//非表示処理の初回起動とページ更新時処理の登録
function startHiding() {

	//検索結果のDIVエレメントを取得
	const searchResult = document.querySelector('div.s-main-slot');
	if(searchResult == null) {
		return;
	}

	//ページロード時の非表示処理
	const elems = searchResult.querySelectorAll(':scope > div[data-asin]');
	for(const elem of elems) {
		tryHideElement(elem);
	}

	//検索結果の下部のページ移動ボタンを押した場合、このスクリプトは新たに起動してくれない
	//そこで MutationObserver を使ってページの変更時に処理するようにする

	//オブザーバインスタンスを作成
	const observer = new MutationObserver(
		//コールバック関数
		(mutations) => {
			for(const m of mutations){
				for(const node of m.addedNodes) {
					tryHideElement(node);
				}
			}
		});

	//変更監視スタート
	observer.observe(searchResult, {childList: true, subtree: false});
}

const rx_sponsored = />(?:スポンサー|Sponsored)<\/span>/;

function tryHideElement(elem) {
	if(elem != null 
	&& elem.tagName === 'DIV'
	&& elem.dataset.asin !== '') {

		if(rx_sponsored.test(elem.innerHTML)) {
			hideElement(elem);
		}
		// (参考) 以前は div[data-component-type="sp-sponsored-result"] の存在確認で
		// スポンサー商品を判別していたが、これを持たないスポンサー商品があったので修正した。
	}
}

main();

})();
```


<b>インストール方法</b>

<b>1. ファイルの保存</b>
上のふたつのコードをコピーして自分のローカル端末に保存する。
ファイル名は manifest.json, content_script.js にして、ファイルのエンコードはUTF-8で保存する（BOM付き、なし、どちらも可）。エンコードは、だいたいのどのエディタも「名前を付けて保存」で指定できる。
ふたつのファイルは同じフォルダに格納する。フォルダ名は任意でOK。

<b>2. ブラウザにインストールする</b>
Chromeなら
(1) 画面右上の隅のジグソーパズルのピースをクリックして「拡張機能の管理」を開く。
 　 （または、右上の隅の ［  ⁝  ］を押し「その他のツール」→「拡張機能」を開く）
(2) 拡張機能の設定画面が開かれたら、右上の「デベロッパーモード」をオンにする。
(3)「パッケージ化されていない拡張機能を読み込む」をクリックする。
(4) スクリプトが格納されたフォルダーを選択する。

Microsoft Edgeなら
(1) 画面右上の隅の［･･･］を押し「拡張機能」を開く。
(2) 拡張機能の設定画面が開かれたら、左下の「開発者モード」をオンにする。
(3)「展開して読み込み」をクリックする。
(4) スクリプトが格納されたフォルダーを選択する。

Firefoxなら
以下の手順で一時的にインストールできる。
パッケージ化していないので永続的なインストールは不可。

(1) 画面右上の隅の［≡］を押し「アドオンとテーマ」を開く。
(2) アドオンマネージャ―が開かれたら、歯車ボタンを押し「アドオンをデバッグ」をクリックする。
(3)「一時的なアドオンを読み込む...」をクリックする。
(4) ファイルダイアログで manifest.json を選択する。
※「Unsupported manifest version: 3」のエラーが出るなら、上の manifest.json の "manifest_version" を 2 に書き換える。

この拡張機能はスポンサー商品を非表示にするだけだが、コミックの単話や分冊、BLなど興味のないものを非表示にしたかったので、いろいろとリッチな機能を持つものを作成した。後日紹介する。