alias function and style modify

_locales/en/messages.json

@@ -11,6 +11,10 @@
     "message": "Add",
     "description": "Label for the Add button"
   },
+  "renameAccount": {
+    "message": "Rename",
+    "description": "Label for the Rename button"
+  },
   "trackedDomainManagement": {
     "message": "Tracked Domain Management",
     "description": "Title for the tracked domain management section"
@@ -28,7 +32,7 @@
     "description": "Description for the first checkbox"
   },
   "modifyLinkEnabled": {
-    "message": "Restrict tracked domain links to open only in the current tab",
+    "message": "Restrict tracked domain's links to open only in the current tab",
     "description": "Description for the second checkbox"
   },
   "delete": {
@@ -67,6 +71,10 @@
     "message": "Load All Cookies",
     "description": "Title for the Load All Cookies button"
   },
+  "options": {
+    "message": "Options",
+    "description": "open options"
+  },
   "greeting": {
     "message": "Hello",
     "description": "Greeting text"

_locales/zh_CN/messages.json

@@ -11,6 +11,10 @@
     "message": "添加",
     "description": "添加按钮的标签"
   },
+  "renameAccount": {
+    "message": "重命名",
+    "description": "重命名按钮的标签"
+  },
   "trackedDomainManagement": {
     "message": "追踪域名管理",
     "description": "追踪域名管理部分的标题"
@@ -66,6 +70,10 @@
   "loadAllCookies": {
     "message": "加载所有Cookies",
     "description": "加载所有Cookies按钮的标题"
+  },
+    "options": {
+    "message": "选项",
+    "description": "打开选项界面"
   },
   "greeting": {
     "message": "Hello",

src/background/index.ts

@@ -10,6 +10,7 @@ interface Account {
   manualSave?: boolean
   closed?: boolean
   refresh?: boolean //加载全部cookie后,是否需要手动刷新?
+  alias?: string //用户手动修改的别名 9.13
 }
 
 // 定义变量的类型
@@ -45,7 +46,7 @@ async function getStorageData<T>(storageKey: string, defaultValue: T = {} as T):
   try {
     const result = await chrome.storage.local.get(storageKey)
     if (!result[storageKey]) {
-      console.log('Notice: the value is null in getStorageData.')
+      console.log('Notice: the value is null in getStorageData. storageKey:', storageKey)//这里不应该抛出错误，因为这个函数是用来获取数据的，如果没有数据，就返回默认值 9.13
     }
     return (result[storageKey] || defaultValue) as T
   } catch (error) {
@@ -172,19 +173,6 @@ chrome.runtime.onMessage.addListener(async (request: any, _sender: chrome.runtim
   }
 })
 
-//useless
-// // 监听来自Content Script或Popup的消息
-// chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
-//   if (request.type === 'LOAD_LOCALSTORAGE') {
-//     // 从某个存储（例如IndexedDB、chrome.storage等）中获取数据
-//     const data = /* 对应账户的localStorage数据 */ loadLocalStorage(sender.tab.id, data)
-//     sendResponse({ status: 'Data loaded' })
-//   } else if (request.type === 'SAVE_AND_CLEAR_LOCALSTORAGE') {
-//     saveAndClearLocalStorage(sender.tab.id)
-//     sendResponse({ status: 'Data saved and cleared' })
-//   }
-// })
-
 async function loadLocalStorage(tabId: number, data: Record<string, string>) {
   try {
     console.log('data in loadLocalStorage:', data)
@@ -446,15 +434,18 @@ async function handleTabChange(tabId: number) {
       const [rootDomain, key] = (await processDomain(tab)) as [string, string]
       // chrome.tabs.sendMessage(tabId, { action: 'showMask' }) // To show the mask in the content script, corresponding with onUpdated 8.26
 
-      await saveCurrentCookies(rootDomain, key)//todo 这里可以将里面的保存提到外面来执行 9.13
-
-      const result = await saveAndClearLocalStorage(currentTabId) // save and clear localstorage 9.13
-      if (result && result[0] && result[0].result) {
-        accounts[key].localstorage = result[0].result
-        await chrome.storage.local.set({ accounts: accounts })
-      }
-      else {
-        console.log("can't get result in saveAndClearLocalStorage in handleTabChange.")
+      await saveCurrentCookies(rootDomain, key) //todo 这里可以将里面的保存提到外面来执行 9.13
+      // save and clear localstorage 9.13
+      const result = await saveAndClearLocalStorage(currentTabId)
+      try {
+        if (result && result[0] && result[0].result) {
+          accounts[key].localstorage = result[0].result
+          await chrome.storage.local.set({ accounts: accounts })
+        } else {
+          console.log("can't get result in saveAndClearLocalStorage in handleTabChange.")
+        }
+      } catch (error) {
+        console.log('在handletapchange中需要忽视的报错 in saveAndClearLocalStorage:', error)
       }
 
       console.log('handleTabChange中saveCurrentCookies已触发')
@@ -600,11 +591,12 @@ async function loadCookies(rootDomain: string, cookies: chrome.cookies.Cookie[])
 }
 
 // 清除特定域名的所有 cookies
+// todo 增加对local storage的清除
 async function clearCookiesForDomain(domain: string) {
   try {
     const cookies = await chrome.cookies.getAll({ domain })
 
-    console.log('%c ----------------------', 'background: #00ff00; color: #000')
+    console.log('%c clear----------------------', 'background: #00ff00; color: #000')
     console.log(`%c Found ${cookies.length} cookies for domain: ${domain}`, 'background: #00ff00; color: #000')
 
     const promises = cookies.map(async (cookie) => {
@@ -622,7 +614,7 @@ async function clearCookiesForDomain(domain: string) {
 
     // Once all cookies are removed, print the final log line
     await Promise.all(promises)
-    console.log('%c ----------------------', 'background: #00ff00; color: #000')
+    console.log('%c clear----------------------', 'background: #00ff00; color: #000')
   } catch (error) {
     console.error('%c Error during cookie operation:', 'background: #ff0000; color: #fff', error)
   }
@@ -777,24 +769,24 @@ async function modifyLinksInTab(tabId: number) {
           document.querySelectorAll('a').forEach(function (link) {
             link.target = '_self'
           })
-          document.querySelectorAll('form').forEach(function (form) {
-            form.addEventListener('submit', function (event) {
-              event.preventDefault()
-              window.location.href = form.action
-            })
-          })
+          // document.querySelectorAll('form').forEach(function (form) {
+          //   form.addEventListener('submit', function (event) {
+          //     event.preventDefault()
+          //     window.location.href = form.action
+          //   })
+          // })
         }
 
         // 初始调用
         modifyLinksAndForms()
 
         // 添加点击事件监听器
-        document.body.addEventListener('click', function (event) {
-          if (event.target && event.target.tagName === 'A') {
-            event.preventDefault()
-            window.location.href = event.target.href
-          }
-        })
+        // document.body.addEventListener('click', function (event) {
+        //   if (event.target && event.target.tagName === 'A') {
+        //     event.preventDefault()
+        //     window.location.href = event.target.href
+        //   }
+        // })
 
         // 重写window.open
         window.open = function (url) {

src/options/app.vue

@@ -10,7 +10,7 @@
 
   <RouterView></RouterView>
 
-    <footer aria-label="Site Footer">
+    <footer aria-label="Site Footer" class="fixed-bottom">
       <div class="bg-gray-50 text-gray-700 px-4">
         <div class="flex justify-between items-center">
           <div>
@@ -27,4 +27,11 @@
     </footer>
 </template>
 
-<style scoped></style>
+<style scoped>
+.fixed-bottom {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+}
+
+</style>

src/options/index.html

@@ -11,7 +11,7 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0"
     />
-    <title>Vite + Vue + TS</title>
+    <title>CookiesClerk Options</title>
   </head>
   <body>
     <div id="app"></div>

src/options/index.scss

@@ -3,7 +3,7 @@ body {
   margin: 0 auto;
 }
 
-body {
-  border: 1px solid rgba(0, 0, 0, 0.03125) !important;
-  box-shadow: 0px 0.3px 0.9px rgb(0 0 0 / 10%), 0px 1.6px 3.6px rgb(0 0 0 / 10%) !important;
-}
+// body {
+//   border: 1px solid rgba(0, 0, 0, 0.03125) !important;
+//   box-shadow: 0px 0.3px 0.9px rgb(0 0 0 / 10%), 0px 1.6px 3.6px rgb(0 0 0 / 10%) !important;
+// }

src/options/pages/index.vue

@@ -17,9 +17,9 @@
       class="flex flex-wrap items-center mb-4 p-4 bg-white shadow-md rounded-lg">
       <input v-model="selectedAccounts[key]" type="checkbox" class="mr-2">
       <div class="flex-grow">
-        <p class="font-bold text-lg">{{ key }}</p>
-        <p class="text-gray-600">Manual Save: {{ account.manualSave }}</p>
-        <p class="text-gray-600">Closed: {{ account.closed }}</p>
+        <p class="font-bold text-lg">{{ account.alias || key }}</p>
+        <p class="text-gray-600" :class="{ 'text-green-600': account.manualSave }">Manual Save: {{ account.manualSave }}</p>
+        <p class="text-gray-600" :class="{ 'text-red-600': account.closed }" >Closed: {{ account.closed }}</p>
         <button @click="toggleCookiesVisible(key)" class="text-blue-500 hover:underline focus:outline-none">
           {{ cookiesVisible[key] ? 'Hide Cookies' : 'Show Cookies' }}
         </button>
@@ -46,7 +46,7 @@
       @click="showNotification">notification</button>
   </div>
   <div class="container mx-auto p-4">
-    <div class="bg-gray-200 p-4 rounded">
+    <div class="bg-white-200 p-4 rounded">
       <h2>Selected Accounts:</h2>
       <ul class="list-inside list-decimal">
         <li v-for="(entry, key) in selectedAccountsEntries" :key="key">
@@ -60,7 +60,6 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
 
 const accounts = ref<Record<string, any>>({});
 const selectedAccounts = ref<Record<string, any>>({});

src/popup/app.vue

@@ -19,7 +19,7 @@
           <a href="https://github.com/14790897/CookiesClerk" class="mr-2" target="_blank">GitHub</a>
         </div>
         <div>
-          <span class="mr-2">Version: 1.0.0</span>
+          <span class="mr-2">Version: 1.0.3</span>
           <a href="https://github.com/14790897/CookiesClerk/blob/main/src/assets/privacy%20policy.md" class="mr-2" target="_blank">Privacy Policy</a>
         </div>
       </div>