Chrome扩展：如何在页面加载时修改popup中的HTML元素？

你的代码不生效的核心原因是content.js的运行时机和popup的生命周期不匹配：

• content.js在网页加载完成后立即发送消息，但此时popup大概率还没被用户打开，popup的脚本（popup.js）还未执行，消息没有对应的监听器接收。
• 当用户后续打开popup时，content.js已经发送过消息了，popup的监听器收不到之前的消息。

下面提供两种可行的实现方式：

方式1：popup打开时主动获取主题状态 #

这种方式更可靠，因为popup打开时主动去获取当前主题，不需要依赖content.js的主动推送。

步骤1：修改popup.js，打开时主动请求content.js的主题信息 #

const btn = document.getElementById("to-modify-button");

// popup打开时，向当前激活的标签页的content.js发送请求
chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
  chrome.tabs.sendMessage(tabs[0].id, {action: "getTheme"}, (response) => {
    if (response.theme === "dark") {
      btn.textContent = "Disable dark mode";
    } else {
      btn.textContent = "Enable dark mode";
    }
  });
});

// 保留原有的消息监听，用于后续主题切换的响应
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  if (request.theme) {
    btn.textContent = request.theme === "dark" ? "Disable dark mode" : "Enable dark mode";
  }
});

步骤2：修改content.js，添加接收请求的监听器 #

// 存储当前主题状态（可根据实际逻辑修改）
let currentTheme = "dark";

// 监听来自popup的请求
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "getTheme") {
    sendResponse({theme: currentTheme});
  }
});

// 示例：主题变化时主动通知popup（可选）
function updateTheme(newTheme) {
  currentTheme = newTheme;
  chrome.runtime.sendMessage({theme: newTheme});
}

方式2：利用chrome.storage共享状态 #

如果主题状态需要在扩展各组件间共享，用chrome.storage存储是更简洁的方式，popup打开时直接读取storage中的状态：

步骤1：修改content.js，将主题状态存入storage #

(() => {
  const currentTheme = "dark";
  // 将主题状态存入chrome.storage
  chrome.storage.local.set({theme: currentTheme}, () => {
    // 可选：通知popup状态更新（如果此时popup已打开）
    chrome.runtime.sendMessage({theme: currentTheme});
  });
})();

步骤2：修改popup.js，打开时读取storage并设置按钮文本 #

const btn = document.getElementById("to-modify-button");

// popup打开时读取storage中的主题状态
chrome.storage.local.get("theme", (result) => {
  const theme = result.theme || "light"; // 设置默认值
  btn.textContent = theme === "dark" ? "Disable dark mode" : "Enable dark mode";
});

// 监听storage变化，实时更新按钮文本（可选）
chrome.storage.onChanged.addListener((changes, areaName) => {
  if (areaName === "local" && changes.theme) {
    btn.textContent = changes.theme.newValue === "dark" ? "Disable dark mode" : "Enable dark mode";
  }
});

• 扩展权限：如果使用chrome.tabs.sendMessage或chrome.storage，需要在manifest.json中声明对应权限：

  {
    "permissions": ["activeTab", "storage"]
  }
  

• popup生命周期：popup在关闭后会销毁，脚本也会停止运行，所以所有状态需要通过storage或主动请求的方式获取，不能依赖popup内部的变量持久化。

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