Web-accessible resources and build-time merging

​

Template example

​

content

npx extension@latest create my-extension --template=content

pnpx extension@latest create my-extension --template=content

yarn dlx extension@latest create my-extension --template=content

bunx extension@latest create my-extension --template=content

deno run -A npm:extension@latest create my-extension --template=content

​

Web-accessible resource capabilities

​

Manifest schema

​

Manifest V3

{
  "web_accessible_resources": [
    {
      "resources": ["images/*.png", "fonts/*.woff2"],
      "matches": ["<all_urls>"]
    }
  ]
}

​

Manifest V2

{
  "web_accessible_resources": ["images/*.png", "scripts/*.js", "styles/*.css"]
}

​

Sample manifest.json file

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0.0",
  "web_accessible_resources": [
    {
      "resources": ["images/*.png", "scripts/*.js", "styles/*.css"],
      "matches": ["<all_urls>"]
    }
  ],
  "content_scripts": [
    {
      "matches": ["https://example.com/*"],
      "css": ["styles/content.css"],
      "js": ["scripts/content.js"]
    }
  ]
}

​

What Extension.js adds automatically

• Assets imported by content scripts.
• Content-script CSS outputs.
• Emitted fonts or static assets referenced by those entries.
• Development-only runtime support needed for reload behavior.

​

Development behavior

• In development, Extension.js patches WAR entries to support reload and hot module replacement (HMR) asset access.
• Extension.js can auto-include content-script-related assets in WAR when needed.
• Extension.js normalizes paths by removing the public/ prefix and leading / to produce output-safe paths.

​

Output and resolution notes

• Extension.js copies resources in public/ through the public-asset flow, and you can declare them from extension root paths.
• Relative WAR resource paths resolve from the manifest folder.
• You can use globs, but match patterns must be valid for target browser constraints.
• Extension.js drops Manifest V3 (MV3) entries without resources during normalization.
• Extension.js preserves globs as-is and does not expand them into explicit file lists.

​

Runtime usage

const logoUrl = chrome.runtime.getURL("/images/logo.png");

1. Whether the asset is actually present in the output.
2. Whether the WAR entry exposes the correct resources.
3. Whether the matches scope includes the page that is trying to read it.
4. Whether the asset should instead stay private to extension pages only.

​

Best practices

• Keep WAR entries minimal; expose only what external contexts must read.
• Prefer explicit resource paths over broad globs for better security.
• Validate WAR match patterns and resource paths across Chromium and Firefox targets.
• Use chrome.runtime.getURL()/browser.runtime.getURL() for runtime-safe URL creation.
• Re-audit WAR after adding content-script imports, fonts, or page-accessible static assets.

​

Security checklist

• Limit matches scope to domains that actually require access.
• Avoid broad wildcard resource globs when a small explicit list is sufficient.
• Keep WAR entries focused on non-sensitive assets.
• Re-audit WAR when adding new content script imports or runtime asset lookups.

​

Scoped vs overly broad examples

{
  "web_accessible_resources": [
    {
      "resources": ["images/logo.png", "fonts/inter.woff2"],
      "matches": ["https://example.com/*"]
    }
  ]
}

{
  "web_accessible_resources": [
    {
      "resources": ["*"],
      "matches": ["<all_urls>"]
    }
  ]
}

​

Next steps

• Understand update outcomes in dev update behavior.
• Learn more about Special folders.
• Continue with commands reference.