// 安装阶段 - 只发生一次
self.addEventListener('install', event => {
  console.log('Service Worker 安装中...');
  // 跳过等待，立即激活
  event.waitUntil(
    // 预缓存关键资源
    caches.open('v1').then(cache => {
      return cache.addAll([
        '/',
        '/styles.css',
        '/app.js'
      ]);
    }).then(() => {
      // 强制进入激活状态
      return self.skipWaiting();
    })
  );
});

// 激活阶段
self.addEventListener('activate', event => {
  console.log('Service Worker 激活中...');
  event.waitUntil(
    // 清理旧缓存
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheName !== 'v1') {
            return caches.delete(cacheName);
          }
        })
      );
    }).then(() => {
      // 立即控制所有客户端
      return self.clients.claim();
    })
  );
});

// 激活后，开始处理事件
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

// ❌ 错误示例：状态会丢失
let requestCount = 0; // 每次Service Worker重启都会归零

// ✅ 正确示例：使用持久化存储
async function incrementCounter() {
  const data = await chrome.storage.local.get(['requestCount']);
  const count = (data.requestCount || 0) + 1;
  await chrome.storage.local.set({ requestCount: count });
  return count;
}

// 使用示例
chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
  if (request.type === 'TRACK_REQUEST') {
    const newCount = await incrementCounter(); // ✅ 正确的状态管理
    sendResponse({ count: newCount });
  }
});

// ❌ 错误示例：主动轮询（不会有效）
setInterval(() => {
  checkForUpdates(); // Service Worker 终止后定时器就没了
}, 60000);

// ✅ 正确示例：使用事件监听
// 1. 监听消息事件
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === 'CHECK_UPDATES') {
    checkForUpdates();
  }
});

// 2. 使用chrome.alarms（chrome会唤醒Service Worker）
chrome.alarms.create('checkUpdates', {
  periodInMinutes: 30
});

chrome.alarms.onAlarm.addListener(alarm => {
  if (alarm.name === 'checkUpdates') {
    checkForUpdates();
  }
});

// 3. 监听浏览器事件
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.url) {
    handleUrlChange(tab.url);
  }
});

// ❌ 错误示例：假设Service Worker会持续运行
function startLongRunningProcess() {
  // 这个处理如果超过30秒，可能被中断
  processLargeDataset();
}

// ✅ 正确示例：分块处理 + 状态保存
async function processLargeDatasetSafely() {
  const data = await loadData();
  const chunkSize = 100;
  
  for (let i = 0; i < data.length; i += chunkSize) {
    const chunk = data.slice(i, i + chunkSize);
    
    // 处理当前块
    await processChunk(chunk);
    
    // 保存进度
    await chrome.storage.local.set({
      processingProgress: i + chunk.length,
      lastProcessed: Date.now()
    });
    
    // 如果这是最后一块，清理进度
    if (i + chunkSize >= data.length) {
      await chrome.storage.local.remove(['processingProgress']);
    }
  }
}

// 恢复中断的任务
async function resumeInterruptedTask() {
  const state = await chrome.storage.local.get(['processingProgress']);
  if (state.processingProgress) {
    console.log('恢复任务，从进度', state.processingProgress, '继续');
    await processLargeDatasetSafely();
  }
}

// Service Worker 会在以下事件发生时启动：
// 1️⃣ 扩展安装/更新
chrome.runtime.onInstalled.addListener(details => {
  console.log('Service Worker 因扩展安装/更新而启动');
  // details.reason 可能是：
  // - 'install'     (首次安装)
  // - 'update'      (扩展更新)
  // - 'chrome_update' (浏览器更新)
  // - 'shared_module_update'
});

// 2️⃣ 监听的事件被触发时
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  console.log('Service Worker 因标签页更新而启动');
});
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  console.log('Service Worker 因收到消息而启动');
  return true; // 保持通道开放
});
chrome.runtime.onConnect.addListener(port => {
  console.log('Service Worker 因建立连接而启动');
});

// 3️⃣ 注册的定时器触发
chrome.alarms.onAlarm.addListener(alarm => {
  console.log('Service Worker 因定时器触发而启动');
});

// 创建定时器
chrome.alarms.create('dailyCheck', {
  periodInMinutes: 24 * 60  // 每天触发
});

// 4️⃣ 浏览器事件触发
chrome.webRequest.onBeforeRequest.addListener(
  details => {
    console.log('Service Worker 因网络请求而启动');
  },
  { urls: ["<all_urls>"] }
);

// 用户一天的典型使用场景：
8:00 打开浏览器 → ❌ Service Worker 未启动
8:05 点击扩展图标 → ✅ 启动（chrome.runtime.onMessage）
8:10 访问新网页 → ✅ 启动（chrome.tabs.onUpdated）
8:30 定时任务 → ✅ 启动（chrome.alarms.onAlarm）
8:35 关闭浏览器 → ❌ Service Worker 终止
14:00 重新打开浏览器 → ❌ Service Worker 未启动
14:05 收到推送 → ✅ 启动（chrome.gcm.onMessage）

// ❌ 错误：无法访问
document.getElementById('element');

// ✅ 正确：通过消息传递
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === 'UPDATE_DOM') {
    // 发送消息给content script处理
    chrome.tabs.sendMessage(sender.tab.id, {
      action: 'updateElement',
      data: request.data
    });
  }
});

// background.js
await chrome.offscreen.createDocument({
  url: 'offscreen.html',      // 离屏页面
  reasons: ['DOM_PARSER'],    // 用途说明
  justification: '解析HTML'   // 详细说明
});

// 发送任务到离屏文档
chrome.runtime.sendMessage({
  type: 'PARSE_HTML',
  html: '<p>内容</p>'
});

// 离屏文档接收处理
chrome.runtime.onMessage.addListener((request) => {
  if (request.type === 'PARSE_HTML') {
    const doc = new DOMParser().parseFromString(request.html, 'text/html');
    // 处理DOM...
  }
});

// 发送方
chrome.runtime.sendMessage(
  { 
    type: 'ACTION_TYPE',
    data: { key: 'value' }
  },
  (response) => {
    console.log('收到响应:', response);
  }
);

// 接收方（任何地方）
chrome.runtime.onMessage.addListener(
  (request, sender, sendResponse) => {
    if (request.type === 'ACTION_TYPE') {
      // 处理请求
      const result = processData(request.data);
      
      // 发送响应
      sendResponse({ success: true, data: result });
      
      // 异步响应时返回 true
      return true;
    }
  }
);

// 建立连接
const port = chrome.runtime.connect({ name: 'my-port' });

// 发送消息
port.postMessage({ action: 'doSomething' });

// 接收消息
port.onMessage.addListener((msg) => {
  console.log('收到消息:', msg);
});

// 断开连接
port.onDisconnect.addListener(() => {
  console.log('连接已断开');
});

// 所有页面监听存储变化
chrome.storage.onChanged.addListener((changes, areaName) => {
  if (areaName === 'sync' || areaName === 'local') {
    if (changes.userSettings) {
      // 用户设置更新了
      updateUI(changes.userSettings.newValue);
    }
  }
});
// Popup修改设置
chrome.storage.sync.set({ userSettings: newSettings });
// Background和Options会自动收到通知

// 创建定时器
chrome.alarms.create('periodicTask', {
  periodInMinutes: 60,  // 每小时执行一次
  delayInMinutes: 1     // 1分钟后首次执行
});

// 监听定时器触发
chrome.alarms.onAlarm.addListener((alarm) => {
  if (alarm.name === 'periodicTask') {
    console.log('执行定时任务');
    performPeriodicTask();
  }
});

// 一次性定时器
chrome.alarms.create('oneTimeTask', {
  when: Date.now() + 5000  // 5秒后执行
});

// 销毁特定的定时器
chrome.alarms.clear('callApi');
// 销毁所有定时器
chrome.alarms.clearAll();

{
  "content_scripts": [
    {
      "matches": ["https://*.example.com/*"],
      "css": ["styles.css"],
      "js": ["content.js"],
      "run_at": "document_idle", // 注入时机
      "match_about_blank": false,
      "all_frames": false
    }
  ]
}

// 在 background.js 或 popup.js 中
chrome.scripting.executeScript({
  target: { tabId: tab.id },
  files: ['content.js']
});

// content script 发送消息
window.postMessage({
  type: "FROM_CONTENT_SCRIPT",
  data: "Hello from content script"
}, "*");

// 网页监听消息
window.addEventListener("message", (event) => {
  if (event.data.type === "FROM_CONTENT_SCRIPT") {
    console.log(event.data.data);
  }
});

// 与 background script 通信
chrome.runtime.sendMessage(
  { action: "logData", data: "some data" },
  response => console.log("Response:", response)
);

// 监听来自 background 的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "updateContent") {
    // 更新页面内容
    sendResponse({ status: "updated" });
  }
});

// content-script.js
// 发送消息
chrome.runtime.sendMessage(
  {
    type: "USER_ACTION",
    data: { action: "click", element: "button" }
  },
  response => {
    // 可选的回调，处理响应
    console.log("收到响应:", response);
  }
);

// background.js
chrome.runtime.onMessage.addListener(
  (request, sender, sendResponse) => {
    console.log("收到来自 content script 的消息:", request);
    console.log("发送者信息:", sender.tab?.url);
    if (request.type === "USER_ACTION") {
      // 处理消息
      const result = processAction(request.data);
      // 发送响应
      sendResponse({ success: true, data: result });
    }
    // 返回 true 表示异步响应
    return true; 
  }
);

// content-script.js
// 建立连接
const port = chrome.runtime.connect({ 
  name: "content-script-connection" 
});
// 监听来自 background 的消息
port.onMessage.addListener(msg => {
  console.log("收到消息:", msg);
  if (msg.command === "UPDATE_UI") {
    updatePageUI(msg.data);
  }
});
// 发送消息
port.postMessage({ 
  action: "CONNECTION_READY",
  tabId: chrome.devtools.inspectedWindow.tabId 
});
// 断开连接时
port.onDisconnect.addListener(() => {
  console.log("连接已断开");
  cleanup();
});

// background.js
chrome.runtime.onConnect.addListener(port => {
  console.log("新的连接:", port.name);
  // 只处理来自 content script 的连接
  if (port.name === "content-script-connection") {
    // 监听消息
    port.onMessage.addListener(msg => {
      console.log("来自 content script:", msg);
      // 响应消息
      if (msg.action === "CONNECTION_READY") {
        port.postMessage({ 
          command: "SEND_DATA", 
          data: { config: "default" } 
        });
      }
    });
    // 主动发送消息
    setTimeout(() => {
      port.postMessage({ command: "PING" });
    }, 1000);
  }
});

// popup.js
// 获取当前标签页
chrome.tabs.query(
  { active: true, currentWindow: true },
  tabs => {
    if (tabs[0]) {
      // 发送消息到该标签页的 content script
      chrome.tabs.sendMessage(
        tabs[0].id,
        { 
          type: "FROM_POPUP", 
          data: popupData 
        },
        response => {
          console.log("Content script 响应:", response);
        }
      );
    }
  }
);

// content-script.js - 存储数据
chrome.storage.local.set(
  { pageData: { title: document.title, url: location.href } },
  () => {
    console.log("数据已保存");
  }
);
// background.js - 读取数据
chrome.storage.local.get(["pageData"], result => {
  console.log("获取的数据:", result.pageData);
});

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  // 验证发送者
  if (sender.id !== chrome.runtime.id) {
    return; // 忽略非本扩展的消息
  }
});

// 获取当前标签页
chrome.tabs.query({active: true, currentWindow: true}, tabs => {
  const currentTab = tabs[0];
});
// 获取所有标签页
chrome.tabs.query({}, tabs => {});

chrome.tabs.create({url: 'https://example.com'});

chrome.tabs.update(tabId, {active: true});

// 标签页创建
chrome.tabs.onCreated.addListener(tab => {});
// 标签页更新（URL/状态变化）
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.url) {
    console.log('URL变化:', changeInfo.url);
  }
});
// 标签页激活
chrome.tabs.onActivated.addListener(info => {});
// 标签页关闭
chrome.tabs.onRemoved.addListener(tabId => {});

// 发送消息
chrome.runtime.sendMessage({type: 'action'}, response => {});
// 接收消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  sendResponse({result: 'ok'});
  return true; // 异步响应时必需
});

// 扩展信息
const manifest = chrome.runtime.getManifest();
const id = chrome.runtime.id;
const url = chrome.runtime.getURL('page.html');

// 扩展安装/更新
chrome.runtime.onInstalled.addListener(details => {
  if (details.reason === 'install') {
    // 首次安装
  }
});

// 打开设置页
chrome.runtime.openOptionsPage();
// 获取所有打开的页面
const views = chrome.extension.getViews({type: 'popup'});

// 运行时请求权限
chrome.permissions.request({
  permissions: ['storage'],
  origins: ['https://api.example.com/*']
}, granted => {
  if (granted) {
    console.log('权限已授予');
  }
});

// 检查是否拥有权限
chrome.permissions.contains({
  permissions: ['tabs']
}, result => {
  console.log('是否有tabs权限:', result);
});

// 在background.js中
chrome.declarativeContent.onPageChanged.addRules([{
  conditions: [
    new chrome.declarativeContent.PageStateMatcher({
      pageUrl: { hostEquals: 'example.com' }
    })
  ],
  actions: [
    new chrome.declarativeContent.ShowPageAction()  // MV2
    // 或
    new chrome.declarativeContent.ShowAction()      // MV3
  ]
}]);

chrome.declarativeContent.onPageChanged.removeRules();

// 简单通知
chrome.notifications.create('notification1', {
  type: 'basic',
  iconUrl: 'icon.png',
  title: '提醒',
  message: '任务已完成',
  buttons: [{ title: '查看' }]
});

// 带进度条
chrome.notifications.create('progress', {
  type: 'progress',
  title: '下载中',
  message: '正在下载文件...',
  progress: 50  // 0-100
});

// 用户点击通知
chrome.notifications.onClicked.addListener(notificationId => {
  console.log('通知被点击:', notificationId);
});

// 用户点击按钮
chrome.notifications.onButtonClicked.addListener((notificationId, buttonIndex) => {
  console.log('按钮被点击:', buttonIndex);
});

// 创建菜单项
chrome.contextMenus.create({
  id: 'my-menu',
  title: '我的操作',
  contexts: ['selection']  // 选中文本时显示
});

// 子菜单
chrome.contextMenus.create({
  id: 'parent',
  title: '父菜单',
  contexts: ['all']
});
chrome.contextMenus.create({
  id: 'child',
  parentId: 'parent',
  title: '子菜单',
  contexts: ['all']
});

chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === 'my-menu') {
    console.log('选中的文本:', info.selectionText);
  }
});

// 监听扩展错误
chrome.runtime.onError.addListener(error => {
  console.error('扩展错误:', error);
});

// 后台服务
import { relayMessage } from "@plasmohq/messaging"
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === "GET_USER_DATA") {
    sendResponse({ user: "Plasmo User", timestamp: new Date().toISOString() })
  }
})

// 内容脚本
import { useMessage } from "@plasmohq/messaging/hook"
const ContentScript = () => {
  const { data } = useMessage(async (req, res) => {
    console.log("Received message:", req.body)
    res.send({ status: "received" })
  })
  return <div>Message data: {JSON.stringify(data)}</div>
}

// 弹出页面
import { usePort } from "@plasmohq/messaging/hook"
const Popup = () => {
  const { send, data } = usePort("popup-port")
  const handleClick = () => send({ action: "FETCH_DATA" })
  return (
    <div>
      <button onClick={handleClick}>获取数据</button>
      <div>响应数据: {JSON.stringify(data)}</div>
    </div>
  )
}

// store.ts - 状态定义
import { persistentStore } from "@plasmohq/persistent"
interface UserState {
  theme: "light" | "dark"
  notifications: boolean
}
export const userStore = persistentStore<UserState>({
  theme: "light",
  notifications: true
})

// popup.tsx - 修改状态
import { userStore } from "./store"
const ThemeToggle = () => {
  const [theme, setTheme] = userStore.useState("theme")
  return (
    <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
      Toggle {theme} theme
    </button>
  )
}

// content-script.tsx - 读取状态
import { userStore } from "./store"
userStore.watch((state) => {
  document.documentElement.dataset.theme = state.theme
})

// background.js - 监听更新事件
chrome.runtime.onUpdateAvailable.addListener(details => {
  console.log('发现新版本:', details.version);
  // 立即应用更新
  chrome.runtime.reload();
});
// 监听更新安装完成
chrome.runtime.onInstalled.addListener(details => {
  if (details.reason === 'update') {
    console.log('插件已更新至版本:', details.previousVersion, '→', chrome.runtime.getManifest().version);
  }
});

// 在popup或options页面中
function checkForUpdates() {
  chrome.runtime.requestUpdateCheck((status, details) => {
    if (status === 'update_available') {
      console.log('发现更新:', details.version);
      // 提示用户重启浏览器或重新加载插件
    } else if (status === 'no_update') {
      console.log('当前已是最新版本');
    } else if (status === 'throttled') {
      console.log('更新检查过于频繁，请稍后再试');
    }
  });
}