Icons#

Icons are used in various parts of the extension interface, including the toolbar, context menus, and the extension settings. Extension.js ensures that all icons defined in the manifest.json file are correctly processed and emitted to the output directory during the build process.

Icon File Support#

Extension.js provides comprehensive support for handling icon files. It supports standard image formats such as .png, .jpg, and .svg. All icons referenced in the manifest.json are included in the build and served as required by the extension's context.

The following manifest fields use icons:

Sample Icon Declaration in manifest.json#

Here’s a basic example of how to declare icons in your manifest.json:

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "icons": {
    "16": "icons/icon-16.png",
    "48": "icons/icon-48.png",
    "128": "icons/icon-128.png"
  },
  "action": {
    "default_icon": "icons/action-icon.png"
  }
}

This configuration ensures that Extension.js will process and emit the icons to the appropriate location in the output directory during the build process.

Handling Icons#

If you have additional icons that are not directly declared in the manifest.json, such as theme icons or extra icons for specific contexts, you can place these icons in the /public folder. Extension.js will include these files in the build output as-is, ensuring they are accessible for use throughout your extension.

Example Usage: Place your icons in the /public/icons folder:

public/
└── icons/
    ├── icon-16.png
    ├── icon-48.png
    ├── icon-128.png
    └── action-icon.png

For more information, refer to the Special Folders documentation.

Output Path#

The output path for icons follows a simple structure based on their context in the manifest. For example, the resulting files would look like this:

dist/
  [browser]/
  ├── icons/
  │   ├── icon-16.png
  │   ├── icon-48.png
  │   ├── icon-128.png
  │   └── action-icon.png
  └── other-extension-files

How Extension.js Handles Icons#

The plugin responsible for icon handling in Extension.js ensures that the following steps occur during compilation:

1. Emit Icon Files: The icon files referenced in the manifest.json are emitted to the output directory.
2. Add to File Dependencies: Icons are added to the file dependencies of the compilation, ensuring that any updates to the icon files trigger a recompile.
3. Support for Various Formats: The plugin supports multiple image formats including .png, .jpg, and .svg.
4. Handle Theme Icons: Additional icons like theme icons are also supported, and can be included via the manifest or special folders.

Best Practices#

• Use the /public/ folder for additional icons that are not directly declared in the manifest.
• Always declare your icons in the manifest.json file to ensure proper inclusion in the build process.
• Ensure that icons are provided in multiple resolutions to support different device pixel ratios (e.g., 16px, 48px, 128px).

Next Steps#

• Learn more about handling icons and other static assets via Special Folders.