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

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

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

コーディングには全面的に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拡張機能の入れ方は適宜ググってください

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