README.zh-CN.md

Your Popup (webext)

（审核中...）

English | 简体中文

Register Popup in your browser.

帮助开发人员在开发时通过弹出窗口快速调用特定函数逻辑。

前往 Chrome 商店 安装 your-popup 并查看 demo 页面。

你也可以在 release 中找到 your-pop.crx/your-pop.zip/your-popup文件下载并手动安装。

Why your-popup?

在开发复杂项目时，我需要做很多操作以复现某种特殊状态，现在我们可以将对应的逻辑写在 popup 的回调事件里以快速执行。

而 popup 插件的形式可以避免遮挡页面内容，也不会影响页面的交互。

Usage

可参考 demo 项目用法。

• 拷贝 demo/src/popup 文件夹内容
• 在项目 main 中（开发环境）引入 popup register

// main.ts
// register only when in development
if (import.meta.env.DEV) {
  import('./popup').then(({ register }) => {
    register({
      customBcId: 'custom',
    })
  })
}

customBcId 可自定义，并保持与 popup option page 中配置一致。

自定义事件

你可以在你项目的 popup/events 数组中自定义任意事件。 但请确保 key 值惟一。

import consola from 'consola'

export const events = [
  {
    key: 'echo-hello',
    title: '输出 Hello',
    callback: () => {
      consola.log('Hello')
    },
  },
  {
    key: 'echo-world',
    title: '输出 World',
    callback: () => {
      consola.log('World')
    },
  },
]

Thanks

• vitesse-webext

Pre-packed

Folders

• src - main source.
  • contentScript - scripts and components to be injected as content_script
  • background - scripts for background.
  • components - auto-imported Vue components that are shared in popup and options page.
  • styles - styles shared in popup and options page
  • assets - assets used in Vue components
  • manifest.ts - manifest for the extension.
• extension - extension package root.
  • assets - static assets (mainly for manifest.json).
  • dist - built files, also serve stub entry for Vite on development.
• scripts - development and bundling helper scripts.

Development

pnpm dev

Then load extension in browser with the extension/ folder.

# see demo
pnpm demo

Build

To build the extension, run

pnpm build
pnpm pack
# `extension.crx` or `extension.xpi` will be generated