{
  "manifest_version": 3,
  "name": "舰队撤退提示器",
  "version": "1.1",
  "description": "点击按钮或按快捷键，显示带有动态警告条的撤退遮罩。",
  "permissions": [ "activeTab", "scripting" ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_title": "点击切换撤退提示"
  },
  "content_scripts": [
    {
      "matches": [ "<all_urls>" ],
      "js": [ "content.js" ]
    }
  ],
  "commands": {
    "toggle-overlay": {
      "suggested_key": {
        "default": "Alt+Q",
        "mac": "Alt+Q"
      },
      "description": "切换撤退提示"
    }
  }
}

// 监听点击插件图标事件
chrome.action.onClicked.addListener((tab) => {
  sendMessageToContentScript(tab.id);
});

// 监听快捷键命令
chrome.commands.onCommand.addListener((command) => {
  if (command === "toggle-overlay") {
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      if (tabs.length > 0) {
        sendMessageToContentScript(tabs[0].id);
      }
    });
  }
});

// 封装发送消息的函数
function sendMessageToContentScript(tabId) {
  // 确保不要在 chrome:// 等系统页面运行
  if (!tabId) return;
  
  chrome.tabs.sendMessage(tabId, { action: "toggle_retreat" }).catch((error) => {
    console.log("无法发送消息，可能是该页面不支持脚本注入或页面未加载完成。");
  });
}

// 监听来自后台的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.action === "toggle_retreat") {
        toggleOverlay();
    }
});

function toggleOverlay() {
    const overlayId = "kancolle-retreat-overlay-layer";
    const existingOverlay = document.getElementById(overlayId);

    if (existingOverlay) {
        // 如果遮罩已存在，则移除（撤销）
        // 对于 Popover，通常直接 remove() 即可，或者先 hidePopover()
        existingOverlay.hidePopover(); 
        existingOverlay.remove();
    } else {
        // --- 核心修改开始 ---
        // 1. 创建 div (也可以用 dialog，但 div 配合 popover 属性更灵活)
        const overlay = document.createElement("div");
        overlay.id = overlayId;

        // 2. 启用 Popover API
        // "manual" 意味着它不会因为点击外部而自动关闭，必须手动关闭
        overlay.popover = "manual"; 

        // 3. 设置样式
        // 注意：进入 Top Layer 后，浏览器会有默认样式（如黑色边框、margin），需要重置
        overlay.style.position = "fixed"; // 即使在 Top Layer，这也确保它填满屏幕
        overlay.style.inset = "0";        // 简写，替代 top/left/right/bottom: 0
        overlay.style.width = "100vw";
        overlay.style.height = "100vh";
        overlay.style.margin = "0";       // 必须！Top Layer 元素默认居中且有 margin
        overlay.style.border = "none";    // 必须！去除默认边框
        overlay.style.padding = "0";      // 清除内边距
        overlay.style.background = "transparent"; // 背景透明，颜色由下面的样式控制
        
        // 视觉样式
        overlay.style.backdropFilter = "blur(1px)"; 
        overlay.style.display = "flex";
        overlay.style.justifyContent = "center";
        overlay.style.alignItems = "center";
        overlay.style.pointerEvents = "none"; // 允许鼠标穿透点击下面的游戏

        // 创建文字元素
        const text = document.createElement("h1");
        text.innerText = "撤 退";

        // 设置文字样式
        text.style.color = "#FFFFFF";
        text.style.fontSize = "8rem"; 
        text.style.fontWeight = "bold";
        text.style.fontFamily = "'Microsoft YaHei', sans-serif";
        text.style.textShadow = "0 0 20px rgba(212, 27, 27, 0.5)"; // 改红一点更显眼
        text.style.userSelect = "none";
        text.style.margin = "0";

        // 组装
        overlay.appendChild(text);
        
        // 4. 必须先添加到 DOM 中 (推荐直接挂载到 body)
        document.body.appendChild(overlay);

        // 5. 最后调用 showPopover() 将其推入 Top Layer
        // 这一步是关键，没有这行代码，它只是一个普通的 div
        overlay.showPopover(); 
        // --- 核心修改结束 ---
    }
}