Amazonの検索結果の星表示を以前のっぽく戻すchrome拡張機能を作った by ChatGPT

amazonの★表示のUI変わりましたね。
なんか直感的にわかりにくいので以前のほうが良かった...

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244385/cf605003-9753-0151-0199-c6a7e348583b.png)

というわけで、以前の表示っぽく表示するchrome拡張機能を作ってみました。
こんな感じになります

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244385/8b0332bc-6f07-1337-4235-1221d94afd91.png)


コーディングには全面的にChatGPTを使いました。会話履歴はこんな感じ。
https://chat.openai.com/share/d09beb87-451e-430c-8d03-aa294969f46d

表示をいじるくらいの簡単な拡張機能であれば丸々コード投げて修正してもらえるので楽ですね...

以下メインのソースコード

```content.js
// コールバック関数
var callback = function(mutationsList, observer) {
    // 監視を一時停止
    observer.disconnect();
  
    for (var mutation of mutationsList) {
      if (mutation.type === 'childList') {
        updateStars(); // DOMが変更された際に、星の表示を更新
      }
    }
  
    // 監視を再開
    observer.observe(targetNode, config);
  };


// この関数に、星の表示を変更するコードを記述します。
function updateStars() {
    // a-row a-size-small クラスを取得
var elements = document.getElementsByClassName("a-row a-size-small");
var rateList = [];

//各エレメントのテキストを出力
for (var i = 0; i < elements.length; i++) {
    var rateText = elements[i].textContent;

    // 4.85つ星のうち4.8   94% 星4つ以上 のような形でテキストが取得できるので、4.8の部分を取得してリストに格納する
    var rate = rateText.match(/\d\.\d/);
    var rateNum = parseFloat(rate);
    rateList.push(rateNum);
}


//それぞれの現行の星表示を非表示にし、新たに作成した星表示を表示する
for (var i = 0; i < elements.length; i++) {
     // すでに星が追加されている場合はスキップ
     if (elements[i].getAttribute("data-stars-added") === "true") continue;

    elements[i].style.display = "none";
    //星表示を作成
    var starContainer = document.createElement("div");
    starContainer.style.display = "flex"; 

    // 評価の値に応じてstar.pngの数をかえ、表示する
    var rate = rateList[i];
    var fullStars = Math.floor(rate);
    var partialStar = rate - fullStars;

    // 全部の星を追加
    for (var j = 0; j < fullStars; j++) {
        var star = document.createElement("img");
        star.src = chrome.runtime.getURL("star.png");
        star.style.width = "20px"; // 幅を設定
        star.style.height = "20px"; // 高さを設定
        starContainer.appendChild(star);
    }

// 部分的な星を追加
if (partialStar > 0) {
    var partialStarDiv = document.createElement("div");
    partialStarDiv.style.width = "20px"; // 星の全幅を設定
    partialStarDiv.style.height = "20px"; // 高さを設定
    partialStarDiv.style.overflow = "hidden"; // 余分な部分を非表示にする

    var partialStarImg = document.createElement("img");
    partialStarImg.src = chrome.runtime.getURL("star.png"); // ここでpartialStarImgのsrcを設定
    partialStarImg.style.width = "20px"; // 星画像の全幅を設定
    partialStarImg.style.height = "20px"; // 高さを設定
    partialStarImg.style.position = "absolute"; // 位置を絶対的に設定
    partialStarImg.style.clipPath = "inset(0 " + (20 - partialStar * 20) + "px 0 0)"; // 星の右側をクリップ

    partialStarDiv.appendChild(partialStarImg);
    starContainer.appendChild(partialStarDiv);
}

 // スコアを文字で表記
 var scoreText = document.createElement("span");
 scoreText.textContent = " " + rate.toFixed(1); // スコアをテキストとして追加
 scoreText.style.lineHeight = "20px"; // 星の画像の高さと同じに設定して中央に配置
 scoreText.style.marginLeft = "5px"; // 左側に余白を開ける
 starContainer.appendChild(scoreText);

 // 星が追加されたことをマーク
 elements[i].setAttribute("data-stars-added", "true");
   

elements[i].parentNode.appendChild(starContainer);
}
  }
  
  // 変更を監視する対象の要素を選択
  var targetNode = document.body; // 例としてbody要素を選択
  
  // 監視する変更のオプション
  var config = { childList: true, subtree: true };
  
  
  
  // MutationObserverを作成
  var observer = new MutationObserver(callback);
  
  // 監視を開始
  observer.observe(targetNode, config);
  
  // 初回の実行
  updateStars();
 


```

一応がChromestoreには提出したのですが審査に時間がかかるので、使いたい方はこちらからどうぞ。

chrome拡張機能の入れ方は適宜ググってください

https://83.gigafile.nu/1019-7cd359e1b63251f61ca93a9b6fb87ac1


---追記
審査通りました

https://chrome.google.com/webstore/detail/amazon%E6%A4%9C%E7%B4%A2%E7%94%BB%E9%9D%A2%E3%81%AE%E6%98%9F%E8%A1%A8%E7%A4%BA%E3%82%92%E6%88%BB%E3%81%99%E3%82%84%E3%81%A4/jhfcclhjkmhodflfgnmjeeenejgfjhkj?hl=ja