wxt-dev · okineadev · Feb 1, 2025
@@ -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

@@ -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.
 

@@ -20,11 +20,11 @@ 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!
 

@@ -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 ++]

@@ -77,7 +77,7 @@ features:
 
 WXT is a [MIT-licensed](https://github.com/wxt-dev/wxt/blob/main/LICENSE) open source project with its ongoing development made possible entirely by the support of these awesome backers. If you'd like to join them, please consider [sponsoring WXT's development](https://github.com/sponsors/wxt-dev).
 
-<a href="https://github.com/sponsors/wxt-dev"><img alt="WXT Sponsors" src="https://raw.githubusercontent.com/wxt-dev/static/refs/heads/main/sponsorkit/sponsors-wide.svg"></a>
+[![WXT Sponsors](https://raw.githubusercontent.com/wxt-dev/static/refs/heads/main/sponsorkit/sponsors-wide.svg)](https://github.com/sponsors/wxt-dev)
 
 ## Put <span style="color: var(--vp-c-brand-1)">Developer Experience</span> First
 

@@ -6,7 +6,7 @@
 
 1. Simple messages file format
 2. Plural form support
-3. Integrates with the [I18n Ally VS Code extension](#vscode)
+3. Integrates with the [I18n Ally VS Code extension](#vs-code)
 
 It also provides several benefits over other non-web extension specific i18n packages:
-Original file line number
+Diff line change
@@ Expand Up / @@ -62,6 +62,7 @@ Here are some examples: @@
       ```
     - HTML file only built for all targets other than `chrome`:
       ```html
       <!doctype html>
       <html lang="en">
@@ 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>