Manifest - Web Accessible Resources

Web-accessible resources are files inside an extension that can be accessed by web pages or other extensions. Extensions typically use this feature to expose images or other assets that need to be loaded in web pages, but any asset included in an extension's bundle can be made web accessible.

By default no resources are web accessible, as this allows a malicious website to fingerprint extensions that a user has installed or exploit vulnerabilities (for example XSS bugs) in installed extensions. Only pages or scripts loaded from an extension's origin can access that extension's resources.

Manifest declaration

Use the web_accessible_resources manifest property to declare which resources are exposed and to what origins. This property is an array of objects that declares resource access rules. Each object lists a number of extension resources and must provide a value for at least one of the matches or extension_ids keys to indicate the origins that can access these resources.

{
  ...
  "web_accessible_resources": [
    {
      "resources": [ "test1.png", "test2.png" ],
      "matches": [ "https://web-accessible-resources-1.glitch.me/*" ]
    }, {
      "resources": [ "test3.png", "test4.png" ],
      "matches": [ "https://web-accessible-resources-2.glitch.me/*" ]
    }
  ],
  ...
}

Each object in the array contains these elements:

"resources"

An array of strings, each containing a relative path to a given resource from the extension's root directory. Resources may contain asterisks (*) for wildcard matches. For example, "/images/*" exposes everything in the extension's images/ directory, recursively, while "*.png" exposes all PNG files.

"matches"

An array of strings, each containing a match pattern that specifies which sites can access this set of resources. Only the origin is used to match URLs. Origins include subdomain matching. Google Chrome emits an "Invalid match pattern" error if the pattern has a path other than '/*'.

"extension_ids"

An array of strings, each containing the ID of an extension that can access the resources.

Each element must include a "resources" element and either a "matches" or "extension_ids" element. This establishes a mapping that exposes the specified resources to either web pages matching the pattern or to extensions with matching IDs.

Navigability of resources

Resources are available in a web page using the URL chrome-extension://[PACKAGE ID]/[PATH], which can be generated with the runtime.getURL() method. The resources are served with appropriate CORS headers, so they're available using fetch().

A navigation from a web origin to an extension resource is blocked unless the resource is listed as web accessible. Note these corner cases:

• When an extension uses the webRequest API to redirect a public resource request to a resource that is not web accessible, such a request is also blocked.
• Redirects from public resources are blocked even if the resource that is not web accessible is owned by the redirecting extension.
• Navigation is blocked in incognito mode unless the value of the "incognito" field is set to "split".

Content scripts themselves don't need to be allowed.

Example

The Web Accessible Resources example demonstrates the use of this element in a working extension.