Chrome扩展弹窗Toggle按钮功能异常，寻求技术帮助

核心问题 #

你的代码存在两个关键问题：

• 未声明management权限，导致chrome.management.setEnabled无法调用
• 将弹窗逻辑的脚本同时作为content script引入，脚本执行环境冲突

解决方案步骤 #

1. 在Manifest中添加management权限

Chrome扩展的chrome.managementAPI需要在manifest.json中明确声明权限，否则会触发权限报错。修改后的manifest.json如下：

{
  "manifest_version": 3,
  "name": "Focus",
  "version": "1.0",
  "icons": {
    "16": "icons/favicon-16x16.png",
    "36": "icons/favicon-32x32.png",
    "48": "icons/andrew.png",
    "128": "icons/andrew.png"
  },
  "description": "Focus by Tate.",
  "permissions": ["management"], // 新增权限声明
  "content_scripts": [
    {
      "matches": ["https://www.youtube.com/*", "https://signup.leagueoflegends.com/en-us/signup/redownload/*"],
      "js": ["jquery-3.6.4.min.js", "./main.js"],
      "css": ["index.css"]
    }
  ],
  "action": {
    "default_icon": {
      "16": "icons/favicon-16x16.png",
      "36": "icons/favicon-32x32.png"
    },
    "default_popup": "popup.html",
    "default_title": "A simple popup"
  }
}

2. 分离弹窗脚本与内容脚本

弹窗脚本（扩展上下文）和内容脚本（网页上下文）执行环境完全独立，不能共用同一个脚本文件。

• 新建popup.js文件，专门存放弹窗按钮的切换逻辑：

// popup.js
document.addEventListener("DOMContentLoaded", function() {
  const toggleButton = document.getElementById("XD");
  let isTurnedOn = true;

  toggleButton.addEventListener('click', function(){
    const extensionId = 'mgojbplmbhbcnefhbhoohphmppigjdco';
    if (isTurnedOn){
      chrome.management.setEnabled(extensionId, false, function() {
        console.log('Extension disabled.');
        toggleButton.textContent = 'Enable Quitter Button'; // 可选：切换按钮文本提示状态
      });
      isTurnedOn = false;
    } else {
      chrome.management.setEnabled(extensionId, true, function() {
        console.log('Extension enabled.');
        toggleButton.textContent = 'Quitter Button'; // 可选：切换按钮文本提示状态
      });
      isTurnedOn = true;
    }
  });
});

• 修改popup.html，引用新的弹窗脚本：

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <h1>Work HARDER! </h1>
        <h2>-Tate</h2>
        <button id="XD" class="button">Quitter Button</button>
        <script src="popup.js"></script> <!-- 替换为popup.js -->
    </body>
</html>

3. 清理内容脚本逻辑（可选）

如果main.js原本是为内容脚本编写的页面逻辑，保留即可；如果只是弹窗逻辑，从content_scripts的js数组中移除./main.js。

验证方法 #

1. 重新加载扩展（在chrome://extensions/页面点击扩展卡片的刷新按钮）
2. 打开弹窗，点击按钮，查看扩展控制台（右键弹窗→检查）的日志输出

内容的提问来源于stack exchange，提问作者R G Flash7755