Enhance tab and window data handling in Chrome extension

- Updated the `getActiveTabForFocusedWindow` function to exclude pinned tabs for more accurate active tab retrieval.
- Added a new `tabsAll` function to send detailed information about all tabs in the current window.
- Integrated `tabsAll` function into the window data structure to provide comprehensive tab context.
- Adjusted tab data extraction to ensure proper handling of null values and default last accessed time.

Author: HaloWang

chrome-extension/src/background/tabs.ts

@@ -3,7 +3,12 @@ import { ws } from '.';
 
 const getActiveTabForFocusedWindow = async (): Promise<chrome.tabs.Tab | null> => {
   try {
-    const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true, lastFocusedWindow: true });
+    const [activeTab] = await chrome.tabs.query({
+      active: true,
+      currentWindow: true,
+      lastFocusedWindow: true,
+      pinned: false,
+    });
     return activeTab;
   } catch (error) {
     console.error('Error getting active tab:', error);
@@ -22,12 +27,16 @@ const getAllTabs = async (): Promise<chrome.tabs.Tab[]> => {
 
 const all = () => {
   getActiveTabForFocusedWindow().then(tab => {
-    const id = tab?.id;
-    const url = tab?.url;
-    const title = tab?.title;
-    const favIconUrl = tab?.favIconUrl;
-    const windowId = tab?.windowId;
-    const lastAccessed = tab?.lastAccessed;
+    if (tab == null) {
+      console.log('getActiveTabForFocusedWindow', tab);
+      return;
+    }
+    const id = tab.id;
+    const url = tab.url;
+    const title = tab.title;
+    const favIconUrl = tab.favIconUrl;
+    const windowId = tab.windowId;
+    const lastAccessed = Date.now() ?? tab.lastAccessed;
     const data = {
       logic: 'tab_actived',
       tab: { id, url, title, favIconUrl, windowId, lastAccessed },
@@ -51,6 +60,22 @@ const all = () => {
   });
 };
 
+export const tabsAll = async (tabs: chrome.tabs.Tab[]) => {
+  const data = {
+    logic: 'tabs_all',
+    tabs: tabs.map(tab => {
+      const id = tab.id;
+      const url = tab.url;
+      const title = tab.title;
+      const favIconUrl = tab.favIconUrl;
+      const windowId = tab.windowId;
+      const lastAccessed = tab.lastAccessed;
+      return { id, url, title, favIconUrl, windowId, lastAccessed };
+    }),
+  };
+  ws?.send(JSON.stringify(data));
+};
+
 const _onHighlighted = (activeInfo: chrome.tabs.TabHighlightInfo) => {
   all();
 };

chrome-extension/src/background/windows.ts

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { ws } from '.';
+import { tabsAll } from './tabs';
 
 const getActiveWindow = async (): Promise<chrome.windows.Window | null> => {
   try {
@@ -30,6 +31,7 @@ const all = () => {
     const type = window?.type;
     const focused = window?.focused;
     const tabs = window?.tabs;
+    tabsAll(tabs ?? []);
     const data = {
       logic: 'window_actived',
       window: { id, left, top, width, height, state, type, focused },
@@ -49,6 +51,7 @@ const all = () => {
         const type = window.type;
         const focused = window.focused;
         const tabs = window.tabs;
+        tabsAll(tabs ?? []);
         return { id, left, top, width, height, state, type, focused, tabs };
       }),
     };

pages/content-ui/src/DashboardEntry.tsx

@@ -71,8 +71,8 @@ export const DashboardEntry: React.FC<{
       onMouseLeave={() => setIsHovered(false)}>
       {icon}
       <div style={{ display: 'flex', flexDirection: 'column', marginLeft: '4px' }}>
-        <div style={{ fontSize: '0.9rem', fontWeight: 600, lineHeight: '1.3' }}>RWKV</div>
-        <div style={{ fontSize: '0.9rem', fontWeight: 600, lineHeight: '1.3' }}>离线翻译</div>
+        <div style={{ fontSize: '12px' }}>RWKV</div>
+        <div style={{ fontSize: '14px', fontWeight: 600 }}>离线翻译</div>
       </div>
     </div>
   );

pages/content-ui/src/components/Base.tsx

@@ -71,8 +71,8 @@ export const Base: React.FC<{
         {icon}
       </div>
       <div style={{ display: 'flex', flexDirection: 'column' }}>
-        <div style={{ fontSize: '0.9rem', fontWeight: 600, lineHeight: '1.3' }}>{title}</div>
-        <div style={{ fontSize: '0.8rem', opacity: 0.7 }}>{value}</div>
+        <div style={{ fontSize: '12px' }}>{title}</div>
+        <div style={{ fontSize: '14px', fontWeight: 600 }}>{value}</div>
       </div>
     </div>
   );