如何通过content.js的DOM操作变量更新Chrome扩展弹窗文本

核心问题分析 #

你遇到的document is not defined和$ is not defined错误，本质是Manifest配置错误导致popup.js被加载到无DOM环境，加上代码逻辑的几个漏洞：

• Manifest V3中action字段不支持js属性，且你把popup.js同时设为后台service_worker——service worker是无头环境，没有document/window对象，自然会报错。
• content.js里的异步消息发送函数只定义没执行，且外部的console.log(response)会触发未定义错误。
• popup.html的p标签缺少目标ID，无法通过getElementById定位。

分步修复 #

1. 修正Manifest配置 #

删除action里的js属性，给后台单独创建一个空的background.js（如果不需要后台逻辑，也可以直接移除background字段），避免popup.js被加载到service worker环境：

{
  "manifest_version": 3,
  "permissions": ["activeTab"],
  "content_scripts": [
    {
      "js": ["scripts/content.js"],
      "matches": ["<all_urls>"]
    }
  ],
  "action": {
    "default_popup": "popup/popup.html"
  },
  "background": {
    "service_worker": "background.js"
  }
}

如果不需要后台逻辑，直接删掉整个background字段即可。

2. 修复popup.html的DOM结构 #

给p标签添加目标ID：

<p id="goldStandard">Hello World</p>

<script src="popup.js"></script>

3. 修正popup.js的消息监听逻辑 #

确保只在弹窗环境（有DOM）中执行，且正确处理消息：

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.goldStandardTheme) {
    // 更新弹窗文本
    const targetEl = document.getElementById('goldStandard');
    if (targetEl) {
      targetEl.textContent = request.goldStandardTheme;
    }
    sendResponse({ response: '已更新弹窗内容' });
  }
});

4. 修复content.js的消息发送逻辑 #

执行异步函数，确保finalText已定义，且正确处理响应：

// 先确保finalText是已获取到的DOM字符串，替换成你的实际DOM选择器
const finalText = document.querySelector('目标选择器').textContent;

// 执行消息发送函数
(async () => {
  try {
    const response = await chrome.runtime.sendMessage({
      goldStandardTheme: finalText
    });
    console.log('弹窗响应:', response);
  } catch (err) {
    console.error('消息发送失败:', err);
  }
})();

额外优化建议 #

弹窗只有在打开时才存在，若content.js在弹窗未打开时发送消息会导致失败。可以改成弹窗打开时主动向content脚本请求数据，避免消息丢失：

// popup.js 主动请求数据
document.addEventListener('DOMContentLoaded', async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  const response = await chrome.tabs.sendMessage(tab.id, { action: 'getGoldStandardTheme' });
  if (response?.goldStandardTheme) {
    document.getElementById('goldStandard').textContent = response.goldStandardTheme;
  }
});

// content.js 监听请求并返回数据
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'getGoldStandardTheme') {
    const finalText = document.querySelector('目标选择器').textContent;
    sendResponse({ goldStandardTheme: finalText });
  }
});

注意：service worker仅用于处理后台事件（如安装、更新、消息转发），不要在其中操作DOM，它没有页面上下文。

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