Amazonアフィリンクチェッカー【クソChrome拡張】

この記事は[クソアプリ Advent Calendar 2023](https://qiita.com/advent-calendar/2023/kuso-app) 24日目の記事です。

# はじめに
皆さんは[Amazonアソシエイト・プログラム](https://affiliate.amazon.co.jp/welcome/main.html)を知っていますか？

ブログやSNSなどに、Amazonへのリンクを貼って、ユーザーがそれをクリックしたあと商品を買うと貼った人に幾許かの紹介料が入るというものです。<font color="Red">要するにアフィリエイト</font>です。

これ、まあ別にユーザー側が払う金額に影響はないし、本来は誰も損しない仕組みなのですが一つ疑問が浮かびます。

それは<font color="Red">**リンクを貼った人は本当にそれをいい商品だと思って紹介しているのか?**</font>という疑問です。

Amazonのリンクがアフィリンクなのかそうでないのかで、おすすめの商品を紹介された時の信頼度は天と地の差だと思いませんか？

ですが現状、URLをしっかり見ないとアフィリンクかはわからないのでそれを簡単に判別できるようにしたろうというのが今回紹介する拡張機能です。x

**と、いうのは建前で、よくわからんうちに金稼ぎの対象にされるのがなんか納得いかない私個人のひねくれた思想を具現化したクソ拡張機能です。**

では続きをどうぞ！

# 今回作った拡張機能の紹介

https://chrome.google.com/webstore/detail/amazon%E3%82%A2%E3%83%95%E3%82%A3%E3%83%AA%E3%83%B3%E3%82%AF%E3%83%81%E3%82%A7%E3%83%83%E3%82%AB%E3%83%BCamazon-a/pgddgcfboiaijabgiakcfndggjnemlpj

![MzsZny9SD1K4B901703314047_1703314254.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778030/45828e26-0fdb-58d3-ff68-31d7f43a4bf9.png)

画像のように、アフィリンクと思われるaタグおよびimgタグの上に注意書きを表示します。
また、短縮urlの場合、
![hpWWSWMXzpkJ1Qx1703314379_1703314418.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778030/a7900f5d-6a1e-93bb-9313-84bd2456be91.png)
　このように確定ではないにしろ注意してねという旨の注意書きが表示されます。
 わざわざ短縮するのはほぼアフィリンクを隠したい時だけだと思うので...

 # インストール方法
 ほかの拡張機能と同じように、ストアからインストールしてください、と言いたかったのですが、突貫工事かつ思いつきで今日(2023/12/23)作ったため、
 
 **拡張機能を公開するには審査があるということを知りませんでした**

~~しかも年末だし審査完了するの来年になりそうなので、公開され次第リンクをこの記事に貼っときます。(誠にごめんなさい)~~
 
2023/12/26追記

無事公開されていたのでリンクを追記します！
 
 https://chrome.google.com/webstore/detail/amazon%E3%82%A2%E3%83%95%E3%82%A3%E3%83%AA%E3%83%B3%E3%82%AF%E3%83%81%E3%82%A7%E3%83%83%E3%82%AB%E3%83%BCamazon-a/pgddgcfboiaijabgiakcfndggjnemlpj

今すぐ使いたいよ！って奇特な方のためにここからはローカル?で動く、今回のAmazonアフィリンクチェッカーの作り方を解説します。

:::note warn

注意として、アフィリエイトリンクを完全に捌ける訳ではありません。
完璧な見分け方は、**Amazonに遷移した時、URLに`tag={文字列}-22`があるかどうか**です。
あったらアフィリエイトリンクです。

:::


# 試したい方向け、Amazonアフィリンクチェッカーの作り方
Mac環境で、VSCodeおよびターミナルを使用します。
異なる環境の方は適宜読み替えて進めてください。

1. ディレクトリを作成
```zsh:terminal
// ディレクトリを作成
$ mkdir amazon_affiliate_checker_test

// 作ったディレクトリに移動
$ cd amazon_affiliate_checker_test

// JavaScript記述用のファイルを作成
$ :>content.js

// 拡張機能のもろもろを設定する用のJsonファイルを作成
$ :>manifest.json

// カレントディレクトリをVSCodeで開く
$ code .
```
順に実行してください。
`code`コマンドが動かない場合は以下を参考にしてください。

https://qiita.com/P-man_Brown/items/b18f31e3bb98b08ff31b

2. ファイルの中身を記述
```json:manifest.json
{
  "manifest_version": 3,
  "name": "Amazonアフィリンクチェッカー(Test版)",
  "version": "1.0",
  "description": "ページ内にAmazonのアフィリンクがあったとき注意書きが出ます",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}
```
```javascript:content.js
const amazonUrlRegex = /https:\/\/www\.amazon\.co\.jp.*tag=.*-22.*/;
const shorteningAmazonUrlRegex = /https:\/\/amzn\.to\/.*$/;

function showAffiliateUrlMessage(element) {
  const messageDiv = document.createElement("div");
  messageDiv.style.padding = "3px";
  messageDiv.textContent = "↓注意！Amazonアフィリエイトリンクです！↓";
  messageDiv.style.color = "red";
  messageDiv.style.fontWeight = "bold";
  element.before(messageDiv);
}

function showAffiliateShorteningUrlMessage(element) {
  const messageDiv = document.createElement("div");
  messageDiv.style.padding = "3px";
  messageDiv.textContent =
    "↓注意！Amazonアフィリエイトリンクかもです！↓\n遷移先urlに`tag={文字列}-22`が含まれている場合、アフィリンクです。";
  messageDiv.style.color = "red";
  messageDiv.style.fontWeight = "bold";

  element.before(messageDiv);
}

function checkElement(element) {
    if (amazonUrlRegex.test(element.href)) {
      showAffiliateUrlMessage(element);
    } else if (shorteningAmazonUrlRegex.test(element.href)) {
      showAffiliateShorteningUrlMessage(element);
    }
}

document.querySelectorAll("a").forEach(checkElement);

```

コードの意味については、chatGPTにでも投げて解説してもらってください。(丸投げ)

ページ内に存在するaタグを全てif文にかけて、アフィリンクっぽかったらその要素の上に`messageDiv`を挿入しているだけです。

3. 拡張機能として使えるようにする

Chromeのアドレスバーに`chrome://extensions/`と打ち込んでください。
そうするとページ右上に`デベロッパーモード`と書かれたトグルボタンが出てくるので押します。
![スクリーンショット 2023-12-23 16.32.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778030/85c6c811-9407-63c7-eb1d-897be313a11b.png)
`パッケージ化されていない拡張機能を読み込む`を押し、先ほど作った`/amazon_affiliate_checker`ディレクトリを指定します。

![スクリーンショット 2023-12-23 16.33.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778030/b22d5743-c8ac-ae32-5dff-ae80a2a8602b.png)

画像のように表示されればOKです！

`amazon おすすめ 2023`とでも検索して、出てきたページをみてみましょう。
メッセージが表示されていれば正常に動いています。意外とQiitaでもアフィリンク、存在します。

# おわりに
ここまでお読みいただき、ありがとうございました！
拡張機能は意外と簡単につくれるものなんですね。なにか思いついたらまた作ってみようかと思います。