主世界脚本设置说明.md

主世界脚本设置说明

概述

按照图片所示，我们已经设置了主世界脚本注入系统，包括：

1. 主世界脚本 (src/entrypoints/main-world.ts)
2. 内容脚本 (src/entrypoints/example.content.ts)
3. 配置文件更新 (wxt.config.ts)

文件说明

1. 主世界脚本 (main-world.ts)

// 声明全局变量类型
declare global {
  interface Window {
    isInstall: boolean
  }
}

export default defineUnlistedScript(() => {
  console.log('Hello from the main world')

  // 设置全局变量 isInstall
  window.isInstall = true
})

功能：

• 在主世界环境中运行
• 设置全局变量 window.isInstall = true
• 输出日志确认脚本已加载

2. 内容脚本 (example.content.ts)

export default defineContentScript({
  matches: ['*://*/*'],
  async main() {
    console.log('Injecting script...')
    await injectScript('main-world.js' as any, {
      keepInDom: true,
    })
    console.log('Done!')
  },
})

功能：

• 匹配所有网页 (*://*/*)
• 注入主世界脚本到页面
• 保持脚本在 DOM 中 (keepInDom: true)

3. 配置文件更新 (wxt.config.ts)

在 web_accessible_resources 中添加了 main-world.js：

web_accessible_resources: [
  {
    resources: ['/ap-panel.html', 'main-world.js'],
    matches: ['<all_urls>'],
  },
],

工作流程

1. 扩展加载时，内容脚本会在所有网页上运行
2. 内容脚本检测到页面后，注入主世界脚本
3. 主世界脚本在页面的主世界环境中执行
4. 设置全局变量 window.isInstall = true
5. 页面可以通过 window.isInstall 检测扩展是否已安装

使用方法

在网页中可以通过以下方式检测扩展是否安装：

if (window.isInstall) {
  console.log('AParty 扩展已安装')
} else {
  console.log('AParty 扩展未安装')
}

注意事项

• 主世界脚本在页面的主世界环境中运行，可以访问页面的 JavaScript 变量和函数
• 内容脚本在隔离环境中运行，通过 injectScript 将脚本注入到主世界
• keepInDom: true 确保脚本在页面导航后仍然保持
• 全局变量 isInstall 用于标识扩展已安装