feat: basic framework

coder-hxl · coder-hxl · commit 13ae2707a017 · 2024-04-23T23:59:42.000+08:00
diff --git a/README.md b/README.md
@@ -0,0 +1,3 @@
+# Page AI
+
+Answer questions based on the content of the page.
diff --git a/assets/logo.png b/assets/logo.png
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,11 @@
+{
+  "manifest_version": 3,
+  "name": "Page AI",
+  "description": "页面 AI",
+  "version": "1.0",
+  "action": {
+    "default_popup": "popup/popup.html",
+    "default_icon": "assets/logo.png"
+  },
+  "host_permissions": ["https://*/"]
+}
diff --git a/popup/popup.css b/popup/popup.css
@@ -0,0 +1,79 @@
+* {
+  padding: 0;
+  margin: 0;
+}
+
+*::-webkit-scrollbar {
+  width: 3px;
+}
+
+*::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background-color: #b2bbbe;
+}
+
+*::-webkit-scrollbar-track {
+  border-radius: 10px;
+}
+
+body {
+  width: 300px;
+  background-color: #eceff7;
+}
+
+#app {
+  padding: 5px 10px 10px;
+}
+
+.title {
+  text-align: center;
+}
+
+.box .search {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 10px;
+  border: 1px solid rgb(210, 210, 210);
+  border-radius: 10px;
+  background-color: #ffff;
+}
+
+.box .search .search-ipt {
+  width: 220px;
+  height: 38px;
+  border: none;
+}
+
+.box .search .search-ipt:focus-visible {
+  outline: none;
+}
+
+.box .search .search-btn {
+  width: 30px;
+  height: 30px;
+  border: none;
+  border-radius: 5px;
+  color: #ffff;
+  background-color: #c5c5c5;
+}
+
+.box .search .search-btn:hover {
+  background-color: #bbbbbb;
+}
+
+/* message list */
+
+.box .message-list {
+  margin-top: 10px;
+  max-height: 390px;
+  overflow-y: scroll;
+  word-wrap: break-word;
+}
+
+.box .message-list .item {
+  margin: 12px 0;
+  padding: 6px;
+  border-radius: 6px;
+  background-color: #ffff;
+}
diff --git a/popup/popup.html b/popup/popup.html
@@ -0,0 +1,34 @@
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>页面 AI</title>
+    <link rel="stylesheet" href="./popup.css" />
+  </head>
+
+  <body>
+    <div id="app">
+      <h1 class="title">页面 AI</h1>
+
+      <div class="box">
+        <div class="search">
+          <input type="text" class="search-ipt" placeholder="" />
+          <button class="search-btn">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+              <path
+                d="M7 11L12 6L17 11M12 18V7"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              ></path>
+            </svg>
+          </button>
+        </div>
+
+        <div class="message-list"></div>
+      </div>
+    </div>
+
+    <script src="./popup.js"></script>
+  </body>
+</html>
diff --git a/popup/popup.js b/popup/popup.js
@@ -0,0 +1,52 @@
+const API_KEY = ''
+
+const searchInput = document.querySelector('.search-ipt')
+const searchBtn = document.querySelector('.search-btn')
+
+const messageList = document.querySelector('.message-list')
+
+searchBtn.addEventListener('click', async () => {
+  const searchContent = searchInput.value
+  console.log('input', searchContent)
+
+  const div = document.createElement('div')
+  div.setAttribute('class', 'item')
+
+  const aiResponseMessage = await fetchOpenAI(searchContent)
+
+  console.log('searchContent', searchContent)
+  console.log('aiResponseMessage', aiResponseMessage)
+
+  div.innerText = aiResponseMessage
+  messageList.insertBefore(div, messageList.firstElementChild)
+})
+
+async function fetchOpenAI(searchContent) {
+  const bodyOptions = {
+    model: 'gpt-3.5-turbo',
+    messages: [
+      { role: 'system', content: '你需要根据内容回答用户问题' },
+      { role: 'user', content: searchContent }
+    ],
+    temperature: 0.1
+  }
+
+  try {
+    const response = await fetch('', {
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${API_KEY}`
+      },
+      method: 'post',
+      body: JSON.stringify(bodyOptions)
+    })
+
+    const responseData = await response.json()
+
+    const result = responseData.choices[0].message.content
+
+    return result
+  } catch (error) {
+    console.log(`error: ${error.message}`)
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+# Page AI`
	`2`	`+`
	`3`	`+Answer questions based on the content of the page.`