Scripts#

In an extension, JavaScript files empower background processes, content scripts, user scripts, and service workers. Extension.js ensures that JavaScript and TypeScript files defined in the manifest.json are correctly processed, with full support for hot-module replacement (HMR) and other development tools.

Script File Support#

Extension.js offers comprehensive support for script files, ensuring HMR where applicable. It handles entry point injection for JavaScript, TypeScript, and CSS in content scripts, service workers, and background scripts.

The following manifest fields are supported for JavaScript and related files:

Sample Script Files#

Here’s a basic example of defining scripts in the manifest.json:

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "background": {
    "service_worker": "./scripts/background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["./scripts/content-script.js"],
      "css": ["./styles/content-style.css"]
    }
  ]
}

Handling Additional Scripts#

For scripts that are not declared in manifest.json, such as utility scripts or other JavaScript files that provide additional functionality, place them in the /scripts folder. This folder is automatically processed by Extension.js to ensure all scripts are included in the build.

Example Usage: Add your additional script files to the /scripts folder:

scripts/
└── extra-script.js

For more information on organizing these files, refer to the Special Folders documentation.

Output Path#

The output path for scripts is the following:

# background scripts:

background/
└── scripts.js

# service workers:

background/
└── service-worker.js

# content scripts:

content_scripts/
└── scripts-0.js

# user scripts:

user_scripts/
└── api_script.js

How Extension.js Handles Scripts#

The plugin for script file support in Extension.js ensures the following steps occur during compilation:

1. Add Script Entries: Script entries from the manifest and additional scripts from the /scripts folder are added to the compilation process.
2. Inject CSS for Content Scripts: During development, CSS files in content_scripts are injected dynamically for HMR support.
3. Enable HMR for Scripts: HMR is enabled for content scripts, background scripts, and user scripts during development.
4. Fix Public Path in Production: Fixes issues with content scripts not finding the correct public path in the production build.
5. Handle Public Path for Main World Scripts: Ensures correct public path for scripts running in the main world, such as content scripts.

Best Practices#

• Use the /scripts folder for additional JavaScript files that are not defined in manifest.json.
• Ensure your manifest fields correctly reference script files for proper HMR and asset injection.
• Keep your scripts organized and modular to improve maintainability and scalability of your extension.

Next Steps#

• Learn how to structure and work with Special Folders for handling script files outside of the manifest.