From af4105f5c13c2c29b22a4eb0f649538ea929b206 Mon Sep 17 00:00:00 2001 From: Cezar Augusto Date: Mon, 4 Nov 2024 16:18:04 -0300 Subject: [PATCH] Update several links and pages --- docs/en/docs/browsers/_meta.json | 12 +- .../browsers/{flags.mdx => browser-flags.mdx} | 2 +- ...references.mdx => browser-preferences.mdx} | 2 +- .../{profile.mdx => browser-profile.mdx} | 0 .../{available.mdx => browsers-available.mdx} | 4 +- ...pported.mdx => running-other-browsers.mdx} | 26 +- docs/en/docs/commands/build.mdx | 2 +- docs/en/docs/commands/create.mdx | 2 +- docs/en/docs/commands/dev.mdx | 8 +- docs/en/docs/commands/preview.mdx | 6 +- docs/en/docs/development/manifest-json.mdx | 2 +- .../development/web_accessible_resources.mdx | 293 +++++++++--------- docs/en/docs/features/_meta.json | 4 +- ...fields.mdx => browser-specific-fields.mdx} | 2 +- .../features/cross-browser-compatibility.mdx | 4 +- .../docs/features/environment-variables.mdx | 2 +- .../docs/features/extension-configuration.mdx | 2 +- ...r-builds.mdx => multi-platform-builds.mdx} | 4 +- .../docs/features/webpack-configuration.mdx | 2 +- 19 files changed, 196 insertions(+), 183 deletions(-) rename docs/en/docs/browsers/{flags.mdx => browser-flags.mdx} (98%) rename docs/en/docs/browsers/{preferences.mdx => browser-preferences.mdx} (97%) rename docs/en/docs/browsers/{profile.mdx => browser-profile.mdx} (100%) rename docs/en/docs/browsers/{available.mdx => browsers-available.mdx} (92%) rename docs/en/docs/browsers/{unsupported.mdx => running-other-browsers.mdx} (66%) rename docs/en/docs/features/{browser-fields.mdx => browser-specific-fields.mdx} (96%) rename docs/en/docs/features/{cross-browser-builds.mdx => multi-platform-builds.mdx} (96%) diff --git a/docs/en/docs/browsers/_meta.json b/docs/en/docs/browsers/_meta.json index 4bdc9e8..f1305d9 100644 --- a/docs/en/docs/browsers/_meta.json +++ b/docs/en/docs/browsers/_meta.json @@ -1,22 +1,22 @@ [ { - "name": "available", + "name": "browsers-available", "label": "Browsers Available" }, { - "name": "preferences", + "name": "browser-preferences", "label": "Browser Preferences" }, { - "name": "flags", + "name": "browser-flags", "label": "Browser Flags" }, { - "name": "profile", + "name": "browser-profile", "label": "Browser Profile" }, { - "name": "unsupported", - "label": "Running Browsers From Binary" + "name": "running-other-browsers", + "label": "Running Other Browsers" } ] diff --git a/docs/en/docs/browsers/flags.mdx b/docs/en/docs/browsers/browser-flags.mdx similarity index 98% rename from docs/en/docs/browsers/flags.mdx rename to docs/en/docs/browsers/browser-flags.mdx index a1fce41..6bcb2dc 100644 --- a/docs/en/docs/browsers/flags.mdx +++ b/docs/en/docs/browsers/browser-flags.mdx @@ -60,5 +60,5 @@ If your target browser is not listed here, it may not have publicly disclosed it ## Next Steps -- Learn more about [Browser Preferences](./preferences.mdx). +- Learn more about [Browser Preferences](./browser-preferences.mdx). - Explore [Browser-Specific Environment Files](../features/environment-variables.mdx). diff --git a/docs/en/docs/browsers/preferences.mdx b/docs/en/docs/browsers/browser-preferences.mdx similarity index 97% rename from docs/en/docs/browsers/preferences.mdx rename to docs/en/docs/browsers/browser-preferences.mdx index efc928b..e7b019a 100644 --- a/docs/en/docs/browsers/preferences.mdx +++ b/docs/en/docs/browsers/browser-preferences.mdx @@ -87,4 +87,4 @@ For a comprehensive list of available Firefox preferences, you can explore the [ ## Next Steps - Learn more about [browser-specific environment files](../features/environment-variables.mdx). -- Explore how to [configure other browser preferences](./available.mdx). +- Explore how to [configure other browser preferences](./browsers-available.mdx). diff --git a/docs/en/docs/browsers/profile.mdx b/docs/en/docs/browsers/browser-profile.mdx similarity index 100% rename from docs/en/docs/browsers/profile.mdx rename to docs/en/docs/browsers/browser-profile.mdx diff --git a/docs/en/docs/browsers/available.mdx b/docs/en/docs/browsers/browsers-available.mdx similarity index 92% rename from docs/en/docs/browsers/available.mdx rename to docs/en/docs/browsers/browsers-available.mdx index 0eb891b..a10edb1 100644 --- a/docs/en/docs/browsers/available.mdx +++ b/docs/en/docs/browsers/browsers-available.mdx @@ -34,5 +34,5 @@ Any browser based on the Chromium engine (e.g., Brave or Opera) is supported wit ## Next Steps -- [Customize your browser configuration](./flags.mdx) using the `--browser-args` flag. -- [Learn more about unsupported browsers](./unsupported.mdx) and how to run your extension on them. +- [Customize your browser configuration](./browser-flags.mdx) using the `--browser-args` flag. +- [Learn more about unsupported browsers](./running-other-browsers.mdx) and how to run your extension on them. diff --git a/docs/en/docs/browsers/unsupported.mdx b/docs/en/docs/browsers/running-other-browsers.mdx similarity index 66% rename from docs/en/docs/browsers/unsupported.mdx rename to docs/en/docs/browsers/running-other-browsers.mdx index cd66dca..5bf030b 100644 --- a/docs/en/docs/browsers/unsupported.mdx +++ b/docs/en/docs/browsers/running-other-browsers.mdx @@ -2,15 +2,15 @@ import { AvatarBrowsers } from "../../../../theme/components/avatar-group/browse -# Running Browsers From Binary +# Running Other Browsers From Binary Path > **Warning**: This feature is a work in progress and may be incomplete or subject to change. If you see an error or something that could be improved, please make a pull request. The link that documents this feature can be found at the bottom of the page. -While Extension.js natively supports browsers like Chrome, Edge, and Firefox, you can also run unsupported browsers by specifying the path to the browser binary using the `--chromiumBinary` or `--geckoBinary` flags. Additionally, you can add custom binary paths via the `extension.config.js` file for persistent configuration across runs. +While Extension.js natively supports browsers like Chrome, Edge, and Firefox, you can also run unsupported browsers by specifying the path to the browser binary using the `--chromium-binary` or `--gecko-binary` flags. Additionally, you can add custom binary paths via the `extension.config.js` file for persistent configuration across runs. ## How Does It Work? -If you need to run a browser that is not fully supported by Extension.js, you can specify the path to a custom browser binary using the `--chromiumBinary` or `--geckoBinary` flags. Extension.js will launch the specified browser binary with your extension loaded, allowing you to test your extension in a custom browser environment. +If you need to run a browser that is not fully supported by Extension.js, you can specify the path to a custom browser binary using the `--chromium-binary` or `--gecko-binary` flags. Extension.js will launch the specified browser binary with your extension loaded, allowing you to test your extension in a custom browser environment. **Example Using CLI Flags:** @@ -45,20 +45,20 @@ In these scenarios, the browser specified in the `--chromiumBinary` or `--geckoB Here is a short list of browsers you can run using these binary flags, along with their official websites for reference: -| **Browser Name** | **Type** | **CLI Flag** | **Official Website** | -| ----------------------------- | ---------------------- | ------------------ | --------------------------------------------------------- | -| **Brave** | Chromium-Based Browser | `--chromiumBinary` | [brave.com](https://brave.com) | -| **Opera** | Chromium-Based Browser | `--chromiumBinary` | [opera.com](https://www.opera.com) | -| **Vivaldi** | Chromium-Based Browser | `--chromiumBinary` | [vivaldi.com](https://vivaldi.com) | -| **Waterfox** | Gecko-Based Browser | `--geckoBinary` | [waterfox.net](https://www.waterfox.net) | -| **Firefox Developer Edition** | Gecko-Based Browser | `--geckoBinary` | [firefox.com](https://www.mozilla.org/firefox/developer/) | +| **Browser Name** | **Type** | **CLI Flag** | **Official Website** | +| ----------------------------- | ---------------------- | ------------------- | --------------------------------------------------------- | +| **Brave** | Chromium-Based Browser | `--chromium-binary` | [brave.com](https://brave.com) | +| **Opera** | Chromium-Based Browser | `--chromium-binary` | [opera.com](https://www.opera.com) | +| **Vivaldi** | Chromium-Based Browser | `--chromium-binary` | [vivaldi.com](https://vivaldi.com) | +| **Waterfox** | Gecko-Based Browser | `--gecko-binary` | [waterfox.net](https://www.waterfox.net) | +| **Firefox Developer Edition** | Gecko-Based Browser | `--gecko-binary` | [firefox.com](https://www.mozilla.org/firefox/developer/) | ## Example Configuration -Below is an example configuration using the `--geckoBinary` flag to run a custom Firefox instance with specific preferences and flags: +Below is an example configuration using the `--gecko-binary` flag to run a custom Firefox instance with specific preferences and flags: ```bash -extension dev --geckoBinary=/path/to/custom-firefox --profile=/path/to/firefox/profile +extension dev --gecko-binary=/path/to/custom-firefox --profile=/path/to/firefox/profile ``` Or via `extension.config.js`: @@ -87,4 +87,4 @@ module.exports = { ## Next Steps -- Check out the [browser preferences](./preferences.mdx) to further configure your environment. +- Check out the [browser preferences](./browser-preferences.mdx) to further configure your environment. diff --git a/docs/en/docs/commands/build.mdx b/docs/en/docs/commands/build.mdx index d9455d5..73ef8eb 100644 --- a/docs/en/docs/commands/build.mdx +++ b/docs/en/docs/commands/build.mdx @@ -117,4 +117,4 @@ In this example, the build targets all supported browsers and includes polyfills ## Next Steps - Use the `extension.config.js` file to [configure your extension](https://github.com/extension-js/extension.js/tree/main/examples). -- Learn more about the [browsers available](../browsers/available.mdx). +- Learn more about the [browsers available](../browsers/browsers-available.mdx). diff --git a/docs/en/docs/commands/create.mdx b/docs/en/docs/commands/create.mdx index 3cbb9c6..8b83faf 100644 --- a/docs/en/docs/commands/create.mdx +++ b/docs/en/docs/commands/create.mdx @@ -99,4 +99,4 @@ This command creates a new extension named my-new-extension using the React temp ## Next Steps - Learn how to [develop](/docs/commands/dev) your extension. -- Use the `extension.config.js` file to [configure your extension](../features/config.mdx). +- Use the `extension.config.js` file to [configure your extension](../features/extension-configuration.mdx). diff --git a/docs/en/docs/commands/dev.mdx b/docs/en/docs/commands/dev.mdx index ce178c0..accd10f 100644 --- a/docs/en/docs/commands/dev.mdx +++ b/docs/en/docs/commands/dev.mdx @@ -52,8 +52,8 @@ Below is a breakdown of the available flags for the `dev` command: | `--polyfill` | Boolean | Enables compatibility for the `browser.*` API in Chromium-based browsers | `false` | | `--profile` | Profile path | Specifies a path to a browser profile for testing | `default` | | `-b, --browser` | Browser to run the extension | Specifies the browser to run (`chrome`, `edge`, `firefox`, `all`) | `"chrome"` | -| `--chromium-binary` | Path to the Chromium binary | Provides the path to a custom Chromium-based browser binary [Read more](../browsers/unsupported.mdx) | `undefined` | -| `--gecko-binary` | Path to the Gecko binary | Provides the path to a custom Gecko-based browser binary [Read more](../browsers/unsupported.mdx) | `undefined` | +| `--chromium-binary` | Path to the Chromium binary | Provides the path to a custom Chromium-based browser binary [Read more](../browsers/running-other-browsers.mdx) | `undefined` | +| `--gecko-binary` | Path to the Gecko binary | Provides the path to a custom Gecko-based browser binary [Read more](../browsers/running-other-browsers.mdx) | `undefined` | | `--starting-url` | URL | Starting URL for testing with the extension | `chrome://newtab` | | `--open` | Boolean | Whether or not to automatically open the browser upon starting dev | `true` | @@ -127,5 +127,5 @@ Below is a breakdown of the available flags for the `dev` command: ## Next Steps - Once development is complete, it's time to [build your extension](/docs/commands/build). -- Learn how to create features specific to a browser with the [browser-specific manifest fields](/docs/features/browser-fields). -- Use the `extension.config.js` file to [configure your extension](/docs/features/config). +- Learn how to create features specific to a browser with the [browser-specific manifest fields](/docs/features/browser-specific-fields). +- Use the `extension.config.js` file to [configure your extension](/docs/features/extension-configuration). diff --git a/docs/en/docs/commands/preview.mdx b/docs/en/docs/commands/preview.mdx index 1ee1ce0..b80a65b 100644 --- a/docs/en/docs/commands/preview.mdx +++ b/docs/en/docs/commands/preview.mdx @@ -45,8 +45,8 @@ In this example, the extension is created in the `path/to/my-extension` director | [path or url] | The extension path or the remote extension URL | If a path is defined, previews the local extension. If a URL is provided, pulls the extension from remote source and previews it as a local extension | `process.cwd()` | | `--profile` | Profile path | Specifies a path to a browser profile for testing | `default` | | `-b, --browser` | Browser to run the extension | Specifies the browser to run (`chrome`, `edge`, `firefox`, `all`) | `"chrome"` | -| `--chromium-binary` | Path to the Chromium binary | Provides the path to a custom Chromium-based browser binary [Read more](../browsers/unsupported.mdx) | `undefined` | -| `--gecko-binary` | Path to the Gecko binary | Provides the path to a custom Gecko-based browser binary [Read more](../browsers/unsupported.mdx) | `undefined` | +| `--chromium-binary` | Path to the Chromium binary | Provides the path to a custom Chromium-based browser binary [Read more](../browsers/running-other-browsers.mdx) | `undefined` | +| `--gecko-binary` | Path to the Gecko binary | Provides the path to a custom Gecko-based browser binary [Read more](../browsers/running-other-browsers.mdx) | `undefined` | | `--starting-url` | URL | Starting URL for testing with the extension | `chrome://newtab` | ## Examples @@ -95,4 +95,4 @@ In this example, the extension is created in the `path/to/my-extension` director ## Next Steps - Learn how to [build](/docs/commands/build) your extension. -- Use the `extension.config.js` file to [configure your extension](/docs/features/config). +- Use the `extension.config.js` file to [configure your extension](/docs/features/extension-configuration). diff --git a/docs/en/docs/development/manifest-json.mdx b/docs/en/docs/development/manifest-json.mdx index 75ebd84..cf6c489 100644 --- a/docs/en/docs/development/manifest-json.mdx +++ b/docs/en/docs/development/manifest-json.mdx @@ -55,5 +55,5 @@ When developing cross-browser extensions, it's important to account for minor di ## Next Steps -- Learn how Extension.js handles [Manifest Compatibility](../features/browser-fields.mdx) to avoid browser-specific issues. +- Learn how Extension.js handles [Manifest Compatibility](../features/browser-specific-fields.mdx) to avoid browser-specific issues. - Explore how Extension.js works with [Special Folders](../features/special-folders.mdx) to handle additional HTML, scripts, and assets in your project. diff --git a/docs/en/docs/development/web_accessible_resources.mdx b/docs/en/docs/development/web_accessible_resources.mdx index 67a4aa4..19b1cad 100644 --- a/docs/en/docs/development/web_accessible_resources.mdx +++ b/docs/en/docs/development/web_accessible_resources.mdx @@ -1,166 +1,179 @@ +import { PackageManagerTabs } from "@theme"; import { AvatarImage } from "../../../../theme/components/avatar-image"; -# Extension Config File (`extension.config.js`) - -> **Warning**: This feature is a work in progress and may be incomplete or subject to change. -> If you see an error or something that could be improved, please make a pull-request. -> The link that documents this feature can be found at the bottom of the page. +# Web Accessible Resources + +Web-accessible resources are files within an extension that can be accessed by web pages or other extensions. +These resources are often used for images, scripts, or stylesheets that are required by content scripts or +pages embedded within an extension's context. + +## How It Works? + +Extension.js performs the following tasks for web-accessible resources: + +1. **Generate Manifest Patches:** Updates the `manifest.json` file with paths for web-accessible resources + based on the content scripts and assets being used. +2. **Add Resources to Compilation:** Assets used in content scripts or referenced in the manifest are added + to the compilation process. +3. **Emit Assets:** All assets declared as web-accessible are emitted to the output directory. +4. **Support for Multiple Asset Types:** Various file types, including images, scripts, and stylesheets, + are supported. +5. **Error Handling:** Checks for missing assets and issues warnings if resources declared in the manifest + are not found during the build process. + +## Web Accessible Resources Support + +The following manifest field is used to declare web-accessible resources: + +| Manifest Field | File Type Expected | HMR Support | +| -------------------------- | ------------------ | ----------- | +| `web_accessible_resources` | Any file type | No | + +## Sample `manifest.json` File + +If the resources you need to declare are already imported by the content scripts, you don't need to declare +them in the `web_accessible_resources` field. For all other cases, you can declare the resources in the `manifest.json` file. + +### Manifest V3 + +Here's an example of how to declare web-accessible resources in the `manifest.json` file for manifest V3. + +```json +{ + "manifest_version": 3, + "name": "My Extension", + "version": "1.0", + "web_accessible_resources": [ + { + "resources": ["images/*.png", "scripts/*.js", "styles/*.css"], + "matches": [""] + } + ], + "content_scripts": [ + { + "matches": ["https://example.com/*"], + "css": ["styles/content.css"], + "js": ["scripts/content.js"] + } + ] +} +``` -The `extension.config.js` file enables developers to adjust the behavior of Extension.js. -This configuration file provides flexibility by enabling browser-specific configurations, -command customization, and support for the massive ecosystem of webpack loaders and plugins. +### Manifest V2 + +Here's an example of how to declare web-accessible resources in the `manifest.json` file for manifest V2. + +```json +{ + "manifest_version": 2, + "name": "My Extension", + "version": "1.0", + "web_accessible_resources": ["images/*.png", "scripts/*.js", "styles/*.css"], + "content_scripts": [ + { + "matches": ["https://example.com/*"], + "css": ["styles/content.css"], + "js": ["scripts/content.js"] + } + ] +} +``` -## How Does It Work? +In the examples above, the `web_accessible_resources` field exposes specific resources (images, scripts, styles) +for web pages that match the pattern defined in `matches`. -Adding a `extension.config.js` file at the same level as your `manifest.json` file will -extend the capabilities of Extension.js. The config file includes the following keys: +## Output Path -| Key | Description | -| ---------- | --------------------------------------------------------- | -| `browser` | Defines browser-specific configurations. | -| `commands` | Customizes command behavior (`dev`, `preview`, `build`). | -| `config` | Modifies the webpack configuration for added flexibility. | +For a resource to be web-accessible, it must be emitted to the output directory. The easiest way to achieve this +is to place the resources in the `/public` folder. Assets declared in there will be automatically copied to the +output directory during the build process and will be accessible from the root of the extension. -### Browser Configuration +### Example with public folder -The `browser` key allows setting up browser-specific preferences, profiles, binaries, -and flags. Below is an example configuration for Chrome and Firefox: +```plaintext +/public + /images + icon.png + /scripts + content.js + /styles + content.css +``` -```js -browser: { - chrome: { - profile: 'path/to/profile', - preferences: { darkMode: true }, - browserFlags: ['--disable-web-security'], - chromeBinary: 'path/to/custom/chrome', - }, - firefox: { - geckoBinary: 'path/to/custom/firefox', - } +In the example above, the `icon.png`, `content.js`, and `content.css` files are web-accessible resources that can +be accessed by web pages or other extensions, so the way they should be declared in the `web_accessible_resources` +field would be: + +#### For Manifest V3 + +```json +{ + "web_accessible_resources": [ + { + "resources": [ + "images/icon.png", + "scripts/content.js", + "styles/content.css" + ], + "matches": [""] + } + ] } ``` -| Property | Description | Example | -| -------------- | ------------------------------------------ | ---------------------------- | -| `profile` | Specifies the path to the browser profile. | `'path/to/profile'` | -| `preferences` | Customizes preferences such as dark mode. | `{ darkMode: true }` | -| `browserFlags` | Adds flags to the browser launch process. | `['--disable-web-security']` | -| `chromeBinary` | Sets a custom Chrome binary path. | `'path/to/custom/chrome'` | -| `geckoBinary` | Sets a custom Firefox binary path. | `'path/to/custom/firefox'` | - -> **Additional Resources**: -> -> - For a list of available flags for Chrome, refer to the [Chrome Command Line Switches](https://peter.sh/experiments/chromium-command-line-switches/). -> - For Edge flags, visit the [Microsoft Edge Command Line Options](https://learn.microsoft.com/en-us/deployedge/microsoft-edge-command-line-options). -> - For Firefox, check the [Firefox Developer Documentation](https://developer.mozilla.org/en-US/docs/Mozilla/Command_Line_Options). - -### Commands Configuration - -Use the `commands` key to customize how Extension.js runs commands like `dev`, `preview`, -and `build`. Here's an example: - -```js -commands: { - dev: { - browser: 'chrome', - polyfill: true, - }, - build: { - zipFilename: 'my-extension.zip', - zip: true, - zipSource: true, - } +#### For Manifest V2 + +```json +{ + "web_accessible_resources": [ + "images/icon.png", + "scripts/content.js", + "styles/content.css" + ] } ``` -| Property | Description | Example | -| ------------- | ------------------------------------------------------- | -------------------- | -| `browser` | Specifies the browser for dev or preview mode. | `'chrome'` | -| `polyfill` | Enables polyfills for legacy browser compatibility. | `true` | -| `zipFilename` | Sets the filename for the output zip file during build. | `'my-extension.zip'` | -| `zip` | Enables zipping the extension in build process. | `true` | -| `zipSource` | Includes the source code in the zip file. | `true` | - -### Webpack Configuration - -The `config` key allows you to modify the default webpack configuration. This gives you -the power to add additional loaders or plugins: - -```js -config: (config) => { - config.module.rules.push({ - test: /\.mdx$/, - use: ["babel-loader", "@mdx-js/loader"], - }); - return config; -}; -``` +For resources not declared in the `web_accessible_resources` field, you can predict their path by examining the +`/dist` folder after building the extension. The resources will be placed in the root of the output directory. +To reference them in your code, you can use the `chrome.runtime.getURL` method. + +### Example with `dist/` folder -## Full Sample `extension.config.js` - -Below are sample configurations for the different sections in `extension.config.js`. - -### Browser Configuration Sample - -```js -module.exports = { - browser: { - chrome: { - profile: "path/to/chrome/profile", - preferences: { theme: "dark" }, - browserFlags: ["--disable-extensions"], - chromeBinary: "path/to/custom/chrome", - }, - firefox: { - profile: "path/to/firefox/profile", - preferences: { darkMode: true }, - geckoBinary: "path/to/custom/firefox", - }, - }, - commands: { - dev: { - browser: "chrome", - profile: "path/to/chrome/profile", - polyfill: true, - port: 8080, - noOpen: false, - }, - preview: { - browser: "firefox", - profile: "path/to/firefox/profile", - }, - build: { - zipFilename: "extension.zip", - zip: true, - zipSource: true, - silent: true, - }, - }, - config: (config) => { - config.plugins = [ - ...config.plugins, - new NodePolyfillPlugin({ - additionalAliases: ["process"], - }), - ]; - return config; - }, -}; +```plaintext +/dist + /pages + my-page.html + /sandbox + page-0.html + manifest.json ``` -The `extension.config.js` types [are defined here](https://github.com/extension-js/extension.js/blob/main/programs/develop/commands/commands-lib/config-types.ts). +In the example above, the `my-page.html` and `page-0.html` files are web-accessible resources that can be accessed +by web pages or other extensions, so the way they should be declared in the `web_accessible_resources` field would be: + +#### For Manifest V3 + +```json +{ + "web_accessible_resources": [ + { + "resources": ["pages/my-page.html", "sandbox/page-0.html"], + "matches": [""] + } + ] +} +``` ## Best Practices -- **Use the `extension.config.js` file**: Leverage the `extension.config.js` file to - customize your extension's behavior. -- **Separate browser-specific configurations**: Keep browser-specific configurations - in the `browser` key. -- **Customize commands**: Use the `commands` key to adjust the behavior of commands - like `dev`, `preview`, and `build`. +- Always declare resources in `web_accessible_resources` if they are intended to be accessible by web pages or + other external scripts. +- Place additional resources that need to be web-accessible in the `/public` folder to keep your `manifest.json` + clean and organized. +- Ensure your content scripts correctly reference these assets, especially when working with external web pages. ## Next Steps -- Learn more about the [Browsers Available](#). +- Learn more about managing assets and resources with [Special Folders](../features/special-folders.mdx). diff --git a/docs/en/docs/features/_meta.json b/docs/en/docs/features/_meta.json index 3f04ba5..5eb9394 100644 --- a/docs/en/docs/features/_meta.json +++ b/docs/en/docs/features/_meta.json @@ -3,7 +3,7 @@ "name": "cross-browser-compatibility", "label": "Cross-Browser Compatibility" }, - { "name": "browser-fields", "label": "Browser-Specific Manifest Fields" }, + { "name": "browser-specific-fields", "label": "Browser-Specific Manifest Fields" }, { "name": "special-folders", "label": "Special Folders (Off-Manifest assets)" @@ -13,5 +13,5 @@ { "name": "webpack-configuration", "label": "Webpack Support" }, { "name": "reload-and-hmr", "label": "Reload and Hot-Module Replacement" }, { "name": "path-resolution", "label": "Path Resolution" }, - { "name": "cross-browser-builds", "label": "Cross-Browser Builds" } + { "name": "multi-platform-builds", "label": "Multi-Platform Builds" } ] diff --git a/docs/en/docs/features/browser-fields.mdx b/docs/en/docs/features/browser-specific-fields.mdx similarity index 96% rename from docs/en/docs/features/browser-fields.mdx rename to docs/en/docs/features/browser-specific-fields.mdx index 4dee62c..d2f9075 100644 --- a/docs/en/docs/features/browser-fields.mdx +++ b/docs/en/docs/features/browser-specific-fields.mdx @@ -52,4 +52,4 @@ This feature works for any manifest field at any level, including `permissions`, ## Next Steps -- Learn more about the [Browsers Available](../browsers/available.mdx). +- Learn more about the [Browsers Available](../browsers/browsers-available.mdx). diff --git a/docs/en/docs/features/cross-browser-compatibility.mdx b/docs/en/docs/features/cross-browser-compatibility.mdx index d493705..ff95c19 100644 --- a/docs/en/docs/features/cross-browser-compatibility.mdx +++ b/docs/en/docs/features/cross-browser-compatibility.mdx @@ -3,7 +3,7 @@ import { AvatarBrowsers } from "../../../../theme/components/avatar-group/browse -# Cross-Browser API +# Cross-Browser Compatibility > **Warning**: This feature is a work in progress and may be incomplete or subject to change. If you see an error or something that could be improved, please make a pull-request. The link that documents this feature can be found at the bottom of the page. @@ -32,4 +32,4 @@ This command ensures that the namespaced API calls are correctly polyfilled for ## Next Steps -- Learn more about the [Browsers Available](../browsers/available.mdx). +- Learn more about the [Browsers Available](../browsers/browsers-available.mdx). diff --git a/docs/en/docs/features/environment-variables.mdx b/docs/en/docs/features/environment-variables.mdx index df2fdea..d5e906f 100644 --- a/docs/en/docs/features/environment-variables.mdx +++ b/docs/en/docs/features/environment-variables.mdx @@ -168,4 +168,4 @@ By using `import.meta.env` in ESM projects, you maintain the same flexibility fo ## Next Steps -- Learn more about the [Browsers Available](../browsers/available.mdx). +- Learn more about the [Browsers Available](../browsers/browsers-available.mdx). diff --git a/docs/en/docs/features/extension-configuration.mdx b/docs/en/docs/features/extension-configuration.mdx index ae8eff0..1590179 100644 --- a/docs/en/docs/features/extension-configuration.mdx +++ b/docs/en/docs/features/extension-configuration.mdx @@ -146,7 +146,7 @@ module.exports = { For the webpack configuration sample, see [Webpack Configuration](#webpack-configuration). -The `extension.config.js` types [are defined here](https://github.com/extension-js/extension.js/blob/main/programs/develop/commands/commands-lib/config-types.ts). +The `extension.config.js` types [are defined here](https://github.com/extension-js/extension.js/blob/main/programs/develop/commands/commands-lib/extension-configuration-types.ts). ## Best Practices diff --git a/docs/en/docs/features/cross-browser-builds.mdx b/docs/en/docs/features/multi-platform-builds.mdx similarity index 96% rename from docs/en/docs/features/cross-browser-builds.mdx rename to docs/en/docs/features/multi-platform-builds.mdx index 244444f..4e4d2b9 100644 --- a/docs/en/docs/features/cross-browser-builds.mdx +++ b/docs/en/docs/features/multi-platform-builds.mdx @@ -3,7 +3,7 @@ import { AvatarEmoji } from "../../../../theme/components/avatar-emoji"; -# Production-Ready Builds +# Multi-Platform Builds > **Warning**: This feature is a work in progress and may be incomplete or subject to change. If you see an error or something that could be improved, please make a pull-request. The link that documents this feature can be found at the bottom of the page. @@ -76,5 +76,5 @@ This includes necessary polyfills during the build process to ensure your extens ## Next Steps -- Learn more about the [Browsers Available](../browsers/available.mdx). +- Learn more about the [Browsers Available](../browsers/browsers-available.mdx). - Explore the [Path Resolution](../features/path-resolution.mdx) guide for handling output files and build artifacts. diff --git a/docs/en/docs/features/webpack-configuration.mdx b/docs/en/docs/features/webpack-configuration.mdx index 063b1cc..bd1a882 100644 --- a/docs/en/docs/features/webpack-configuration.mdx +++ b/docs/en/docs/features/webpack-configuration.mdx @@ -58,7 +58,7 @@ module.exports = { }; ``` -The `extension.config.js` types [are defined here](https://github.com/extension-js/extension.js/blob/main/programs/develop/commands/commands-lib/config-types.ts). +The `extension.config.js` types [are defined here](https://github.com/extension-js/extension.js/blob/main/programs/develop/commands/commands-lib/extension-configuration-types.ts). ## Best Practices