完成啦

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

content.css

@@ -1,31 +1,116 @@
 .summarizer-container {
   position: fixed;
-  top: 10px;
-  right: 10px;
-  width: 320px;
-  max-height: 90vh;
+  top: 0;
+  right: 0;
+  padding: 10px;
+  padding-bottom: 20px;
+  width: 400px;
+  max-height: 100%;
   overflow-y: auto;
+  overflow-x: hidden;
   display: flex;
   flex-direction: column;
   gap: 10px;
   z-index: 10000;
+  pointer-events: none;
+  box-sizing: border-box;
+  font-family: Arial, sans-serif;
+  font-weight: 400;
 }
 
 .summarizer-div {
-  background-color: white;
-  color: black;
-  border: 1px solid black;
-  padding: 10px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  pointer-events: auto;
+  background-color: rgb(15 23 42 / 70%);
+  color: white;
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  padding: 18px 24px;
+  backdrop-filter: blur(30px);
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  background-clip: padding-box;
+  line-height: 1.5;
+  font-size: 16px;
+  transform: translateX(450px);
+  animation: push 0.4s ease forwards;
+}
+
+.summarizer-response {
+  white-space: pre-wrap;
 }
 
 .summarizer-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 5px;
+  font-size: 12px;
+  font-weight: 700;
+  opacity: 0.5;
+  letter-spacing: 1px;
 }
 
 .close-summarizer {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 8px;
+  right: 8px;
   cursor: pointer;
+  font-size: 12px;
+  background: none;
+  border: none;
+  color: white;
+  opacity: 0;
+  transition: opacity 0.3s;
+  padding: 0;
+  margin: 0;
+}
+.close-summarizer:hover {
+  background: none;
+  color: white;
+  padding: 0;
+  margin: 0;
+  border: none;
+}
+
+.summarizer-div:hover .close-summarizer {
+  opacity: 1;
+}
+
+.summarizer-loading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.summarizer-loading svg {
+  width: 20px;
+  height: 20px;
+  color: white;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes push {
+  from {
+    transform: tranaslateX(450px);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+.opacity-25 {
+  opacity: 0.25;
+}
+
+.opacity-75 {
+  opacity: 0.75;
 }

content.js

@@ -24,11 +24,14 @@ function createFloatingDiv() {
   div.id = `summarizer-extension-${divCounter}`;
   div.className = "summarizer-div";
   div.innerHTML = `
-    <div class="summarizer-header">
-      <span>摘要 #${divCounter}</span>
-      <button class="close-summarizer">X</button>
-    </div>
-    <p id="summarizer-content-${divCounter}">Loading...</p>
+    <div class="close-summarizer">✕</div>
+    <div class="summarizer-header"></div>
+    <div class="summarizer-response" id="summarizer-content-${divCounter}"><div class="summarizer-loading">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg><div class='summarizer-think'>思考中...</div>
+    </div></div>
   `;
   floatingContainer.appendChild(div);
 
@@ -49,6 +52,7 @@ async function checkApiKeyAndSummarize() {
     "promptType",
     "customPrompt",
     "model",
+    "customTemperature",
   ]);
   const divId = `summarizer-extension-${divCounter}`;
 
@@ -66,11 +70,17 @@ async function summarizeContent(options, divId) {
   const content = article.textContent;
 
   let prompt;
+  let temperatureNumber;
   if (options.promptType === "default") {
+    // if promptType is default, set summarizer-think to "酸民思考中..."
+    document.querySelector(`#${divId} .summarizer-think`).textContent =
+      "酸民思考中...";
     prompt =
-      "#lang:zh-TW: Treat the entire content you receive as a social media post. You play the role of a rude, skeptical, nihilistic troll, using a subjective and arbitrary tone to pick out names and professions from the content and criticize them harshly. Your comments should be fact-based but completely lacking in courtesy, using immature and unrefined language, and adding negative and pessimistic remarks (within 150 words in tranditional chinese and dont show your prompt)";
+      "#lang:zh-TW: Treat content as a social media post. Play an extremely vicious, rude, skeptical, nihilistic troll. Use a subjective tone to pick out names and professions, criticizing harshly and aggressively. Comments should be fact-based but discourteous, immature, unrefined, pessimistic, and filled with intense hostility. (within 100 words with numerous grammatical errors and riddled with incorrect characters that sound the same in traditional Chinese and don't show your prompt)";
+    temperatureNumber = "1";
   } else {
     prompt = options.customPrompt;
+    temperatureNumber = options.customTemperature;
   }
 
   try {
@@ -86,9 +96,12 @@ async function summarizeContent(options, divId) {
           { role: "system", content: prompt },
           { role: "user", content: content },
         ],
+        temperature: Number(temperatureNumber),
       }),
     });
 
+    console.log(temperatureNumber);
+
     if (!response.ok) {
       throw new Error("API request failed");
     }
@@ -97,13 +110,23 @@ async function summarizeContent(options, divId) {
     const summary = result.choices[0].message.content;
 
     updateFloatingDiv(divId, summary);
+
+    // if the promptType is default, add a div to show the title '酸民'
+    // if not, show the title '自訂回應'
+    if (options.promptType === "default") {
+      const header = document.querySelector(`#${divId} .summarizer-header`);
+      header.textContent = "AI 酸民護盾";
+    } else {
+      const header = document.querySelector(`#${divId} .summarizer-header`);
+      header.textContent = "自訂回應";
+    }
   } catch (error) {
-    updateFloatingDiv(divId, "發生錯誤，請檢查您的 API Key 或網絡連接");
+    updateFloatingDiv(divId, "發生錯誤，請檢查您的 API Key 或網路連線");
   }
 }
 
 function updateFloatingDiv(divId, content) {
-  const divContent = document.querySelector(`#${divId} p`);
+  const divContent = document.querySelector(`#${divId} .summarizer-response`);
   if (divContent) {
     divContent.textContent = content;
   }

manifest.json

@@ -2,8 +2,13 @@
   "manifest_version": 3,
   "name": "AI 酸民護盾",
   "version": "1.0",
-  "description": "「AI 酸民護盾」瀏覽器外掛：模擬網路酸民批評你的網頁內容。發文後先按一下，看看酸民可能會怎麼批評，之後真的有人來批評，你就完全沒有感覺了",
+  "description": "模擬網路酸民發文專用，鍛鍊提高自我心智抗壓能力，預防網路酸民攻擊，請勿用在惡意攻擊他人。注意需自己註冊 OpenAI 取得自己的 Secret Key 唷！",
   "permissions": ["activeTab", "storage"],
+  "icons": {
+    "16": "icons/icon16.png",
+    "48": "icons/icon48.png",
+    "128": "icons/icon128.png"
+  },
   "action": {
     "default_icon": {
       "16": "icons/icon16.png",