Chrome扩展弹窗无法替换选中文本内容问题求助

问题 #

开发Chrome扩展时遇到以下问题：扩展需要接收用户选中的文本，调用翻译接口后将结果替换到弹窗的textContent中。直接传字符串fetchDataHandle('text')时功能正常，但传入用户选中的变量text时无法替换内容。尝试将data[0].word改为传入的文本也无效，且测试确认data[0].word不为空，对此存在困惑。

涉及代码 #

弹窗HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
        min-height: 5em;
        min-width: 10em;
        background: rgba(250, 128, 114, 0);
      }
    </style> 
</head>
<body>
    <h2 id="word"></h2>
    <script src="content.js"></script>
</body>
</html>

content.js代码

async function fetchDataHandle(text){
    const res = await fetch(`https://api.dictionaryapi.dev/api/v2/entries/en/${text}`);
    const data = await res.json();
    document.getElementById("word").textContent = `${data[0].word}`;
    }

text = getSelection().toString()
fetchDataHandle(text)

background.js代码

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: {tabId: tab.id},
    files: ["content.js"]
  });
  });

解决方案 #

核心问题是代码执行上下文混淆：

1. 点击扩展图标时，background.js将content.js注入到当前网页的上下文，此时document.getElementById("word")操作的是网页DOM，而非弹窗DOM。
2. 弹窗HTML里引入的content.js运行在弹窗自身上下文，此时getSelection()获取的是弹窗内的选中内容，而非网页中用户选中的文本。

修复步骤 #

1. 修改background.js：点击图标直接打开弹窗

chrome.action.onClicked.addListener(() => {
  chrome.windows.create({
    type: "popup",
    width: 300,
    height: 200,
    url: "popup.html" // 对应你的弹窗HTML文件名
  });
});

2. 创建网页注入脚本（命名为inject.js）：获取网页选中文本并发送给弹窗

const selectedText = getSelection().toString().trim();
chrome.runtime.sendMessage({type: "selectedText", text: selectedText});

3. 修改弹窗的content.js：监听消息并更新弹窗DOM

async function fetchDataHandle(text){
  if (!text) {
    document.getElementById("word").textContent = "未选中文本";
    return;
  }
  try {
    const res = await fetch(`https://api.dictionaryapi.dev/api/v2/entries/en/${text}`);
    const data = await res.json();
    document.getElementById("word").textContent = data[0]?.word || "未找到释义";
  } catch (err) {
    document.getElementById("word").textContent = "请求出错";
  }
}

// 接收网页传来的选中文本
chrome.runtime.onMessage.addListener((message) => {
  if (message.type === "selectedText") {
    fetchDataHandle(message.text);
  }
});

// 弹窗打开时，向当前网页注入脚本获取选中内容
chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
  chrome.scripting.executeScript({
    target: {tabId: tabs[0].id},
    files: ["inject.js"]
  });
});

4. 完善manifest.json权限配置

{
  "manifest_version": 3,
  "name": "单词翻译助手",
  "version": "1.0",
  "action": {},
  "permissions": ["scripting", "tabs"],
  "background": {
    "service_worker": "background.js"
  }
}

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