wxt-dev / wxt Goto Github PK

View Code? Open in Web Editor NEW

2.8K 2.8K 84.0 4.68 MB

⚡ Next-gen Web Extension Framework

Home Page: https://wxt.dev

License: MIT License

TypeScript 97.62% JavaScript 0.07% CSS 1.50% HTML 0.35% Vue 0.25% Svelte 0.21%

build-tool chrome-extensions dev-server hmr wxt

wxt's People

Contributors

Stargazers

Watchers

Forkers

beanwei italodeverdade cxx100 lyhiving youminxue yuanquan8 javaliker yyyanghj aaronklinker-st mefengl bogdano2 andrewwalsh asasas234 ongnxco yunsii godrums beocaca dongnaebi jbone123 timeraa richardsonjf jansystemic lionelhorn lalomorales22 ahmed-cio rlagudals95 ookkoouu wblondel jiangxd2016 arvapps-forked-projects jskim26 coredumped7893 tsutomu-n ais1175 mubaidr youarealegend gailuns vovanduc kcmvp tigawanna phongjimmy leos qiweiii luzwales ihc523 btea malix-off taducquang pietrucci-blacher cxf481 lucadalli hipotecas qw050123 ivolimasilva guiepi kunlin812 hopeail fatihsolhan lpmvb kazoottt stylet lihqi sdvina tianguanggliu zizhengtai filefi kerasking

wxt's Issues

Unexpected property in manifest "runAt"

Use relative paths in generated tsconfig

Nuxt 3.7 updated it's typescript setup. We should do the same

nuxt/nuxt#22823

`transformManifest` hook

Sometimes you just need to modify the manifest a bit because the automatic generation is wrong for your use case. Should this lead to the creation of plugins? Not sure yet, but we can at least add a single hook.

Automate manifest icon discovery

Rather than having to add icons to your manifest by hand, WXT should look at your public directory and add them automatically.

/^icon-[0-9]+\.png$/ or /icon\/[0-9]+\.png/

Ability to exclude entrypoints from specific browser targets

Feature Request

If targeting a different browser, it can be useful to not include specific entrypoints.

JS

export default defineContentScript({
  exclude: ["safari"], // Excludes content script from safari
});

export default defineBackground({
  include: ["firefox"], // Only includes a background script for Firefox
});

// For unlisted files, we probably need to add a default export as well.
export default defineUnlistedScript({
  exclude: ["chrome", "safari"],
  main() {
    // ...
  }
});

HTML

<!doctype html>
<html lang="en">
  <head>
    <!-- Exclude this HTML page from Firefox and Safari -->
    <meta name="manifest.exclude" content="['firefox', 'safari']" />
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

CSS

Then for CSS... I don't know what to do. Ideally, you would use a content script and not have a CSS file directly, but that's not always best all the time.

Is your feature request related to a bug?

N/A

What are the alternatives?

Using transformManifest to remove the entrypoint and delete built files.

Generate Nuxt-like TSConfig path aliases

For now, just aliases for root and srcDir inside the generated .wxt/tsconfig.json file:

~~ and @@ → <root>
~ and @ → <srcDir>

For reference, here's Nuxt's aliases

    "paths": {
      "~~": [
        "."
      ],
      "~~/*": [
        "./*"
      ],
      "@@": [
        "."
      ],
      "@@/*": [
        "./*"
      ],
      "~": [
        "."
      ],
      "~/*": [
        "./*"
      ],
      "@": [
        "."
      ],
      "@/*": [
        "./*"
      ],
      "assets": [
        "assets"
      ],
      "assets/*": [
        "assets/*"
      ],
      "public": [
        "public"
      ],
      "public/*": [
        "public/*"
      ],
      "#app": [
        "../node_modules/.pnpm/[email protected]_pecvxzpudov564qe7mhak36oru/node_modules/nuxt/dist/app"
      ],
      "#app/*": [
        "../node_modules/.pnpm/[email protected]_pecvxzpudov564qe7mhak36oru/node_modules/nuxt/dist/app/*"
      ],
      "vue-demi": [
        "../node_modules/.pnpm/[email protected]_pecvxzpudov564qe7mhak36oru/node_modules/nuxt/dist/app/compat/vue-demi"
      ],
      "pinia": [
        "../node_modules/.pnpm/[email protected][email protected]/node_modules/pinia/dist/pinia"
      ],
      "#head": [
        "../node_modules/.pnpm/[email protected]_pecvxzpudov564qe7mhak36oru/node_modules/nuxt/dist/head/runtime"
      ],
      "#head/*": [
        "../node_modules/.pnpm/[email protected]_pecvxzpudov564qe7mhak36oru/node_modules/nuxt/dist/head/runtime/*"
      ],
      "#imports": [
        ".nuxt/imports"
      ],
      "#build": [
        ".nuxt"
      ],
      "#build/*": [
        ".nuxt/*"
      ],
      "#components": [
        ".nuxt/components"
      ]
    }

The .wxt/tsconfig.json file is generated in src/core/build/generateTypesDir.ts

WSL Support

WXT supports windows CMD, but not Windows Subsystem for Linux (WSL). It should also supports WSL.

Original Windows issue: #48
CMD support: #50

I don't expect to have any problems with paths like what #50 fixed, instead, it will probably be an issue with web-ext and opening the browser. Maybe everything is working fine and we can just close this issue. I haven't even tried it yet.

Reload extension when background script is changed

As far as I know, there's no way to get around doing a full reload of the extension when the background script is changed.

Maybe if we used module based service workers by default, but there's a lot of work involved in setting those up, and MV2 would be stuck with the full reload behavior, so I'm not gonna support this yet.

WXT Logo

Overview

Once created, add it to the docs website and update the wxt.svg files in the templates to the new logo (currently they're the Vite logo).

I might just reuse the webext-core logo I've already made, but if someone sees this and has an idea, I am open to suggestions.

It could be made more nuxt-like with the one green line that forms the entire logo as well. I don't want it to be too similar to the nuxt logo though lol. I am not associated with nuxt at all, and neither is this project.

A puzzle piece is the only iconography that is correlated with web extensions.

Requirements

Logo, 512x512
GitHub social preview, 1280×640
Social banner (twitter:image, og:image) , < 5MB in size
Favicon, 16x16 svg

Add tsconfig paths to `vite.resolve.alias` automatically

I added path aliases, but forgot to resolve them in vite lol. So we need to add vite-tsconfig-paths to the project.

Dev logs appear in production

Describe the bug

[wxt] ... logs appear in production, like when a content script throws an error.

Cannot use import statement outside a module

the error message:

import ReactDOM from "react-dom/client";
  ^^^^^^
SyntaxError: Cannot use import statement outside a module

content.tsx

import ReactDOM from "react-dom/client";
import Box from "../views/box";

export default defineContentScript({
  matches: ["<all_urls>"],
  runAt: "document_end",
  main() {
    const div = document.querySelector("#test-container");
    if (div) {
      ReactDOM.createRoot(div).render(<Box />);
    }
  },
});

Can you give a demo on how to mount react components in content.tsx?
I spent 2 hours and still can't get it to work, no problem with plasma!

Thanks.

Regenerate types after saving and reloading the extension

In dev mode, as you save changes, the auto-imports and other types need regenerated. So do that after we (possibly) reload part of the extension. We should do it even if we don't reload anything.

Prepare command fails when `webextension-polyfill` is a subdependency of an import

WXT 0.1.0                                                
ℹ Generating types...                      

[6:55:47 PM]  ERROR  Failed to import file: /Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/src/entrypoints/background.ts

✖ Command failed after 241 ms                         

 ERROR  This script should only be loaded in a browser extension.        

  at node_modules/.pnpm/[email protected]/node_modules/webextension-polyfill/dist/browser-polyfill.js:26:11
  at node_modules/.pnpm/[email protected]/node_modules/webextension-polyfill/dist/browser-polyfill.js:5:5
  at node_modules/.pnpm/[email protected]/node_modules/webextension-polyfill/dist/browser-polyfill.js:13:3
  at evalModule (node_modules/.pnpm/[email protected]/node_modules/jiti/dist/jiti.js:1:255106)
  at jiti (node_modules/.pnpm/[email protected]/node_modules/jiti/dist/jiti.js:1:253034)
  at node_modules/.pnpm/@[email protected]/node_modules/@webext-core/proxy-service/lib/index.cjs:54:44
  at evalModule (node_modules/.pnpm/[email protected]/node_modules/jiti/dist/jiti.js:1:255106)
  at jiti (node_modules/.pnpm/[email protected]/node_modules/jiti/dist/jiti.js:1:253034)
  at src/utils/github/api.ts:1:216
  at evalModule (node_modules/.pnpm/[email protected]/node_modules/jiti/dist/jiti.js:1:255106)
  at jiti (node_modules/.pnpm/[email protected]/node_modules/jiti/dist/jiti.js:1:253034)
  at src/utils/github/index.ts:1:413
  at evalModule (node_modules/.pnpm/[email protected]/node_modules/jiti/dist/jiti.js:1:255106)
  at jiti (node_modules/.pnpm/[email protected]/node_modules/jiti/dist/jiti.js:1:253034)
  at src/entrypoints/background.ts:5:15
  at evalModule (node_modules/.pnpm/[email protected]/node_modules/jiti/dist/jiti.js:1:255106)
  at jiti (node_modules/.pnpm/[email protected]/node_modules/jiti/dist/jiti.js:1:253034)
  at importTsFile (node_modules/.pnpm/[email protected]/node_modules/wxt/dist/cli.cjs:65:18)
  at async getBackgroundEntrypoint (node_modules/.pnpm/[email protected]/node_modules/wxt/dist/cli.cjs:865:35)
  at async node_modules/.pnpm/[email protected]/node_modules/wxt/dist/cli.cjs:778:24
  at async Promise.all (index 0)
  at async findEntrypoints (node_modules/.pnpm/[email protected]/node_modules/wxt/dist/cli.cjs:750:3)
  at async node_modules/.pnpm/[email protected]/node_modules/wxt/dist/cli.cjs:1848:23
  at async CAC.<anonymous> (node_modules/.pnpm/[email protected]/node_modules/wxt/dist/cli.cjs:1791:23)

 ELIFECYCLE  Command failed with exit code 1.

Handle adding and removing entrypoints in dev mode

Currently, if you add or remove a content script in dev mode, they aren't automatically registered or unregisterd respectively.

When we add a content script, it should be registered.
When we remove a content script, it should be unregistered.

A similar change could be done for HTML files. Remove it when the file is deleted, pre-render it when a new HTML file is added.

Add dev-only background script if no background script exists

For dev mode to function, it needs a background script to communicate with the dev server. If an extension doesn't have a background script, WXT needs to create one for dev mode.

Auto-import from subdirectories, like `utils/cache`

Provide auto-imports for `@webext-core` packages

Support sourcemaps

Make sure enabling sourcemaps in vite works.

Generate types for `browser.i18n.getMessage`

Feature Request

Similar to how types are added to browser.runtime.getURL, when using the i18n API to get a translation, it would be nice to have type safety. It should generate the types based off the manifest.default_locale. If the default locale doesn't exist, we don't generate any types.

Module augmentation for browser.runtime.getURL types are declared here:

https://github.com/aklinker1/wxt/blob/1fe4eedc9ad4597b6d6f944568ec1629a5803ebf/src/client/browser.ts#L3-L9

While type generation actually happens here:

https://github.com/aklinker1/wxt/blob/1fe4eedc9ad4597b6d6f944568ec1629a5803ebf/src/core/build/generateTypesDir.ts#L48-L85

Is your feature request related to a bug?

N/A

What are the alternatives?

It could be left up to a library, but that doesn't make much sense.

Additional context

Thought of this while working on examples/i18n. I use Vue and Vue's I18n library most of the time, so this isn't something I've thought about in the past.

In addition to the project's messages, i18n.getMessage also works with a list of predefined message keys: https://developer.chrome.com/docs/extensions/reference/i18n/#overview-predefined

`wxt submit`

Use publish-browser-extension to create the wxt submit command.

`config.runner` ignored

Describe the bug

When adding runner config to the wxt.config.ts file, it is completely ignored.

To Reproduce

Add runner.startingUrls to a project, then run wxt. Browser will not open to the url you added.

Expected behavior

It should open the starting urls and respect the other runner options.

Environment

  System:
    OS: macOS 13.4.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 2.66 GB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.1 - ~/.asdf/installs/nodejs/18.16.1/bin/node
    Yarn: 1.22.19 - ~/.asdf/installs/nodejs/18.16.1/bin/yarn
    npm: 9.5.1 - ~/.asdf/plugins/nodejs/shims/npm
    pnpm: 8.6.7 - ~/.asdf/installs/nodejs/18.16.1/bin/pnpm
  Browsers:
    Chrome: 115.0.5790.170
    Safari: 16.5.2
  npmPackages:
    wxt: ^0.3.2 => 0.3.2

Additional context

Add any other context about the problem here, otherwise you can delete this section.

Fail to find an open port

If I run two separate WXT projects, they both start on port 3000... So it's not finding an open port very well :/

I discovered this when trying to run the demo/ folder and aklinker/github-better-line-counts at the same time. Well, actually I forgot to stop the github better line counts extension, and none of my local changes to wxt were being reflected when I ran dev, because the extension was connecting to GBLC's dev server instead.

Enable extension developer setting in Chrome automatically in dev mode

Feature Request

When running wxt to develop and extension, it's really annoying to have to enable developer mode every time to inspect the different JS contexts of your extension. We should be able to enable it automatically via CLI flags? I assume the switch is just a preference that we can control via CLI flags.

Is your feature request related to a bug?

#135

What are the alternatives?

N/A

Additional context

Also a problem with Edge, so we should add the setting to edge and other chromium browsers as well. Hopefully they're all the same internal preference...

Reload extension when manifest changes

Reload and manage content scripts from background

In dev mode, content scripts are not listed in the manifest. Instead, the idea is to have the background script manage registering the scripts and styles. When they change, we don't need to reload the page or reload the extension, instead just remove the content script/styles from the background and add the new ones.

Documentation website

Use VitePress to host a documentation website at https://wxt.dev

`wxt init`

Create a command, wxt init, that initializes a starter project. Tempaltes already exist at templates/.

Debug flag

For each of the commands, they should accept a --debug flag that enables debug logs. It should also enable debug logs from Vite.

Restart browser when config is changed

In dev mode, if any of the config files (wxt.config.ts, dotenv files, or web-ext.config.ts) or their dependencies change, it should trigger the browser to close, the extension to be rebuilt from scratch, reparsing all the config, and for the browser to open again.

This will make development faster.

Add `browser` to the global scope to use from the dev console

Feature Request

During development, it can be useful to inspect storage from the CLI. Running await chrome.storage.local.get() is the usual way when using chrome. However, that's non-standard. It'd be nice if WXT added it's browser object to the window or globalThis so that we can use those APIs from the dev console instead of chrome, to match the code.

Is your feature request related to a bug?

N/A

What are the alternatives?

N/A

Additional context

N/A

Reload background service worker without reloading entire extension

From Chrome's debugging article: https://developer.chrome.com/docs/extensions/mv3/tut_debugging/

Also, if you have made changes to the service worker code, you can use the Update button and skipWaiting to apply the changes immediately.

If there's a way to do this programatically, that would be great. It means extension pages wouldn't have to be closed when changing the background.

Maybe we have access to these ServiceWorker APIs inside the background?

Bundle analysis

Provide a way to analyze the output bundle.

Test process hangs in CI

1 in every 5-6 workflow runs, the pnpm test:coverage command hangs and prevents the workflow from finishing.

Here's an example: https://github.com/aklinker1/wxt/actions/runs/5613498001/job/15209649992?pr=50

Error: Not implemented: file:// pattern matching

Describe the bug

Occurs during dev mode when using the <all_urls> matcher in a content script. Log shows up in the background, where WXT attempts to reload a tab.

This is due to @webext-core/match-patterns, will fix there

Cannot use `import.meta` to read env variables

This happened while trying to generate the types.

✖ Command failed after 555 ms                                                                                    12:56:57 PM

 ERROR  ParseError: Unexpected token                                                                              12:56:57 PM
 /Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/src/entrypoints/background.ts:24:0

Automatically stop content scripts when the context is invalidated

This is relvant to MV2 development and production builds, and is also relevant for MV3 extensions in production. When an extension updates, content scripts get left over on tabs, with an invalid context.

Support CSS Entrypoints

If any files are in the entrypoints directory that are CSS files, we should build them as well. For example, if a user wants to create an iframe and pass a styles URL into it, but not have that CSS file associated with a content script.

Don't kill the dev server when generating `.wxt` directory fails

`wxt init .` recomends to cd into the current directory

Describe the bug

When running wxt init ., the "next steps are weird:

Next steps:                                                                                                     3:22:05 PM
  1. cd                                                                                                         3:22:05 PM
  2. pnpm install

We don't have to show the first step in this case

To Reproduce

mkdir test-dir
pnpx wxt@latest init .

Expected behavior

The only next step that needs shown is pnpm i

Environment

  System:
    OS: macOS 13.4.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 4.36 GB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.1 - ~/.asdf/installs/nodejs/18.16.1/bin/node
    Yarn: 1.22.19 - ~/.asdf/installs/nodejs/18.16.1/bin/yarn
    npm: 9.5.1 - ~/.asdf/plugins/nodejs/shims/npm
    pnpm: 8.6.7 - ~/.asdf/installs/nodejs/18.16.1/bin/pnpm
  Browsers:
    Chrome: 115.0.5790.170
    Safari: 16.5.2

Reload page when HTML file is changed

Since the HTML entrypoints are pre-rendered before installing the extension in a browser, when they're changed, they need re-built. But only the page that changed needs reloaded, not the entire extension.

Open browser with extension installed during development

Vite config not typed properly

Full type error...

$ pnpm compile            

> GitHub: Better Line [email protected] compile /Users/aklinker1/Development/github.com/aklinker1/github-simple-diff
> tsc --noEmit

wxt.config.ts:15:15 - error TS2322: Type 'Plugin_2 | Plugin_2[]' is not assignable to type 'PluginOption'.
  Type 'Plugin_2' is not assignable to type 'PluginOption'.
    Type 'import("/Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/index").Plugin' is not assignable to type 'import("/Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/index").Plugin'.
      Types of property 'apply' are incompatible.
        Type '"build" | "serve" | ((this: void, config: import("/Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/index").UserConfig, env: import("/Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/node_modules/.pnpm...' is not assignable to type '"build" | "serve" | ((this: void, config: import("/Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/index").UserConfig, env: import("/Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/node_modules/.pnpm/[email protected]/node_mod...'.
          Type '(this: void, config: UserConfig, env: ConfigEnv) => boolean' is not assignable to type '"build" | "serve" | ((this: void, config: UserConfig, env: ConfigEnv) => boolean) | undefined'.
            Type '(this: void, config: import("/Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/index").UserConfig, env: import("/Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/node_modules/.pnpm/[email protected]_@types+no...' is not assignable to type '(this: void, config: import("/Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/index").UserConfig, env: import("/Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/i...'.
              Types of parameters 'config' and 'config' are incompatible.
                Type 'import("/Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/index").UserConfig' is not assignable to type 'import("/Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/index").UserConfig'.
                  Types of property 'plugins' are incompatible.
                    Type 'import("/Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/index").PluginOption[] | undefined' is not assignable to type 'import("/Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/index").PluginOption[] | undefined'.
                      Type 'import("/Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/index").PluginOption[]' is not assignable to type 'import("/Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/index").PluginOption[]'.
                        Type 'import("/Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/index").PluginOption' is not assignable to type 'import("/Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/index").PluginOption'.
                          Type 'Plugin_2' is not assignable to type 'PluginOption'.
                            Type 'import("/Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/index").Plugin' is not assignable to type 'import("/Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/index").Plugin'.
                              Types of property 'apply' are incompatible.
                                Type '"build" | "serve" | ((this: void, config: import("/Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/index").UserConfig, env: import("/Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/node_modules/.pnpm/[email protected]/node_mod...' is not assignable to type '"build" | "serve" | ((this: void, config: import("/Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/index").UserConfig, env: import("/Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/node_modules/.pnpm...'.
                                  Type '(this: void, config: UserConfig, env: ConfigEnv) => boolean' is not assignable to type '"build" | "serve" | ((this: void, config: UserConfig, env: ConfigEnv) => boolean) | undefined'.
                                    Type '(this: void, config: import("/Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/index").UserConfig, env: import("/Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/i...' is not assignable to type '(this: void, config: import("/Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/index").UserConfig, env: import("/Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/node_modules/.pnpm/[email protected]_@types+no...'.
                                      Types of parameters 'config' and 'config' are incompatible.
                                        Type 'import("/Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/index").UserConfig' is not assignable to type 'import("/Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/index").UserConfig'.
                                          Types of property 'plugins' are incompatible.
                                            Type 'import("/Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/index").PluginOption[] | undefined' is not assignable to type 'import("/Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/index").PluginOption[] | undefined'.
                                              Type 'import("/Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/index").PluginOption[]' is not assignable to type 'import("/Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/index").PluginOption[]'.
                                                Type 'import("/Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/index").PluginOption' is not assignable to type 'import("/Users/aklinker1/Development/github.com/aklinker1/github-simple-diff/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/index").PluginOption'.
                                                  Type 'PluginOption[]' is not assignable to type 'PluginOption'.

15     plugins: [Icons({ compiler: "vue3" }), Vue()],
                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~

wxt.config.ts:15:44 - error TS2322: Type 'Plugin_2' is not assignable to type 'PluginOption'.

15     plugins: [Icons({ compiler: "vue3" }), Vue()],
                                              ~~~~~


Found 2 errors in the same file, starting at: wxt.config.ts:15

Replace `web-ext`

It uses old dependencies, and has conflicting internal peer dependencies, providing a peer dependency warning on every install.

WXT only uses it to open the browser, there has to be a better alternative... We'll have to DIY it.

`wxt build` defaults mode to development

The build command should default to production.

Is it possible to add a field to disable AutoLaunch?

Why add the disableAutoLaunch field?

disableAutoLaunch: true // Do not auto-open the browser
disableAutoLaunch: false // Auto open the Browser

For example:

https://github.com/aklinker1/vite-plugin-web-extension/blob/161921596f71f760a30d18a3a355de31f2bba97e/packages/vite-plugin-web-extension/src/index.ts#L19

I set disableAutoLaunch to true and manually loaded the chrome-mv3 directory for development so that I could easily debug the background.js

Currently using WXT, and I've encountered a debugging issue: How to debug background.js?

Verify frontend frameworks work

Primary Support

These should just work... We shouldn't have to do anything to support them. You just have to add the plugin to vite.plugins.

Vue (#33, aklinker1/github-better-line-counts#18)
React (#33)
Svelte (#34)

Potential Support?

Less common, but still used frameworks. If the primarily supported frameworks work, these will likely work as well.

React + SWC
Preact
Lit
Solid
Qwik

not working for windows

wxt is a very coooool framework, thanks for your work.

Is it ready for production now? I run the templates(vue) on windows, but it NOT woking.

> wxt prepare


WXT 0.2.4                                                                                                     08:54:00
ℹ Generating types...                                                                                        08:54:00

 ERROR  defineBackground is not defined

Script entrypoints listed twice in build output

Dev

WXT 0.1.2                                                                               9:55:24 AM
✔ Started dev server @ http://localhost:3001                                            9:55:25 AM
ℹ Pre-rendering chrome-mv3 for development with Vite 4.3.9                              9:55:25 AM
✔ Built extension in 406 ms                                                             9:55:25 AM
  ├─ .output/chrome-mv3/manifest.json               792 B                               9:55:25 AM
  ├─ .output/chrome-mv3/example.html                450 B   
  ├─ .output/chrome-mv3/options.html                597 B   
  ├─ .output/chrome-mv3/popup.html                  468 B   
  ├─ .output/chrome-mv3/sandbox.html                450 B   
  ├─ .output/chrome-mv3/background.js               14.31 kB
  ├─ .output/chrome-mv3/background.js               14.31 kB
  ├─ .output/chrome-mv3/chunks/example-07899964.js  1.71 kB 
  ├─ .output/chrome-mv3/chunks/options-07899964.js  1.71 kB 
  ├─ .output/chrome-mv3/content-scripts/overlay.js  10.34 kB
  ├─ .output/chrome-mv3/content-scripts/overlay.js  10.34 kB
  ├─ .output/chrome-mv3/assets/overlay.css          25 B    
  ├─ .output/chrome-mv3/icon/128.png                12.67 kB
  ├─ .output/chrome-mv3/icon/16.png                 698 B   
  ├─ .output/chrome-mv3/icon/32.png                 1.63 kB 
  ├─ .output/chrome-mv3/icon/48.png                 2.94 kB 
  └─ .output/chrome-mv3/icon/96.png                 8.08 kB 
Σ Total size: 81.53 kB

Build

WXT 0.1.2                                                                               9:56:25 AM
ℹ Building chrome-mv3 for production with Vite 4.3.9                                    9:56:26 AM
✔ Built extension in 789 ms                                                             9:56:26 AM
  ├─ .output/chrome-mv3/manifest.json               520 B                               9:56:26 AM
  ├─ .output/chrome-mv3/example.html                297 B   
  ├─ .output/chrome-mv3/options.html                408 B   
  ├─ .output/chrome-mv3/popup.html                  301 B   
  ├─ .output/chrome-mv3/sandbox.html                297 B   
  ├─ .output/chrome-mv3/background.js               10.44 kB
  ├─ .output/chrome-mv3/background.js               10.44 kB
  ├─ .output/chrome-mv3/chunks/example-e26d7e02.js  10.44 kB
  ├─ .output/chrome-mv3/chunks/options-526ffc50.js  13.24 kB
  ├─ .output/chrome-mv3/content-scripts/overlay.js  10.34 kB
  ├─ .output/chrome-mv3/content-scripts/overlay.js  10.34 kB
  ├─ .output/chrome-mv3/assets/index-bad85938.css   34 B    
  ├─ .output/chrome-mv3/assets/overlay.css          25 B    
  ├─ .output/chrome-mv3/assets/popup-a1f3d880.css   25 B    
  ├─ .output/chrome-mv3/icon/128.png                12.67 kB
  ├─ .output/chrome-mv3/icon/16.png                 698 B   
  ├─ .output/chrome-mv3/icon/32.png                 1.63 kB 
  ├─ .output/chrome-mv3/icon/48.png                 2.94 kB 
  └─ .output/chrome-mv3/icon/96.png                 8.08 kB 
Σ Total size: 93.16 kB                                                                  9:56:26 AM
✔ Finished in 868 ms                                                                    9:56:26 AM

VSCode Debugging

We should be able to set breakpoints in our editor.

I have never setup a debugging connection like this before, I assume it's possible. web-ext uses open, which opens a debug port. Somehow we just need to tell VS Code (and other editors) what that port is? I need to research this a bit more.

wxt-dev / wxt Goto Github PK

wxt's People

Contributors

Stargazers

Watchers

Forkers

wxt's Issues

Feature Request

JS

HTML

CSS

Is your feature request related to a bug?

What are the alternatives?

Overview

Requirements

Describe the bug

Feature Request

Is your feature request related to a bug?

What are the alternatives?

Additional context

Describe the bug

To Reproduce

Expected behavior

Environment

Additional context

Feature Request

Is your feature request related to a bug?

What are the alternatives?

Additional context

Feature Request

Is your feature request related to a bug?

What are the alternatives?

Additional context

Describe the bug

Describe the bug

To Reproduce

Expected behavior

Environment

Why add the disableAutoLaunch field?

Primary Support

Potential Support?

Dev

Build

Links

Recommend Projects

Recommend Topics

Recommend Org