Chrome应用程序不影响当前选项卡的页面

Question

我正在创建一个chrome扩展应用程序。这就是应用程序的工作原理:
当我单击侧边栏上的按钮时，它运行一个名为translator的函数，并将每个文本节点更改为"test…">

当我在控制台上运行这个函数时，它运行得非常好。但是，当我通过单击侧边栏上的按钮来运行它时，它运行但不影响当前工作页的外观。

manifest.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;

当我检查当前选项卡的控制台时，我看到&;正在运行translator…&;信息很好。但它不影响当前选项卡的文本节点。我是相当新的chrome扩展应用程序，所以我一定是错过了一些东西，但我无法找到任何解决方案的问题在网上。任何帮助将非常感激!

Answer 1

我已经解决了这个问题，把所有的函数在translator.js功能translator

translator.js

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

async function checkChildNodes(node) {
console.log('running checkChildNodes...!')
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);
}
}
}
const divs = document.getElementsByTagName('div');
console.log("running translator...!")
for (let div of divs) {
checkChildNodes(div);
}
}
export default translator