wxt-dev · okineadev · Feb 1, 2025 · Feb 3, 2025 · Feb 15, 2025 · Feb 15, 2025
@@ -0,0 +1,5 @@
+{
+  "extends": ".markdownlint.json",
+  "no-inline-html": false,
+  "first-line-h1": false
+}
@@ -0,0 +1,4 @@
+{
+  "default": true,
+  "line-length": false
+}
@@ -0,0 +1,17 @@
+# See https://git-scm.com/docs/gitignore#_pattern_format for more about ignoring files.
+
+# Ignore build output directories
+out
+dist
+
+# Ignore node_modules directory
+node_modules
+
+# Clone of `README.md`
+packages/wxt/README.md
+
+# Don't lint the `CHANGELOG.md` files
+CHANGELOG.md
+packages/wxt/CHANGELOG.md
+
+patches/*.md
diff --git a/docs/guide/essentials/config/entrypoint-loaders.md b/docs/guide/essentials/config/entrypoint-loaders.md
@@ -53,7 +53,7 @@ export default defineContentScript({
 });
 ```
 
-```
+```sh
 $ wxt build
 wxt build
 

@@ -4,7 +4,7 @@
 
 WXT supports [dotenv files the same way as Vite](https://vite.dev/guide/env-and-mode.html#env-files). Create any of the following files:
 
-```
+```plaintext
 .env
 .env.local
 .env.[mode]

@@ -33,7 +33,7 @@ Because hooks can be defined in multiple places, including [WXT Modules](/guide/
 
 To see the order for your project, run `wxt prepare --debug` flag and search for the "Hook execution order":
 
-```
+```plaintext
 ⚙ Hook execution order:
 ⚙   1. wxt:built-in:unimport
 ⚙   2. src/modules/auto-icons.ts
@@ -51,7 +51,9 @@ Changing execution order is simple:
      📄 0.my-module.ts
      📄 1.another-module.ts
   ```
+
 - If you need to run an NPM module after user modules, just make it a user module and prefix the filename with a number!
+
   ```ts
   // modules/2.i18n.ts
   export { default } from '@wxt-dev/i18n/module';

@@ -128,7 +128,7 @@ If a version is not present in your `package.json`, it defaults to `"0.0.0"`.
 
 WXT automatically discovers your extension's icon by looking at files in the `public/` directory:
 
-```
+```plaintext
 public/
 ├─ icon-16.png
 ├─ icon-24.png
@@ -235,6 +235,7 @@ If you want to use the `activeTab` permission or the `browser.action.onClicked`
 
 1. Delete the [Popup entrypoint](/guide/essentials/entrypoints#popup) if it exists
 2. Add the `action` key to your manifest:
+
    ```ts
    export default defineConfig({
      manifest: {

@@ -20,7 +20,7 @@ export default defineAppConfig({
 ```
 
 :::warning
-This file is committed to the repo, so don't put any secrets here. Instead, use [Environment Variables](#environment-variables)
+This file is committed to the repo, so don't put any secrets here. Instead, use [Environment Variables](#environment-variables-in-app-config).
 :::
 
 To access runtime config, WXT provides the `useAppConfig` function:

@@ -19,7 +19,7 @@ export default defineContentScript({
 
 This object is responsible for tracking whether or not the content script's context is "invalidated". Most browsers, by default, do not stop content scripts if the extension is uninstalled, updated, or disabled. When this happens, content scripts start reporting this error:
 
-```
+```plaintext
 Error: Extension context invalidated.
 ```
 
@@ -76,6 +76,7 @@ To create a standalone content script that only includes a CSS file:
 
 1. Create the CSS file: `entrypoints/example.content.css`
 2. Use the `build:manifestGenerated` hook to add the content script to the manifest:
+
    ```ts
    // wxt.config.ts
    export default defineConfig({
@@ -460,6 +461,7 @@ If you don't need to run your UI in the same frame as the content script, you ca
 WXT provides a helper function, [`createIframeUi`](/api/reference/wxt/client/functions/createIframeUi), which simplifies setting up the IFrame.
 
 1. Create an HTML page that will be loaded into your IFrame:
+
    ```html
    <!-- entrypoints/example-iframe.html -->
    <!doctype html>
@@ -474,7 +476,9 @@ WXT provides a helper function, [`createIframeUi`](/api/reference/wxt/client/fun
      </body>
    </html>
    ```
+
 1. Add the page to the manifest's `web_accessible_resources`:
+
    ```ts
    // wxt.config.ts
    export default defineConfig({
@@ -488,6 +492,7 @@ WXT provides a helper function, [`createIframeUi`](/api/reference/wxt/client/fun
      },
    });
    ```
+
 1. Create and mount the IFrame:
 
    ```ts

@@ -458,7 +458,7 @@ In Chrome, side panels use the `side_panel` API, while Firefox uses the `sidebar
 
 ### Unlisted CSS
 
-Follow Vite's guide to setup your preprocessor of choice: https://vitejs.dev/guide/features.html#css-pre-processors
+Follow Vite's guide to setup your preprocessor of choice: <https://vitejs.dev/guide/features.html#css-pre-processors>
 
 CSS entrypoints are always unlisted. To add CSS to a content script, see the [Content Script](/guide/essentials/content-scripts#css) docs.
 

@@ -9,13 +9,15 @@ This page discusses how to setup internationalization using the vanilla `browser
 ## Usage
 
 1. Add `default_locale` to your manifest:
+
    ```ts
    export default defineConfig({
      manifest: {
        default_locale: 'en',
      },
    });
    ```
+
 2. Create `messages.json` files in the `public/` directory:
 
    <!-- prettier-ignore -->
@@ -41,9 +43,11 @@ This page discusses how to setup internationalization using the vanilla `browser
    ```
 
 3. Get the translation:
+
    ```ts
    browser.i18n.getMessage('helloWorld');
    ```
+
 4. _Optional_: Add translations for extension name and description:
 
 ```json

@@ -62,6 +62,7 @@ Here are some examples:
   ```
 
 - HTML file only built for all targets other than `chrome`:
+
   ```html
   <!doctype html>
   <html lang="en">

@@ -77,4 +77,4 @@ To use a different framework, you will likely have to disable auto-imports, setu
 
 It is possible to do, but will require a bit more setup. Refer to Vitest's setup for an example of how to setup a test environment:
 
-https://github.com/wxt-dev/wxt/blob/main/packages/wxt/src/testing/wxt-vitest-plugin.ts
+<https://github.com/wxt-dev/wxt/blob/main/packages/wxt/src/testing/wxt-vitest-plugin.ts>
@@ -9,19 +9,24 @@ WXT provides a "module system" that let's you run code at different steps in the
 There are two ways to add a module to your project:
 
 1. **NPM**: install an NPM package, like [`@wxt-dev/auto-icons`](https://www.npmjs.com/package/@wxt-dev/auto-icons) and add it to your config:
+
    ```ts
    // wxt.config.ts
    export default defineConfig({
      modules: ['@wxt-dev/auto-icons'],
    });
    ```
+
    > Searching for ["wxt module"](https://www.npmjs.com/search?q=wxt%20module) on NPM is a good way to find published WXT modules.
+
 2. **Local**: add a file to your project's `modules/` directory:
-   ```
+
+   ```plaintext
    <srcDir>/
      modules/
        my-module.ts
    ```
+
    > To learn more about writing your own modules, read the [Writing Modules](/guide/essentials/wxt-modules) docs.
 
 ## Module Options

@@ -45,47 +45,63 @@ Once you've run the `dev` command, continue to [Next Steps](#next-steps)!
 
 1. Create a new project
    :::code-group
+
    ```sh [PNPM]
    cd my-project
    pnpm init
    ```
+
    ```sh [Bun]
    cd my-project
    bun init
    ```
+
    ```sh [NPM]
    cd my-project
    npm init
    ```
+
    ```sh [Yarn]
    cd my-project
    yarn init
    ```
+
    :::
+
 2. Install WXT:
    :::code-group
+
    ```sh [PNPM]
    pnpm i -D wxt
    ```
+
    ```sh [Bun]
    bun i -D wxt
    ```
+
    ```sh [NPM]
    npm i -D wxt
    ```
+
    ```sh [Yarn]
    yarn add --dev wxt
    ```
+
    :::
+
 3. Add an entrypoint, `my-project/entrypoints/background.ts`:
    :::code-group
+
    ```ts
    export default defineBackground(() => {
      console.log('Hello world!');
    });
    ```
+
    :::
+
 4. Add scripts to your `package.json`:
+
    ```json
    {
      "scripts": {
@@ -99,20 +115,26 @@ Once you've run the `dev` command, continue to [Next Steps](#next-steps)!
      }
    }
    ```
+
 5. Run your extension in dev mode
    :::code-group
+
    ```sh [PNPM]
    pnpm dev
    ```
+
    ```sh [Bun]
    bun run dev
    ```
+
    ```sh [NPM]
    npm run dev
    ```
+
    ```sh [Yarn]
    yarn dev
    ```
+
    :::
    WXT will automatically open a browser window with your extension installed.
 

@@ -1,4 +1,4 @@
-# Welcome to WXT!
+# Welcome to WXT
 
 WXT is a modern, open-source framework for building web extensions. Inspired by Nuxt, its goals are to:
 

@@ -20,13 +20,13 @@ await chrome.scripting.getRegisteredContentScripts();
 
 ## How do I disable opening the browser automatically during development?
 
-See https://wxt.dev/guide/essentials/config/browser-startup.html#disable-opening-browser
+See <https://wxt.dev/guide/essentials/config/browser-startup.html#disable-opening-browser>
 
 ## How do I stay logged into a website during development?
 
-See https://wxt.dev/guide/essentials/config/browser-startup.html#persist-data
+See <https://wxt.dev/guide/essentials/config/browser-startup.html#persist-data>
 
-## My component library doesn't work in content scripts!
+## My component library doesn't work in content scripts
 
 This is usually caused by one of two things (or both) when using `createShadowRootUi`:
 

@@ -86,7 +86,7 @@ WXT no longer ships with Common JS support. If you're using CJS, here's your mig
 1. Add [`"type": "module"`](https://nodejs.org/api/packages.html#type) to your `package.json`.
 2. Change the file extension of any `.js` files that use CJS syntax to `.cjs`, or update them to use EMS syntax.
 
-Vite also provides steps for migrating to ESM. Check them out for more details: https://vitejs.dev/guide/migration#deprecate-cjs-node-api
+Vite also provides steps for migrating to ESM. Check them out for more details: <https://vitejs.dev/guide/migration#deprecate-cjs-node-api>
 
 ## v0.18.0 &rarr; v0.18.5
 
@@ -101,12 +101,14 @@ If you already have `<srcDir>/modules` or `<srcDir>/Modules` directory, `wxt pre
 You have two options:
 
 1. [Recommended] Keep your files where they are and tell WXT to look in a different folder:
+
    ```ts
    // wxt.config.ts
    export default defineConfig({
      modulesDir: 'wxt-modules', // defaults to "modules"
    });
    ```
+
 2. Rename your `modules` directory to something else.
 
 ## v0.17.0 &rarr; v0.18.0
@@ -160,7 +162,7 @@ item.watch((newValue: number, oldValue: number) => { // [!code ++]
 
 JS entrypoints in the output directory have been moved. Unless you're doing some kind of post-build work referencing files, you don't have to make any changes.
 
-```
+```plaintext
 .output/
   <target>/
     chunks/
@@ -191,7 +193,7 @@ export default defineConfig({
 
 ### Renamed Undocumented Constants
 
-Renamed undocumented constants for detecting the build config at runtime in [#380](https://github.com/wxt-dev/wxt/pull/380). Now documented here: https://wxt.dev/guide/multiple-browsers.html#runtime
+Renamed undocumented constants for detecting the build config at runtime in [#380](https://github.com/wxt-dev/wxt/pull/380). Now documented here: <https://wxt.dev/guide/multiple-browsers.html#runtime>
 
 - `__BROWSER__` → `import.meta.env.BROWSER`
 - `__COMMAND__` → `import.meta.env.COMMAND`
@@ -218,7 +220,7 @@ Renamed undocumented constants for detecting the build config at runtime in [#38
 
 ### New `wxt/storage` APIs
 
-`wxt/storage` no longer relies on [`unstorage`](https://www.npmjs.com/package/unstorage). Some `unstorage` APIs, like `prefixStorage`, have been removed, while others, like `snapshot`, are methods on the new `storage` object. Most of the standard usage remains the same. See https://wxt.dev/guide/storage and https://wxt.dev/api/reference/wxt/storage/ for more details ([#300](https://github.com/wxt-dev/wxt/pull/300))
+`wxt/storage` no longer relies on [`unstorage`](https://www.npmjs.com/package/unstorage). Some `unstorage` APIs, like `prefixStorage`, have been removed, while others, like `snapshot`, are methods on the new `storage` object. Most of the standard usage remains the same. See <https://wxt.dev/guide/storage> and <https://wxt.dev/api/reference/wxt/storage/> for more details ([#300](https://github.com/wxt-dev/wxt/pull/300))
 
 ## v0.11.0 &rarr; v0.12.0
 
@@ -228,6 +230,7 @@ Renamed undocumented constants for detecting the build config at runtime in [#38
 
 - If you use auto-imports, no changes are required.
 - If you have disabled auto-imports, you'll need to manually update your import statements:
+
   ```ts
   import { defineBackground, defineContentScript } from 'wxt/client'; // [!code --]
   import { defineBackground, defineContentScript } from 'wxt/sandbox'; // [!code ++]
-Original file line number
+Diff line change
@@ Expand Up / @@ -53,7 +53,7 @@ export default defineContentScript({ @@
     });
     ```
-    ```
+    ```sh
     $ wxt build
     wxt build
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
Expand Up		@@ -77,4 +77,4 @@ To use a different framework, you will likely have to disable auto-imports, setu

		It is possible to do, but will require a bit more setup. Refer to Vitest's setup for an example of how to setup a test environment:

		https://github.com/wxt-dev/wxt/blob/main/packages/wxt/src/testing/wxt-vitest-plugin.ts
		<https://github.com/wxt-dev/wxt/blob/main/packages/wxt/src/testing/wxt-vitest-plugin.ts>