xiaoluoboding / chrome-ext-mv3-starter

⚡️ Modernized Chrome Extension Manifest V3 Vite Starter Template

Modernized Chrome Extension Vite Starter

A Vite Powered Modernized Chrome Extension Manifest V3 (Chrome) Starter Template.

Page Type	Light Mode	Dark Mode
Popup Page
Options Page

Features

• ⚡️ Instant HMR - use Vite on dev (no more refresh!)
• 🥝 Vue 3 - Composition API, <script setup> syntax and more!
• 💬 Effortless communications - powered by webext-bridge and VueUse storage
• 🍃 Windi CSS - on-demand CSS utilities
• 🦾 TypeScript - type safe
• 📦 Components auto importing
• 🌟 Icons - Access to icons from any iconset directly
• 🌍 I18N ready
• 🌛 Dark Mode - support toggle dark mode
• 📃 Dynamic manifest.json with full type support

Pre-packed

WebExtension Libraries

• webextension-polyfill-ts - WebExtension browser API Polyfill with types
• webext-bridge - effortlessly communication between contexts

Vite Plugins

• vite-plugin-components - components auto import
• vite-plugin-windicss - WindiCSS support
• @intlify/vite-plugin-vue-i18n - i18n support

Vue Plugins

• vue-global-api - use Vue Composition API globally
• VueUse - collection of useful composition APIs

UI Frameworks

• Windi CSS - next generation utility-first CSS framework

Icons

• Iconify - use icons from any icon sets 🔍Icônes
• vite-plugin-icons - icons as Vue components

Coding Style

• Use Composition API with <script setup> SFC syntax
• ESLint with @antfu/eslint-config, single quotes, no semi

Dev tools

• TypeScript
• pnpm - fast, disk space efficient package manager
• tsup - Zero config TypeScript bundler powered by esbuild
• esno - TypeScript / ESNext node runtime powered by esbuild
• npm-run-all - Run multiple npm-scripts in parallel or sequential

Use the Template

GitHub Template

Create a repo from this template on GitHub.

Clone to local

If you prefer to do it manually with the cleaner git history

If you don't have pnpm installed, run: npm install -g pnpm

npx degit xiaoluoboding/chrome-ext-mv3-starter my-extension
cd my-extension
pnpm i

Usage

Folders

• src - background scripts and content scripts & frontend for the extension (popup and options).
  • manifest.ts - manifest for the extension.
• extension - extension package root, also holds assets.
• scripts - development helper scripts.

Development

pnpm dev

Then load extension in browser with the extension/ folder,

Build

To build the extension, run

pnpm build

And then pack files under extension.

Credits

This is a template derive from antfu/vitesse-webext

Who is using this template?

• chrome-web-bookmark - A Chrome extension can turn a link as a visual bookmark.

License

MIT - @xiaoluoboding

chrome-ext-mv3-starter's Issues

why there is not even a background instance when running?

it's weird that the background instance is missing! and all of manifest.json is correct.

{
  "manifest_version": 2,
  "name": "[name]",
  "version": "0.0.1",
  "description": "[description]",
  "options_ui": {
    "page": "./options/index.html",
    "open_in_tab": true
  },
  "content_scripts": [
    {
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      "js": [
        "./content/index.global.js"
      ]
    }
  ],
  "icons": {
    "16": "./assets/icon-512.png",
    "48": "./assets/icon-512.png",
    "128": "./assets/icon-512.png"
  },
  "permissions": [
    "tabs",
    "storage",
    "activeTab"
  ],
  "browser_action": {
    "default_icon": "./assets/icon-512.png",
    "default_popup": "./popup/index.html"
  },
  "background": [
    "background.js"
  ],
  "content_security_policy": "script-src-elem 'self' http://localhost:3309; object-src 'self'"
}

.

.

Optional Permissions in manifest.ts URL malformed

chrome-ext-mv3-starter/src
/manifest.ts

line 37: optional_permissions: ["*://*/*"], causes error "Permission '*://*/*' is unknown or URL pattern is malformed."

Suggested fix:
Change to: permissions: ['contextMenus', 'storage'],

Question: Why need to use Manifest V2 in dev enviroment?

[Question1] I want to confirm that why in this template we need to use Manifest V2 in dev enviroment?

Is that because Manifest V3 modified the rules on CSP(Content Security Policy), so that we no longer could use vite HRM？

[Question2] If in dev env we have to use Manifest V2 syntax, is there any good pratice to make it easy to deal with V2&V3 Chrome API？

Error with CSP

Refused to load the script 'http://localhost:3309/popup/main.ts' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Maybe you can help, where to dig in?

An error is reported after executing the pnpm dev command

When I run the npm dev command I get the following error (Missing manifest.json file):

当我运行 npm dev 命令后会出现以下错误 （缺少manifest.json文件）：

[Error: ENOENT: no such file or directory, open 'C:\Users\****\extension\dev\manifest.json'] {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'open',
  path: 'C:\\Users\\****\\extension\\dev\\manifest.json'
}
ERROR: "dev:prepare" exited with 1.

should I need additional configuration to run the project?

是否需要额外的配置来运行项目呀?

pnpm dev fail :无法加载背景脚本“background”。

Error running server

The server is starting fine and says

vite v2.9.5 dev server running at:

Local: http://localhost:3309/
Network: use --host to expose

But when I go to the page I get:

This localhost page can’t be foundNo web page was found for the web address: http://localhost:3309/
HTTP ERROR 404

On Mac - OS Monterey 12.4

Any ideas?

manifest-v3 can't load main.ts

package.josn has syntax problems in the 'window' system

Run 'yarn dev' and 'yarn build' on the mac system, and the packaged files are OK, but on the window mac system, it was not run 'mvsw-dev.ts' and 'mvsw-prod.ts'.

bundling custom .js files

Why the pnpm run dev command doesn't use rollup to bundle custom .js files added to the project?

If this is intended behaviour (not bundling in dev mode), how can I use my custom ~/options/custom.js file in options.html in dev mode?

I confirmed that build:prod work as expected (bundling).

EDIT: My problem is when i open Options in chrome extension in the console i'm getting this error:
"GET chrome-extension://omhjadppniapnjfeehfigoillobaapek/options/custom.js net::ERR_FILE_NOT_FOUND"
because it's not present in dev folder