Chrome扩展点击侧边栏按钮执行translator函数未生效问题求助

核心问题 #

1. 函数依赖未被注入：通过chrome.scripting.executeScript注入函数时，只有指定的function会被传递到页面上下文，它依赖的checkChildNodes、translate函数并不会被一同注入，导致执行时触发未定义错误（该错误会出现在当前标签页的控制台，而非侧边栏控制台）。
2. 遍历范围有限：原代码只遍历页面中的div元素，会漏掉p、span、h1等其他标签内的文本节点。
3. Manifest配置不规范：manifest.json中重复声明了permissions数组，虽不影响当前权限生效，但不符合配置规范。

修正后的代码 #

1. 修正manifest.json #

合并重复的permissions配置：

{
  "manifest_version": 3,
  "name": "webpage translator",
  "version": "1.0.0",
  "icons": {
    "16": "icons/test_icon.jpg", 
    "48": "icons/test_icon.jpg", 
    "128": "icons/test_icon.jpg"
  },
  "sidebar_action": {
    "default_page": "sidebar.html",  
    "default_icon": {         
        "16": "icons/test_icon.jpg"
    },
    "default_title": "test",     
    "use_navigation_bar": true       
  },
  "permissions": [
    "contextMenus",
    "tabs",
    "activeTab",
    "scripting"
  ],
  "host_permissions": [
    "http://*/",
    "https://*/"
  ]
}

2. 重写translator.js，确保函数自包含 #

将所有依赖逻辑封装到translator内部，同时扩大遍历范围、优化文本节点过滤：

function translator() {
  console.log('running translator...');

  function checkChildNodes(node) {
    if (node.hasChildNodes()) {
      for (let childNode of node.childNodes) {
        checkChildNodes(childNode);
      }
    } else {
      // 仅处理非空白的文本节点
      if (node.nodeType === 3 && node.textContent.trim()) {
        node.textContent = 'test....!';
      }
    }
  }

  // 从document.body开始遍历所有节点，覆盖全页面
  checkChildNodes(document.body);
}

export default translator;

注：移除了不必要的async声明（代码无异步操作），同时过滤空白文本节点，避免无意义的替换操作。

3. sidebar.js保持不变 #

原侧边栏逻辑无需修改，确保注入的是上述自包含的translator函数即可。

验证步骤 #

1. 在chrome://extensions/页面重新加载扩展
2. 打开任意网页，点击侧边栏按钮
3. 查看页面文本是否全部替换为test....!，同时可在标签页控制台确认无报错

内容的提问来源于stack exchange，提问作者gtj520