wxt-dev · nishu-murmu · Apr 11, 2025 · Apr 11, 2025 · Apr 15, 2025 · Apr 15, 2025
@@ -0,0 +1,65 @@
+# Favicons
+
+[Chrome Docs: How to fetch favicons](https://developer.chrome.com/docs/extensions/how-to/ui/favicons)
+
+#### What happens when you add favicons permissions in wxt.config.ts?
+
+WXT automatically adds value in `web_accessible_resources` with default value and updates the types for favicon.
+
+This is automatically added in manifest.json
+
+```js
+"web_accessible_resources": [
+    {
+      "resources": ["_favicon/*"],
+      "matches": [],
+    }
+  ]
+
+```
+
+#### If you want to add custom values in `matches` parameter you can either add by hook or WXT modules.
+
+1. Via hook in wxt.config.ts
+
+```js
+
+import { defineConfig } from "wxt";
+// See https://wxt.dev/api/config.html
+export default defineConfig({
+  modules: ["@wxt-dev/module-react"],
+  hooks: {
+    "build:manifestGenerated": (_, manifest) => {
+      const favicon_resource: any = manifest.web_accessible_resources?.find(
+        (resource: any) => resource.includes("favicon")
+      );
+      favicon_resource.matches?.push("<all_urls>");
+      manifest.web_accessible_resources ??= [];
+      manifest.web_accessible_resources?.push(favicon_resource);
+    },
+  },
+});
+
+```
+
+2. Via custom module
+
+- Follow the guide for [creating modules](https://wxt.dev/guide/essentials/wxt-modules.html#writing-modules) and paste this below code.
+
+```js
+
+import { defineWxtModule } from "wxt/modules";
+
+export default defineWxtModule({
+  setup(wxt) {
+    wxt.hooks.hook("build:manifestGenerated", (_, manifest) => {
+      const favicon_resource: any = manifest.web_accessible_resources?.find(
+        (resource: any) => resource.includes("favicon")
+      );
+      favicon_resource.matches?.push("<all_urls>");
+      manifest.web_accessible_resources ??= [];
+      manifest.web_accessible_resources?.push(favicon_resource);
+    });
+  },
+});
+```
@@ -397,6 +397,61 @@ describe('TypeScript Project', () => {
     expect(output).toContain('./example.ts');
   });
 
+  it('should include favicon types in browser.runtime.getURL and in manifest web_accessible_resources ', async () => {
+    const project = new TestProject();
+    project.addFile('entrypoints/popup.html', '<html></html>');
+    project.addFile('entrypoints/options.html', '<html></html>');
+    project.addFile('entrypoints/sandbox.html', '<html></html>');
+
+    await project.prepare({
+      manifest: {
+        permissions: ['favicon'],
+      },
+    });
+
+    await project.build({
+      manifest: {
+        permissions: ['favicon'],
+      },
+    });
+
+    const output = await project.serializeFile('.wxt/types/paths.d.ts');
+    const manifestOutput = await project.getOutputManifest();
+
+    const expectedWebAccessibleResource = [
+      {
+        resources: ['/_favicon/*'],
+        matches: [],
+      },
+    ];
+
+    expect(manifestOutput.web_accessible_resources).toEqual(
+      expectedWebAccessibleResource,
+    );
+    expect(output).toMatchInlineSnapshot(`
+      ".wxt/types/paths.d.ts
+      ----------------------------------------
+      // Generated by wxt
+      import "wxt/browser";
+
+      declare module "wxt/browser" {
+        export type PublicPath =
+          | ""
+          | "/"
+          | "/_favicon/?\${string}\"
+          | "/options.html"
+          | "/popup.html"
+          | "/sandbox.html"
+        type HtmlPublicPath = Extract<PublicPath, \`\${string}.html\`>
+        export interface WxtRuntime {
+          getURL(path: PublicPath): string;
+          getURL(path: \`\${HtmlPublicPath}\${string}\`): string;
+        }
+      }
+      "
+    `);
+  });
+
   it('should set correct import.meta.env.BROWSER type based on targetBrowsers', async () => {
     const project = new TestProject();
     project.addFile('entrypoints/unlisted.html', '<html></html>');

@@ -0,0 +1,20 @@
+import { defineWxtModule } from '../modules';
+
+export default defineWxtModule({
+  name: 'wxt:built-in:favicon-permission',
+  setup(wxt) {
+    wxt.hooks.hook('prepare:publicPaths', async (wxt, paths) => {
+      if (wxt.config.manifest.permissions?.includes('favicon')) {
+        paths.push('_favicon/?${string}');
+        wxt.hooks.hook('build:manifestGenerated', (_, manifest) => {
+          const favicon_resource: any = {
+            resources: ['/_favicon/*'],
+            matches: [],
+          };
+          manifest.web_accessible_resources ??= [];
+          manifest.web_accessible_resources?.push(favicon_resource);
+        });
+      }
+    });
+  },
+});
@@ -1,4 +1,5 @@
 import { WxtModule } from '../types';
 import unimport from './unimport';
+import faviconPermission from './favicon-permission';
 
-export const builtinModules: WxtModule<any>[] = [unimport];
+export const builtinModules: WxtModule<any>[] = [unimport, faviconPermission];