diff --git a/docs/get-started/assets.md b/docs/get-started/assets.md index d844f994..6837c556 100644 --- a/docs/get-started/assets.md +++ b/docs/get-started/assets.md @@ -2,7 +2,7 @@ WXT has two directories for storing assets like CSS, images, or fonts. -- `/public`: Store files that will be copied into the output directory as-is +- `/public`: Store files that will be copied into the output directory as-is - `/assets`: Store files that will be processed by Vite during the build process ## `/public` Directory diff --git a/docs/get-started/compare.md b/docs/get-started/compare.md index f32ebe6b..d1a3c7a6 100644 --- a/docs/get-started/compare.md +++ b/docs/get-started/compare.md @@ -24,7 +24,7 @@ Lets compare the features of WXT vs [Plasmo](https://docs.plasmo.com/framework), | Opens browser and install extension | ✅ | ❌ | | HMR for UIs | ✅ | 🟡 React only | | Reload HTML Files on Change | ✅ | 🟡 Reloads entire extension | -| Reload Content Scripta on Change | ✅ | 🟡 Reloads entire extension | +| Reload Content Scripts on Change | ✅ | 🟡 Reloads entire extension | | Reload Background on Change | 🟡 Reloads entire extension | 🟡 Reloads entire extension | | Built-in Utils | | | | Storage | ❌ | ✅ | diff --git a/docs/get-started/configuration.md b/docs/get-started/configuration.md index 4f4ff1aa..bd8b9e20 100644 --- a/docs/get-started/configuration.md +++ b/docs/get-started/configuration.md @@ -25,7 +25,7 @@ WXT allows you to edit several directories to your liking: - `root` (default: `process.cwd()`) - Root of the WXT project - `srcDir` (default: ``) - Location of all your source code - `entrypointsDir` (default: `/entrypoints`) - Folder containing all the entrypoints. -- `publicDir` (default: `/public`) - Folder containing [public assets](/get-started/assets.md) +- `publicDir` (default: `/public`) - Folder containing [public assets](/get-started/assets.md) ### Example diff --git a/docs/get-started/entrypoints.md b/docs/get-started/entrypoints.md index d3916ce9..f45117bc 100644 --- a/docs/get-started/entrypoints.md +++ b/docs/get-started/entrypoints.md @@ -1,8 +1,8 @@ # Defining Entrypoints -An entrypoints is any HTML, JS, or CSS file that needs to be bundled and included with the extension. +An "entrypoint" is any HTML, JS, or CSS file that needs to be bundled and included with the extension. -They may or may not be listed in the extension's `manifest.json`. +Entrypoints may or may not be listed in the extension's `manifest.json`. ## `/entrypoints` Directory diff --git a/docs/guide/content-scripts.md b/docs/guide/content-scripts.md index 9b604667..dbf0ec0f 100644 --- a/docs/guide/content-scripts.md +++ b/docs/guide/content-scripts.md @@ -2,16 +2,16 @@ [Chrome Docs](https://developer.chrome.com/docs/extensions/mv3/content_scripts/) • [Firefox Docs](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts) -When creating content script entrypoints, they are automatically included in the `manifest.json` along with any CSS they import. +When creating content script entrypoints, they are automatically included in the `manifest.json` along with any CSS files they import. ## Filenames diff --git a/docs/guide/extension-apis.md b/docs/guide/extension-apis.md index a379f6f6..e5b5f64e 100644 --- a/docs/guide/extension-apis.md +++ b/docs/guide/extension-apis.md @@ -14,9 +14,11 @@ And that's it! Your extension now supports Chrome, Firefox, Safari, Edge, and ot The `browser` variable is available globally via [auto-imports](/guide/auto-imports.md), or it can be imported manually. ```ts -import browser from 'webextension-polyfill'; +import browser from 'wxt/browser'; ``` +The `wxt/browser` module exports a customized version of `webextension-polyfill`'s browser with improved typing. + ### Example Let's save the date the extension was installed. Just like `chrome`, some APIs require the permission is added to your manifest before the API is defined. Here, we need to add the `storage` permission to your manifest. @@ -51,6 +53,13 @@ Follow [Chrome's message passing guide](https://developer.chrome.com/docs/extens Here's a basic request/response example: +```ts +// popup/main.ts +const res = await browser.runtime.sendMessage('ping'); + +console.log('res'); // "pong" +``` + ```ts // background.ts export default defineBackground(() => { @@ -66,13 +75,6 @@ export default defineBackground(() => { }); ``` -```ts -// popup/main.ts -const res = await browser.runtime.sendMessage('ping'); - -console.log('res'); // "pong" -``` - There are a number of message passing libraries you can use to improve the message passing experience. Here are some that are compatible with WXT (because they are based off `webextension-polyfill` as well): diff --git a/docs/guide/manifest.md b/docs/guide/manifest.md index 24b68f4c..eac1c177 100644 --- a/docs/guide/manifest.md +++ b/docs/guide/manifest.md @@ -2,7 +2,7 @@ The manifest.json is generated at build-time based on files in your `entrypoints` directory and your `wxt.config.ts`. -## Customization +## Confiuration While entrypoints are generated and added to the manifest at build-time, you can customize or add to your `manifest.json` in the config file. @@ -47,7 +47,7 @@ The [manifest's `version` and `version_name`](https://developer.chrome.com/docs/ } ``` -### `icons` +## Icon The [manifest's `icons`](https://developer.chrome.com/docs/extensions/mv3/manifest/icons/) property needs to be set in the config file. The files should be added to WXT's [`public` directory](/get-started/assets#public-directory). @@ -74,7 +74,7 @@ export default defineConfig({ }); ``` -### Permissions +## Permissions [Permissions](https://developer.chrome.com/docs/extensions/reference/permissions/) must be listed in the manifest config. @@ -86,7 +86,7 @@ export default defineConfig({ }); ``` -### Localization +## Localization Similar to the icon, the [`_locales` directory](https://developer.chrome.com/docs/extensions/reference/i18n/) should be placed inside the the WXT's [`public` directory](/get-started/assets#public-directory). diff --git a/docs/guide/options.md b/docs/guide/options.md index 67b2b4d2..3476a17c 100644 --- a/docs/guide/options.md +++ b/docs/guide/options.md @@ -13,8 +13,6 @@ ## Definition -Plain old HTML file. - ```html diff --git a/docs/guide/popup.md b/docs/guide/popup.md index 5db380e1..769e1b6a 100644 --- a/docs/guide/popup.md +++ b/docs/guide/popup.md @@ -13,8 +13,6 @@ ## Definition -Plain old HTML file. - ```html diff --git a/docs/guide/remote-code.md b/docs/guide/remote-code.md index 06314cc4..904a5cbf 100644 --- a/docs/guide/remote-code.md +++ b/docs/guide/remote-code.md @@ -23,7 +23,7 @@ Then you can import this in your HTML files to enable Google Analytics: ```ts // popup/main.ts -import '@/utils/google-analytics'; +import '~/utils/google-analytics'; gtag('event', 'event_name', { key: 'value', diff --git a/docs/guide/unlisted-scripts.md b/docs/guide/unlisted-scripts.md index 8efa2dea..cfa97391 100644 --- a/docs/guide/unlisted-scripts.md +++ b/docs/guide/unlisted-scripts.md @@ -6,8 +6,8 @@ TypeScript files that are built, but are not included in the manifest.