我正在创建一个Chrome扩展应用程序。这是应用程序的工作方式：
当我单击侧栏上的按钮时，它会运行一个名为translator的函数，并将每个文本节点更改为“test...”。
当我在控制台上运行该函数时，它运行得非常好。但是当我通过单击侧栏上的按钮运行它时，它运行但不影响当前工作页面的外观。
下面是我的代码：

清单.json

{
  "manifest_version": 3,
  "name": "webpage translator",
  "version": "1.0.0",

  "permissions": [
    "contextMenus"
  ],

  "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": [
    "tabs",
    "activeTab",
    "scripting"
  ],
  "host_permissions": [
    "http://*/",
    "https://*/"
  ]
}

sidebar.js

import translator from "./translator.js";

const button = document.getElementById('test_button');

button.addEventListener('click', async () => {
  const [tab] = await chrome.tabs.query({
    active: true,
    currentWindow: true
  });
  console.log('current tab: ', tab);
  console.log('translator function: ', translator);
  
  await chrome.scripting.executeScript({
    target: {tabId: tab.id},
    function: translator
  });
})

console.log('starting sidebar.js...')

translator.js

async function translate(node) {
  node.textContent = 'test';
}

async function checkChildNodes(node) {
  if (node.hasChildNodes()) {
    for (let childNode of node.childNodes) {
      console.log("checking node...")
      checkChildNodes(childNode);
    }
  }
  else {
    if (node.nodeType === 3) {
      console.log('Text exists...!');
      console.log(node.textContent);
      node.textContent = 'test....!';
      translate(node);
    }
  }
}

async function translator() {
  console.log('running translator...')
  const divs = document.getElementsByTagName('div');
  for (let div of divs) {
    checkChildNodes(div);
  }
}

export default translator;

当我检查当前选项卡的控制台时，我看到“正在运行翻译...”消息很好。但它不会影响当前选项卡的文本节点。我对chrome扩展应用程序很陌生，所以我一定错过了一些东西，但我在网上找不到任何解决方案。任何帮助都将不胜感激！