Welcome to My Extension
+This is a sample extension page.
+Welcome to My Extension
+This is a sample extension page.
+ + +``` + +## Output Path + +The output path for CSS files follows the same logic as scripts or HTML. The CSS will be bundled into `[feature]/index.css` for styles imported in HTML files, based on where it's used. For example, for a `newtab` override, the resulting files would look like this: + +```plaintext +chrome_url_overrides/ +├── index.html +├── index.js +└── index.css +``` + +For the CSS that represents content scripts in the `manifest.json` file, the output path will be: + +```plaintext +content_scripts/ +├── index.js +└── index.css +``` + +## How Extension.js Handles CSS + +The plugin for CSS file support in Extension.js ensures that the following steps occur during compilation: + +1. **Add CSS Entries:** CSS entries from the manifest and additional styles from HTML or `/styles` folder are added to the compilation. +2. **Inject Styles for Content Scripts:** During development, CSS files are dynamically injected into `content_scripts` to benefit from HMR. +3. **Enable HMR for CSS:** HMR is enabled for CSS files across all relevant extension contexts. +4. **Support for Pre-processors:** Files with `.scss`, `.sass`, and `.less` extensions are fully supported and compiled during the build process. +5. **Support for PostCSS:** PostCSS is supported for additional transformations and optimizations on CSS files. + +## Best Practices + +- Ensure your manifest fields correctly reference CSS files to take advantage of live-reloading and asset handling. +- Leverage the power of CSS pre-processors like Sass and Less for more organized and maintainable styles. + +## Next Steps + +- Learn more about handling additional CSS and static files via [Special Folders](../features/special-folders.mdx). diff --git a/docs/en/docs/development/html.mdx b/docs/en/docs/development/html.mdx new file mode 100644 index 0000000..103a9a9 --- /dev/null +++ b/docs/en/docs/development/html.mdx @@ -0,0 +1,99 @@ +import { PackageManagerTabs } from "@theme"; +import { AvatarImage } from "../../../../theme/components/avatar-image"; + +
+
+
+
+
+```
+
+## Handling HTML Files Not Declared in `manifest.json`
+
+If you need to include additional HTML files that are not declared in the `manifest.json`, such as sandboxed iframes or extra pages, you can place these files in the `/pages` folder. Extension.js will process the HTML files in this folder as it would for any HTML entry point defined in the manifest.
+
+**Example Usage:**
+Place your HTML file in the `/pages` folder, and it will be bundled and available for use, with full support for HMR, asset injection, and other processing steps.
+
+```plaintext
+pages/
+└── extra-page.html
+```
+
+This allows you to add extra pages to your extension without cluttering the manifest or needing to specify them directly there.
+
+For more details, refer to the [Special Folders documentation](../features/special-folders.mdx).
+
+## Output Path
+
+The output path for HTML files is always structured as `[feature]/index[ext]`. For example, if you're working on a new tab override, the resulting files would look like this:
+
+```plaintext
+chrome_url_overrides/
+├── index.html
+├── index.css
+└── index.js
+```
+
+## How Extension.js Handles HTML
+
+The plugin for HTML file support in Extension.js ensures that the following steps occur during compilation:
+
+1. **Emit HTML File:** The original HTML file is included in the compilation process.
+2. **Inject Assets:** Static assets like `