Your Popup (webext)

（Under review...）

English | 简体中文

Register Popup in your browser.

Helps developers to quickly invoke logic through popup when they were developing.

Install your-popup and see this demo page.

You can also download the your-popup.crx/your-popup.zip/your-popup.xpi file in the release and install it manually.

Why your-popup?

When developing complex projects, I need to do a lot of things to reproduce a particular state, and now we can write the corresponding logic in a popup callback event for quick execution.

The form of the popup plug-in can avoid blocking the content of the page and does not affect the interaction of the page.

Usage

For details, see demo project usage.

• Copy the contents of the demo/src/popup folder
• Introduce popup register in project main.ts (development environment)

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

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

Custom Events

You can customize any event in your project's src/popup/events array. But make sure the key value is unique.

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