WebExtension Vite Starter

A Vite powered WebExtension (Chrome, FireFox, etc.) starter template.

Features

• ⚡️ Instant HMR - use Vite on dev (no more refresh!)
• 🥝 Vue 3 - Composition API,

  Comments

  • Why use relative path to assets?

    I'm guessing there's a good reason as to why the following code is present:

    vite.config.js

    export const sharedConfig: UserConfig = {
        ...
        // rewrite assets to use relative path
        {
          name: 'assets-rewrite',
          enforce: 'post',
          apply: 'build',
          transformIndexHtml (html) {
            return html.replace(/"\/assets\//g, '"../assets/')
          }
        }
    }
    

    However, this is causing issues with my extension which is trying to create devtools panels. I'm pretty sure this is due to the structure of my panel, which is under src/devtools/panels/index.html, which ends up referencing dist/devtools/assets instead of dist/assets.

    Could you please share some information as to why this decision was made? Perhaps throw this rationale in the code via comments so others are made aware of it as well?

    opened by gurupras 14
  • Failed to resolve entry for package "webext-bridge".

    I added vitest/unit-test support to the base code, but when running the test command yarn test:unit I m getting error:

    Error: Failed to resolve entry for package "webext-bridge". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "webext-bridge". The package may have incorrect main/module/exports specified in its package.json.
     ❯ packageEntryFailure node_modules/vite/dist/node/chunks/dep-f5552faa.js:30629:11
     ❯ resolvePackageEntry node_modules/vite/dist/node/chunks/dep-f5552faa.js:30625:9
     ❯ tryNodeResolve node_modules/vite/dist/node/chunks/dep-f5552faa.js:30440:20
     ❯ Context.resolveId node_modules/vite/dist/node/chunks/dep-f5552faa.js:30257:28
     ❯ Object.resolveId node_modules/vite/dist/node/chunks/dep-f5552faa.js:36922:55
     ❯ processTicksAndRejections ../../../../internal/process/task_queues.js:95:5
     ❯ async TransformContext.resolve node_modules/vite/dist/node/chunks/dep-f5552faa.js:36721:23   
     ❯ async normalizeUrl node_modules/vite/dist/node/chunks/dep-f5552faa.js:73701:34
     ❯ async TransformContext.transform node_modules/vite/dist/node/chunks/dep-f5552faa.js:73843:57 
     ❯ async Object.transform node_modules/vite/dist/node/chunks/dep-f5552faa.js:36985:30
    

    Here is the stackblitz link: https://stackblitz.com/edit/github-sratr2

    opened by farazshuja 7
  • After pnpm install, it reports an error

    Describe the bug

     ERR_STREAM_PREMATURE_CLOSE  Premature close
    
    Error [ERR_STREAM_PREMATURE_CLOSE]: Premature close
        at new NodeError (internal/errors.js:322:7)
        at IncomingMessage.onclose (internal/streams/end-of-stream.js:117:38)
        at IncomingMessage.emit (events.js:400:28)
        at TLSSocket.socketCloseListener (_http_client.js:432:11)
        at TLSSocket.emit (events.js:412:35)
        at net.js:686:12
        at TCP.done (_tls_wrap.js:564:7)
    

    Reproduction

    null

    System Info

    MacOS 
    Chrome 
    `pnpm install`
    

    Used Package Manager

    pnpm

    Validations

    • [X] Follow our Code of Conduct
    • [X] Read the Contributing Guide.
    • [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
    • [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
    • [X] The provided reproduction is a minimal reproducible of the bug.

    opened by king-open 6
  • should use storage.local over window.localStorage

    Problem

    This template currently uses localStorage(1, 2).

    MDN advises against using local storage because of persistence issues:

    Although this API is similar to Window.localStorage it is recommended that you don't use Window.localStorage in extension code. Firefox will clear data stored by extensions using the localStorage API in various scenarios where users clear their browsing history and data for privacy reasons, while data saved using the storage.local API will be correctly persisted in these scenarios.

    Proposal

    Use storage.local via webextension-polyfill.

    FYI VueUse useStorage accepts a 3rd parameter to accept a StoreLike object, so perhaps a wrapper around storage.local could have been passed in. However, storage.local APIs return promises so it cannot.

    Because of storage.local's async nature, it might be best to create another composable function that returns an isLoaded state.

    opened by privatenumber 6
  • How do I use assets correctly?

    Hey! When running in dev mode, the following works:

    // Component in src/components/
    <img src="../../assets/icon.svg" />
    

    ... and using any other path here doesn't seem to work.

    But then, when running build, I get the following error:

    error during build:
    Error: Could not resolve '../../assets/icon.svg' from src/components/Tweets.vue
        at error (/Users/user/code/bugle-vue/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/shared/rollup.js:158:30)
        at ModuleLoader.handleResolveId (/Users/user/code/bugle-vue/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/shared/rollup.js:22263:24)
        at /Users/user/code/bugle-vue/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/shared/rollup.js:22257:26
     ELIFECYCLE  Command failed with exit code 1.
    ERROR: "build:web" exited with 1.
     ELIFECYCLE  Command failed with exit code 1.
    

    How do I use assets correctly?

    opened by jonasmerlin 6
  • Suggestion: content-script Support for using vue

    Currently for Content Script Using"build:js": "tsup src/background src/content --format iife --out-dir extension/dist --no-splitting" does not support inserting vue components in the page. I think many people have such a scene. Do you think is a good idea?

    pr welcome 

    opened by guowenfh 6
  • Content scripts in dev mode don't work in Firefox

    Great work on this project! But since I mainly develop in FF I thought I would mention that there is an issue specific to FF which works fine in chromium browsers. If dev mode is enabled (HMR) the content scripts don't even load in the page. Build works fine in FF. Without delete manifest.content_scripts the development mode works, but requires the extension to be reloaded manually.

    opened by caudurodev 5
  • Uncaught ReferenceError: __DEFINES__ is not defined

    I just clone the template and run 'pnpm i' and 'pnpm dev', and load the extension to chrome, but I get this error

    Uncaught ReferenceError: __DEFINES__ is not defined
    

    for the backgound script. This error introduced from this file https://github.com/vitejs/vite/blob/fa30f76e49de0ca8abd96c1fd866da0512ed29b9/packages/vite/src/client/env.ts I try to use yarn and firefox, same error.

    opened by enigmazack 5
  • Can't Inject Vue App into the Content Script

    Describe the bug

    Hi, the contentScripts inject not work when I checkout branch to refactor/mv3. But it works when I checkout branch to main. is anyone can help me? This question has been bothering me for a long time, thank you very much.

    Reproduction

    Create a repo from this template on GitHub. Clone project. checkout branch refactor/mv3. Delete pnpm-lock.yaml file. Enter pnpm i. Enter pnpm dev

    System Info

    System:
        OS: macOS 11.4
        CPU: (8) x64 Apple M1
        Memory: 15.56 MB / 16.00 GB
        Shell: 5.8 - /bin/zsh
      Binaries:
        Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
        Yarn: 1.22.18 - /usr/local/bin/yarn
        npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
      Browsers:
        Chrome: 105.0.5195.102
        Firefox: 96.0
        Safari: 14.1.1
    

    Used Package Manager

    pnpm

    Validations

    • [X] Follow our Code of Conduct
    • [X] Read the Contributing Guide.
    • [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
    • [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
    • [X] The provided reproduction is a minimal reproducible of the bug.

    opened by flashclub 4
  • pnpm install fails

    I have installed the template using the following commands:

    npx degit antfu/vitesse-webext my-webext
    cd my-webext
    pnpm i
    

    The pnpm i fails with the following error.

     WARN  GET https://registry.npmjs.org/esbuild-windows-64/download/esbuild-windows-64-0.13.3.tgz error (ERR_PNPM_FETCH_404). Will retry in 10 seconds. 2 retries left.
     WARN  GET https://registry.npmjs.org/esbuild-windows-64/download/esbuild-windows-64-0.13.3.tgz error (ERR_PNPM_FETCH_404). Will retry in 1 minute. 1 retries left.
    Progress: resolved 761, reused 758, downloaded 0, added 0, done
     ENOENT  ENOENT: no such file or directory, open 'C:\development\projects\vonster-webext\node_modules\.pnpm\[email protected]\node_modules\esbuild-windows-64\package.json'
    
    I then tried the default Vitesse template, which worked fine.
    

    opened by TonyThorne 4
  • How to serve assets?

    Currently I have an error: Failed to load resource: net::ERR_FILE_NOT_FOUND when trying to include image like in this doc https://vitejs.dev/guide/assets.html

    How you include assets in your extensions?

    opened by dragoonzx 4
  • branch: refactor/mv3 use tsx

    Describe the bug

    

    Reproduction

    file path：vitesse-webext/src/popup/Popup.vue

    update script lang

    <script setup lang="tsx">
    import { storageDemo } from '~/logic/storage'
    
    function openOptionsPage() {
      browser.runtime.openOptionsPage()
    }
    </script>
    

    System Info

    System:
        OS: macOS 11.7.1
        CPU: (8) arm64 Apple M1
        Memory: 103.06 MB / 16.00 GB
        Shell: 5.8 - /bin/zsh
      Binaries:
        Node: 16.14.0 - /usr/local/bin/node
        Yarn: 1.22.5 - ~/.yarn/bin/yarn
        npm: 8.3.1 - /usr/local/bin/npm
      Browsers:
        Chrome: 108.0.5359.124
        Edge: 103.0.1264.71
        Firefox: 106.0
        Safari: 14.1.2
    

    Used Package Manager

    pnpm

    Validations

    • [X] Follow our Code of Conduct
    • [X] Read the Contributing Guide.
    • [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
    • [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
    • [X] The provided reproduction is a minimal reproducible of the bug.

    opened by xlzy520 2
  • Storage reactivity

    Describe the bug

    Open the option page and the popup, then try to change storageDemo value in the option page, it should change in the popup in realtime. It's not easy to see because the popup close when you activate the option page. With firefox, you can toggle the Disable popup auto-hide option to see it in action. It's particularly relevant with the opposite ; changing storageDemo in the popup.

    Furthermore, add this in the background :

    import { storageDemo } from '~/logic/storage'
    
    watch(storageDemo, (val) => {
      console.log('storageDemo', storageDemo)
    }, { immediate: true })
    

    We can see that it's also not reactive in the background.

    I know this issue #55, but the background, option page and popup «live» in the same context, not the contentScripts. The storage should be reactive between background, option page and popup.

    Edit: I add this code below to the reproduction branch.

    ---

    You can try with vueuse useStorage by inserting this code in those three parts of the extension :

    import { useStorage } from '@vueuse/core'
    const localstorageDemo = useStorage('localstorageDemo', 'localstorage')
    watch(localstorageDemo, (val) => {
      console.log(val)
    }, { immediate: true })
    

    And add an input in the popup to edit the value :

    <input v-model="storageDemo" class="border border-gray-400 rounded px-2 py-1 mt-2">
    

    The reactivity works through the local storage reactivity provided by useStorage.

    Reproduction

    https://github.com/ManUtopiK/vitesse-webext/tree/storageReactivityIssue

    System Info

    System:
        OS: Linux 5.15 Manjaro Linux
        CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
        Memory: 7.31 GB / 31.14 GB
        Container: Yes
        Shell: 5.9 - /bin/zsh
      Binaries:
        Node: 18.3.0 - ~/.nvm/versions/node/v18.3.0/bin/node
        Yarn: 1.22.19 - /usr/bin/yarn
        npm: 8.11.0 - ~/.nvm/versions/node/v18.3.0/bin/npm
      Browsers:
        Chromium: 107.0.5304.121
        Firefox: 107.0
    

    Used Package Manager

    pnpm

    Validations

    • [X] Follow our Code of Conduct
    • [X] Read the Contributing Guide.
    • [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
    • [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
    • [X] The provided reproduction is a minimal reproducible of the bug.

    opened by ManUtopiK 1
  • some problems about branch:refactor/mv3 until 2022/11/22

    Describe the bug

    some problems about branch:refactor/mv3 until 2022/11/22

    I downloaded the latest source code:

    ❯ npx degit antfu/vitesse-webext#refactor/mv3 [email protected]_mv3_202211
    

    problem 1

    there is a ERR_PNPM_FETCH_404 error when using pnpm to install.

    ❯ pnpm i
    Lockfile is up-to-date, resolution step is skipped
    Packages: +893
    ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
     WARN  GET https://registry.npmjs.org/@nodelib/fs.scandir/-/@nodelib/fs.scandir-2.1.5.tgz error (ERR_PNPM_FETCH_404). Will retry in 10 seconds. 2 retries left.
     WARN  GET https://registry.npmjs.org/@nodelib/fs.scandir/-/@nodelib/fs.scandir-2.1.5.tgz error (ERR_PNPM_FETCH_404). Will retry in 1 minute. 1 retries left.
     ERR_PNPM_FETCH_404  GET https://registry.npmjs.org/@nodelib/fs.scandir/-/@nodelib/fs.scandir-2.1.5.tgz: Not Found - 404
    
    No authorization header was set for the request.
    Progress: resolved 893, reused 891, downloaded 0, added 0
    

    but it's normal if turn to yarn.

    problem 2

    scripts/client.tsline:12

    const socketHost = `localhost:3303`
    

    the socket port is hardcoded, so If the port is set by env variables, the follwoing error would occur:

    client.ts:26 
            
           WebSocket connection to 'ws://localhost:3303/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
    

    problem3

    HMR is not stable, sometimes the changed reflected immediately, but sometimes, the changes can't be rendered in time. especially when continuously change the code. I haven't found what's the problem is. @tmkx

    Reproduction

    reproduction

    System Info

    System:
        OS: Linux 5.15 Ubuntu 20.04.4 LTS (Focal Fossa)
        CPU: (8) x64 Intel Core Processor (Haswell, no TSX, IBRS)
        Memory: 25.33 GB / 31.35 GB
        Container: Yes
        Shell: 5.8 - /usr/bin/zsh
      Binaries:
        Node: 18.12.0 - ~/.nvm/versions/node/v18.12.0/bin/node
        Yarn: 1.22.19 - ~/.nvm/versions/node/v18.12.0/bin/yarn
        npm: 8.19.2 - ~/.nvm/versions/node/v18.12.0/bin/npm
      Browsers:
        Chrome: 103.0.5060.53
        Firefox: 105.0
    

    Used Package Manager

    yarn

    Validations

    • [X] Follow our Code of Conduct
    • [X] Read the Contributing Guide.
    • [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
    • [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
    • [X] The provided reproduction is a minimal reproducible of the bug.

    opened by heavenkiller2018 23
  • process is not defined in content script

    Describe the bug

    The build is successful, everything works fine except for the content script. However, it shows an error Uncaught ReferenceError: process is not defined on development mode running pnpm run dev.

    Here's the stack trace on the page of the built extension.

    

    Reproduction

    Build the newly cloned repo and check the content script

    System Info

    System:
        OS: Linux 5.15 Ubuntu 20.04.5 LTS (Focal Fossa)
        CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
        Memory: 3.52 GB / 7.66 GB
        Container: Yes
        Shell: 5.8 - /usr/bin/zsh
      Binaries:
        Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node
        npm: 6.14.13 - ~/.nvm/versions/node/v14.17.0/bin/npm
      Browsers:
        Brave Browser: 106.1.44.112
        Chrome: 106.0.5249.119
        Firefox: 105.0
    

    Used Package Manager

    pnpm

    Validations

    • [X] Follow our Code of Conduct
    • [X] Read the Contributing Guide.
    • [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
    • [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
    • [X] The provided reproduction is a minimal reproducible of the bug.

    opened by chan-dev 8
  • As it is, it is impossible to make content_script work

    Describe the bug

    Apparently, unocss is crashing the project and the background and content_script are not working. By commenting on the references to unocss, I can get the project to work

    Reproduction

    Restart from scratch on firefox

    System Info

    System:
        OS: macOS 12.6
        CPU: (4) x64 Intel(R) Core(TM) i7-6567U CPU @ 3.30GHz
        Memory: 47.89 MB / 16.00 GB
        Shell: 5.8.1 - /bin/zsh
      Binaries:
        Node: 18.10.0 - /usr/local/bin/node
        Yarn: 1.22.10 - /usr/local/bin/yarn
        npm: 8.19.2 - /usr/local/bin/npm
      Browsers:
        Brave Browser: 103.1.40.107
        Chrome: 106.0.5249.119
        Firefox: 105.0.3
        Safari: 16.0
        Safari Technology Preview: 16.0
    

    Used Package Manager

    pnpm

    Validations

    • [X] Follow our Code of Conduct
    • [X] Read the Contributing Guide.
    • [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
    • [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
    • [X] The provided reproduction is a minimal reproducible of the bug.

    opened by bazalp 1
  • Uncaught SyntaxError: Cannot use import statement outside a module

    Hi,

    I'm getting the error 'Uncaught SyntaxError: Cannot use import statement outside a module' when importing axios in background.ts and could not find the way to fix it.

    I also tried add axios in AutoImport configuration like this: 'axios': [['default', 'axios'], as described in unplugin-auto-import documentation, but without success. In this case axios is just undefined.

    Could you please give any tip or example how to solve this problem? Any help would be much appreciated.

    opened by Gujionsen 1