Chrome扩展：点击弹窗内图标修改默认扩展图标方法咨询

第一步：修正Manifest配置 #

你当前的Manifest把popup.js放在了content_scripts里，这是错误的——content script是注入到网页中的脚本，而弹窗的脚本属于扩展自身的弹窗环境，需要移除这部分配置，修正后的Manifest如下：

{
  "manifest_version": 3,
  "name": "",
  "description": "",
  "version": "1.0.3",
  "icons": { "128": "./assets/images/logo128.png" },
  "action": {
    "default_icon": "./assets/images/logo16.png",
    "default_popup": "index.html"
  },
  "permissions": ["activeTab", "storage"]
}

第二步：修改弹窗HTML #

给每个图标添加data-icon-path属性存储对应图标的路径，方便后续JS读取，同时可给选中图标加高亮样式（可选）：

<fieldset id="settingsDialog">
        <legend id="settingsLegend" title="Settings">
          Settings
        </legend>
        <h3 id="social-media-blocker-settings-header">Choose Social Blocks Settings options.</h3>
        <h4 class="theme-settings">Appearance</h4>
        <input id="dark-mode" class="toggle" type="checkbox">   
        <label for="dark-mode"></label>
        <h4 class="extension-settings">Extension Icon</h4>
        <img class="filter-bg" src="../../assets/images/extension-icon/icon.png" data-icon-path="./assets/images/extension-icon/icon.png"/>
        <img class="filter-bg" src="../../assets/images/extension-icon/icon-2.png" data-icon-path="./assets/images/extension-icon/icon-2.png"/>
        <img class="filter-bg" src="../../assets/images/extension-icon/icon-3.png" data-icon-path="./assets/images/extension-icon/icon-3.png"/>
        <img class="filter-bg" src="../../assets/images/extension-icon/icon-4.png" data-icon-path="./assets/images/extension-icon/icon-4.png"/>
      </fieldset>

（注：如果需要支持多尺寸图标，可把data-icon-path改成对象格式，比如data-icon-path='{"16":"./path/icon16.png","32":"./path/icon32.png"}'，后续JS解析成对象即可）

第三步：编写弹窗逻辑（popup.js） #

创建popup.js文件放在index.html同级目录，然后在index.html末尾引入：

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

在popup.js中编写点击事件逻辑，同时处理图标选择的持久化：

// 页面加载时，读取存储的图标路径，设置选中状态和当前图标
document.addEventListener('DOMContentLoaded', async () => {
  const savedIcon = await chrome.storage.local.get('selectedIcon');
  if (savedIcon.selectedIcon) {
    await chrome.action.setIcon({ path: savedIcon.selectedIcon });
    // 高亮选中图标（可选）
    const selectedImg = document.querySelector(`img[data-icon-path="${savedIcon.selectedIcon}"]`);
    selectedImg && (selectedImg.style.border = '2px solid #007bff');
  }

  // 给所有图标绑定点击事件
  const iconImgs = document.querySelectorAll('.filter-bg');
  iconImgs.forEach(img => {
    img.addEventListener('click', async () => {
      const iconPath = img.dataset.iconPath;
      // 修改工具栏图标
      await chrome.action.setIcon({ path: iconPath });
      // 保存到本地存储，持久化设置
      await chrome.storage.local.set({ selectedIcon: iconPath });
      // 切换高亮状态（可选）
      iconImgs.forEach(i => i.style.border = '');
      img.style.border = '2px solid #007bff';
    });
  });
});

第四步：添加扩展启动时的图标恢复逻辑 #

为了让扩展重启或浏览器重启后保持用户选择的图标，创建service-worker.js（Manifest V3后台脚本），并在Manifest中添加配置：

{
  // ... 其他配置
  "background": {
    "service_worker": "service-worker.js"
  }
}

在service-worker.js中编写启动逻辑：

// 扩展安装、更新或浏览器启动时，恢复保存的图标
chrome.runtime.onInstalled.addListener(restoreIcon);
chrome.runtime.onStartup.addListener(restoreIcon);

async function restoreIcon() {
  const savedIcon = await chrome.storage.local.get('selectedIcon');
  savedIcon.selectedIcon && await chrome.action.setIcon({ path: savedIcon.selectedIcon });
}

这样就完成了点击弹窗图标切换扩展工具栏图标的功能，且用户的选择会被持久化保存。

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