Chrome扩展Popup点击切换图片及向background传激活信号方法

1. Popup内书籍图片点击切换实现 #

核心逻辑就是维护一个激活状态布尔值，点击图片时翻转状态，同步替换图片资源即可，同时把弹窗尺寸设为你需要的极小值。
核心代码参考：

popup.html（弹窗结构+样式） #

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    * {margin: 0; padding: 0; box-sizing: border-box;}
    /* 自定义极小弹窗尺寸，适配你的图标大小即可 */
    body {width: 56px; height: 56px;}
    #bookIcon {width: 100%; height: 100%; cursor: pointer; user-select: none;}
  </style>
</head>
<body>
  <img id="bookIcon" src="closed-book.png" alt="状态图标">
  <script src="popup.js"></script>
</body>
</html>

popup.js（图片切换逻辑） #

const bookIcon = document.getElementById('bookIcon');
// 初始状态为未激活，展示闭合书籍
let isActive = false;

bookIcon.addEventListener('click', () => {
  // 翻转激活状态
  isActive = !isActive;
  // 切换对应状态的书籍图片
  bookIcon.src = isActive ? 'open-book.png' : 'closed-book.png';
  // 状态变更后向后台脚本发信号
  sendStateToBackground(isActive);
});

2. 向background后台传递激活信号 #

Chrome扩展提供了原生的消息通信API，直接在状态变更时调用chrome.runtime.sendMessage发送消息，后台脚本监听消息事件即可拿到激活状态，执行对应任务。

补全popup.js的通信逻辑 #

在popup.js里加发送消息的方法：

function sendStateToBackground(activeState) {
  chrome.runtime.sendMessage({
    action: 'toggleActive',
    value: activeState
  });
}

background.js（后台接收逻辑，Manifest V3 对应 Service Worker） #

// 监听来自popup的消息
chrome.runtime.onMessage.addListener((msg) => {
  if (msg.action === 'toggleActive') {
    const isActivated = msg.value;
    if (isActivated) {
      // 激活状态下要执行的目标任务写在这里
      console.log('扩展激活，执行对应逻辑');
    } else {
      // 关闭状态下的逻辑写在这里
      console.log('扩展关闭，停止对应逻辑');
    }
  }
});

必要配置检查 #

确保你的manifest.json（Manifest V3版本）对应配置正确，避免通信、弹窗加载失败：

{
  "manifest_version": 3,
  "name": "书籍状态切换扩展",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  },
  "background": {
    "service_worker": "background.js"
  },
  "permissions": [] // 根据后台实际要执行的任务，补充对应权限即可，比如操作标签页就加activeTab
}

提示：如果需要关闭弹窗后保留上次的激活状态，下次点开还是之前的打开/闭合状态，加个chrome.storage.local做本地状态持久化即可，初始化弹窗时先从存储读取上次保存的isActive值，再渲染对应图片就可以。本地图片路径要和你项目里存放的两个书籍图片路径一致，避免资源加载失败。

内容的提问来源于stack exchange，提问作者cheese-berry