Enhance message handling and priority management in content scripts

- Updated the message structure in index.ts to include additional properties: nodeName, priority, and tick.
- Introduced a new utility function getPriority to determine the priority of HTML elements based on their node names.
- Modified handleNode to utilize the new priority system and increment tick for each processed node.
- Added a new file getPriority.ts to manage priority mappings for various HTML elements.

Author: HaloWang

chrome-extension/src/background/index.ts

@@ -56,7 +56,7 @@ const listenMessageForUI = (
 
     switch (func) {
       case 'QueryRequest': {
-        const { source, logic, url } = message.body;
+        const { source, logic, url, nodeName, priority, tick } = message.body;
         const tabId = sender.tab?.id;
         const v = waitingQuery[source];
         if (v === undefined) {
@@ -68,7 +68,8 @@ const listenMessageForUI = (
             v.resolves.push(sendResponse);
           }
         }
-        ws?.send(JSON.stringify({ source, logic, url, tabId }));
+        const data = { source, logic, url, tabId, nodeName, priority, tick };
+        ws?.send(JSON.stringify(data));
         return true;
       }
       case 'GetState': {
@@ -88,6 +89,15 @@ const listenMessageForUI = (
         syncStateToContent();
         return false;
       }
+      case 'QueryResponse': {
+        break;
+      }
+      case 'OnStateChanged': {
+        break;
+      }
+      case 'GetStateResponse': {
+        break;
+      }
     }
     return false;
   } catch (e) {

docs/TODO.md

@@ -7,7 +7,6 @@
 - [ ] Bundle chrome extension files
 - [ ] 使用教程
 - [ ] 演示模式
-- [ ] 坑爹的隐藏 Form, 给老子滚
 - [x] 确保转圈会消失
   - [x] 如果没有运行, 就移除所有转圈
 - [x] 移除红框
@@ -17,7 +16,6 @@
 
 ### 中优先级
 
-- [ ] 优先翻译 main 标签, See: [通常有哪些情况表明某些内容是网页的主要元素?](https://chatgpt.com/share/68740231-3100-8004-973e-b850038a27b7)
 - [ ] Store things in frontend
 - [ ] 使用最新权重
 - [ ] 固定不翻译一些内容
@@ -26,7 +24,9 @@
 - [ ] 不翻译已经关闭的标签
 - [ ] 渲染 frontend 在线状态
 - [ ] 根据 backend 在线状态决定是否启用翻译
-- [x] 不在某些 URL 上执行:
+- [x] 不在某些 URL 上执行
+- [x] 优先翻译 main 标签, See: [通常有哪些情况表明某些内容是网页的主要元素?](https://chatgpt.com/share/68740231-3100-8004-973e-b850038a27b7)
+  - [x] 坑爹的隐藏 Form, 给老子滚
 
 ### 低优先级
 

packages/shared/lib/utils/types.ts

@@ -18,6 +18,9 @@ export interface QueryRequest {
     source: string;
     logic: 'translate' | 'loop';
     url: string;
+    nodeName: string;
+    priority: number;
+    tick: number;
   };
 }
 

pages/content/src/matches/all/getPriority.ts

@@ -0,0 +1,22 @@
+const priorityMap: { [key: string]: number } = {
+  'turbo-frame': 20,
+  article: 40,
+  main: 30,
+  section: 10,
+  p: 10,
+  h1: 10,
+  h2: 10,
+  header: -10,
+  footer: -10,
+  comment: -20,
+  nav: -20,
+  sidebar: -20,
+  menu: -20,
+  options: -20,
+  cite: -11,
+};
+
+export const getPriority = (node: HTMLElement) => {
+  const nodeName = node.nodeName;
+  return priorityMap[nodeName] ?? priorityMap[nodeName.toLowerCase()] ?? 0;
+};

pages/content/src/matches/all/handleNode.ts

@@ -1,14 +1,16 @@
 import { checkBreakLineHappened } from '.';
+import { getPriority } from './getPriority';
 import { state } from './state';
 import { ignoreHref, isChinese, isUrl, queryWS, formatTranslation } from '@extension/shared';
 
 const ignoreTypeLower = ['path', 'script', 'style', 'svg', 'noscript', 'head', 'pre', 'code', 'math', 'textarea'];
 const ignoreTypeUpper = ignoreTypeLower.map(item => item.toUpperCase());
 const ignoreTypes = ignoreTypeLower.concat(ignoreTypeUpper);
-// const checkingTypeLower = ['turbo-frame', 'article'];
-const checkingTypeLower: string[] = [];
+const checkingTypeLower = ['turbo-frame', 'article', 'main'];
+// const checkingTypeLower: string[] = [];
 const checkingTypeUpper = checkingTypeLower.map(item => item.toUpperCase());
 const checkingTypes = checkingTypeLower.concat(checkingTypeUpper);
+let tick = 0;
 
 export const handleNode = (_node: Node): boolean => {
   const currentUrl = window.location.href;
@@ -17,13 +19,16 @@ export const handleNode = (_node: Node): boolean => {
     if (startWith) return false;
   }
 
-  if (state.running) return false;
-
   const node = _node as HTMLElement;
   const nodeName = node.nodeName;
 
   const checking = checkingTypes.includes(nodeName);
 
+  if (!state.running) {
+    // if (checking) console.log({ nodeName, running: state.running });
+    return false;
+  }
+
   // if (checking) console.log({ nodeName, step: 0 });
 
   const parentNode = node.parentElement;
@@ -160,7 +165,9 @@ export const handleNode = (_node: Node): boolean => {
   const nodeToBeAdded = document.createElement(nodeNameToBeAdded);
   nodeToBeAdded.classList.add('rwkv_offline_translation_result');
   if (state.inspecting) nodeToBeAdded.classList.add('rwkv_inspecting');
-  queryWS({ source: textContent, logic: 'translate', url: currentUrl })
+  const priority = getPriority(node);
+  tick++;
+  queryWS({ source: textContent, logic: 'translate', url: currentUrl, nodeName, priority, tick })
     .then(json => {
       if (node.classList.contains('rwkv_offline_translation_done')) return;
 

pages/content/src/matches/all/index.ts

@@ -3,7 +3,6 @@ import { injectCss } from './injectcss';
 import { state } from './state';
 import { ignoreHref } from '@extension/shared';
 import { sampleFunction } from '@src/sample-function';
-import { run } from 'node:test';
 
 injectCss();
 
@@ -58,6 +57,8 @@ const handleStateChanged = (event: CustomEvent) => {
       document.body.querySelectorAll('.rwkv_loading_spinner').forEach(node => {
         node.remove();
       });
+    } else {
+      document.body.querySelectorAll('*').forEach(handleNode);
     }
   }
 };
@@ -211,6 +212,3 @@ observer.observe(document.body, {
   childList: true,
   subtree: true,
 });
-
-// 初始遍历已有 DOM
-document.body.querySelectorAll('*').forEach(handleNode);