Chrome扩展开发问题：点击按钮仅修改Popup背景而非浏览页面

你现在的问题核心是上下文混淆：

• 你把content.js同时加载到了popup页面里，导致这段脚本在popup的独立上下文里运行，点击按钮修改的自然是popup的body，而非目标网页。
• 原本应该注入到目标网页的content.js，却在popup里找按钮元素，逻辑完全错位。

我们需要用Chrome扩展的消息传递机制，让popup触发操作，让注入到目标网页的content script执行修改动作。

1. 拆分脚本文件 #

删除popup里对content.js的引用，新建popup.js专门处理popup的交互逻辑。

修改后的popup.html #

<!DOCTYPE html>
<html>
<head>
    <title>Change Color</title>
    <script src="popup.js"></script>
</head>
<body>
    <button id="changeColorBtn">Change Color</button>
</body>
</html>

2. 编写popup.js（处理按钮点击，发送消息） #

document.addEventListener('DOMContentLoaded', () => {
  const changeBtn = document.getElementById('changeColorBtn');
  changeBtn.addEventListener('click', async () => {
    // 获取当前活跃的标签页
    const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true });
    // 向该标签页的content script发送修改颜色的指令
    chrome.tabs.sendMessage(activeTab.id, { 
      action: 'updateBgColor', 
      color: 'red' 
    });
  });
});

3. 重构content.js（监听消息，修改目标网页） #

让它专注于接收popup的指令，修改目标网页的背景色：

// 监听来自popup的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'updateBgColor') {
    document.body.style.backgroundColor = request.color;
  }
});

4. 确认Manifest配置（无需修改，保持现有即可） #

你的Manifest V3配置是正确的：activeTab权限确保能访问当前标签，content_scripts配置能把content.js注入到所有网页。

Chrome扩展里，popup、content script、background script都是独立的上下文，不能直接共享DOM或变量：

• popup的脚本只能操作popup自身的DOM
• content script可以直接操作目标网页的DOM，但需要通过消息传递接收外部指令
• 用chrome.tabs.sendMessage和chrome.runtime.onMessage实现两者的通信，就能让点击popup按钮的动作，触发目标网页的背景色修改。

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