优化chrome 插件

chrome_agent/_locales/de/messages.json

@@ -0,0 +1,34 @@
+{
+  "optionsTitle": {
+    "message": "Einstellungen",
+    "description": "Titel der Einstellungen-Seite"
+  },
+  "apiTitle": {
+    "message": "Gib deinen OpenAI API Schlüssel ein, um die Erweiterung zu nutzen:",
+    "description": "Titel der API-Schlüssel-Eingabe"
+  },
+  "apiModelTitle": {
+    "message": "Wähle ein API Model aus:",
+    "description": "Titel der API-Model-Auswahl"
+  },
+  "lastMessagesTitle": {
+    "message": "Letzte Nachrichten",
+    "description": "Titel der letzten Nachrichten"
+  },
+  "optionsInputPlaceholder": {
+    "message": "Hier Access Schlüssel eingeben",
+    "description": "Platzhalter für API Schlüssel Eingabe"
+  },
+  "optionsAccessTokenNote": {
+    "message": "Dein Access Schlüssel wird nur lokal gespeichert und nicht an Dritte weitergegeben.",
+    "description": "Hinweis zum API Schlüssel"
+  },
+  "optionsSaveButtonText": {
+    "message": "Speichern",
+    "description": "Text für den Button zum Speichern des Access Schlüssels"
+  },
+  "optionsDeleteButtonText": {
+    "message": "API Schlüssel löschen",
+    "description": "Text für den Button zum Löschen des Access Schlüssels"
+  }
+}

chrome_agent/_locales/en/messages.json

@@ -0,0 +1,34 @@
+{
+  "optionsTitle": {
+    "message": "Options",
+    "description": "Title of the options page"
+  },
+  "apiTitle": {
+    "message": "Enter your Access token below to get started.",
+    "description": "Title of the Access-token section"
+  },
+  "apiModelTitle": {
+    "message": "Choose API-Model:",
+    "description": "Title of the API-Model section"
+  },
+  "lastMessagesTitle": {
+    "message": "Last Messages:",
+    "description": "Title of the last messages section"
+  },
+  "optionsInputPlaceholder": {
+    "message": "Enter your Access token here",
+    "description": "Placeholder of the Access-Token input"
+  },
+  "optionsAccessTokenNote": {
+    "message": "Note: Your Access token will only be stored locally on your computer and nowhere else.",
+    "description": "Note about the Access-Token"
+  },
+  "optionsSaveButtonText": {
+    "message": "Save",
+    "description": "Text of the save button"
+  },
+  "optionsDeleteButtonText": {
+    "message": "Delete Access token",
+    "description": "Text of the delete button"
+  }
+}

chrome_agent/background.js

@@ -66,3 +66,16 @@ chrome.runtime.onMessage.addListener(async (msg, sender) => {
 //    }
 //  }
 });
+
+// Listen for when the extension is installed
+chrome.runtime.onInstalled.addListener(function () {
+    // Set default API model
+    let defaultModel = "gpt-35-turbo";
+    chrome.storage.local.set({ apiModel: defaultModel });
+
+    // Set empty chat history
+    chrome.storage.local.set({ chatHistory: [] });
+
+    // Open the options page
+    chrome.runtime.openOptionsPage();
+});

chrome_agent/manifest.json

@@ -3,13 +3,13 @@
     "description" : "An Extension Driven by LLM",
     "version": "1.0",
     "manifest_version": 3,
-
+    "default_locale": "en",
     "background": {
         "service_worker": "background.js"
       },
-
+    "options_page": "options/options.html",
     "action": {
-        "default_popup": "src/popup.html",
+        "default_popup": "popup/popup.html",
         "default_icon": "img/popup.png",
         "default_title": "BrowserLLMBB"
     },
@@ -33,8 +33,8 @@
       "content_scripts": [
         {
           "js": [
-            "src/content.js",
-            "src/md5.js"
+            "popup/content.js",
+            "popup/md5.js"
           ],
           "matches": [
             "https://www.jianshu.com/p/*",

chrome_agent/options/options.css

@@ -0,0 +1,84 @@
+body {
+    font-family: 'Arial', sans-serif;
+    background-color: #343541;
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+label {
+    display: block;
+    margin-bottom: 10px;
+}
+
+#input-container {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+}
+
+input {
+    width: 100%;
+    padding: 8px;
+    box-sizing: border-box;
+}
+
+button {
+    background-color: #4caf50;
+    color: #fff;
+    padding: 10px 15px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #45a049;
+}
+
+button i {
+    margin-right: 5px;
+}
+
+#save-button {
+    display: flex;
+    align-items: center;
+}
+
+#delete-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 10px;
+    margin-top: 10px;
+}
+
+#delete-button {
+    background-color: #f44336;
+    padding: 10px 15px;
+}
+
+#delete-button:hover {
+    background-color: #d32f2f;
+}
+
+#status-message {
+    margin-top: 10px;
+    color: #333;
+}

chrome_agent/options/options.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Options</title>
+  <link rel="stylesheet" href="options.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+</head>
+
+<body>
+  <div class="container">
+    <h1 id="optionsTitle"></h1>
+    <p id="apiTitle"></p>
+    <div id="input-container">
+      <input type="text" id="accessToken">
+      <button id="save-button" title="Save Access token">
+        <i class="fa fa-save"></i>
+        <span id="save-button-text"></span>
+      </button>
+    </div>
+    <div id="delete-container">
+      <button id="delete-button" title="Delete Access token">
+        <i class="fa fa-trash"></i>
+        <span id="delete-button-text"></span>
+      </button>
+      <p id="status-message"></p>
+    </div>
+    <p id="access-token-note" class="note"></p>
+  </div>
+  <script src="options.js"></script>
+</body>
+
+</html>

chrome_agent/options/options.js

@@ -0,0 +1,69 @@
+document.addEventListener('DOMContentLoaded', function () {
+    // Fetch the elements
+    const accessTokenInput = document.getElementById('accessToken');
+    const saveButton = document.getElementById('save-button');
+    const deleteButton = document.getElementById('delete-button');
+    const statusMessage = document.getElementById('status-message');
+
+    // Retrieve the saved Access token from local storage
+    chrome.storage.local.get(['access_token'], function (result) {
+        if (result.access_token) {
+            accessTokenInput.value = result.access_token;
+        }
+    });
+
+    // Add event listener to the save button
+    saveButton.addEventListener('click', function () {
+        // Get the entered Access token
+        const accessToken = accessTokenInput.value.trim();
+
+        // Check if the Access token is not empty
+        if (accessToken !== '' && accessToken.length > 1 && accessToken.length < 100) {
+            // Save the Access token to local storage
+            chrome.storage.local.set({ access_token: accessToken }, function () {
+                // Update the status message
+                statusMessage.textContent = 'Access token saved successfully!';
+                setTimeout(function () {
+                    // Clear the status message after 2 seconds
+                    statusMessage.textContent = '';
+                }, 2000);
+            });
+        } else {
+            // Display an error message if the Access token is empty
+            statusMessage.textContent = 'Please enter a valid Access token.';
+        }
+    });
+
+    // Add event listener to the delete button
+    deleteButton.addEventListener('click', function () {
+        // Remove the Access token from local storage
+        chrome.storage.local.remove(['access_token'], function () {
+            // Update the status message
+            statusMessage.textContent = 'Access token deleted successfully!';
+            accessTokenInput.value = '';
+            setTimeout(function () {
+                // Clear the status message after 2 seconds
+                statusMessage.textContent = '';
+            }, 2000);
+        });
+    });
+});
+
+// localize title optionsTitle
+document.getElementById('optionsTitle').innerHTML = chrome.i18n.getMessage("optionsTitle");
+
+// localize api title apiTitle
+document.getElementById('apiTitle').innerHTML = chrome.i18n.getMessage("apiTitle");
+
+// localize the Access token input placeholder
+document.getElementById('accessToken').placeholder = chrome.i18n.getMessage("optionsInputPlaceholder");
+
+// localize access-token-note
+document.getElementById('access-token-note').innerHTML = chrome.i18n.getMessage("optionsAccessTokenNote");
+
+// localize save button text
+document.getElementById('save-button-text').innerText = chrome.i18n.getMessage("optionsSaveButtonText");
+
+// localize delete button text
+document.getElementById('delete-button-text').innerText = chrome.i18n.getMessage("optionsDeleteButtonText");
+

chrome_agent/{src → popup}/popup.html

@@ -112,10 +112,11 @@
 <!--    <iframe src=$popup_url style="height: 550px"></iframe>-->
 <div id="iframe_area" style="height: 570px"></div>
 
+<div style="display:none">
 <h3>Customize Token:</h3>
 <input type="text" id="access_token" name="access_token" class="input-text" placeholder="input and chick change button, then reopen this">
 <button id="set_access_token" class="upload_btn">Change</button>
-
+</div>
 <script src="popup.js"></script>
 <script src="md5.js"></script>
 </body>