Skip to content

feat: Automatically update .wxt/types/paths.d.ts and web_accessible_resources manifest for favicon #1570

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
+142 −1
Open

feat: Automatically update .wxt/types/paths.d.ts and web_accessible_resources manifest for favicon #1570

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
f6080a5
feat: Automatically update .wxt/types/paths.d.ts and web_accessible_r…
nishu-murmu Apr 11, 2025
a698e88
fix: should augment the types for browser.runtime.getURL test fixed.
nishu-murmu Apr 11, 2025
3370b3d
Merge branch 'main' of github.com:wxt-dev/wxt into favicon-types
nishu-murmu Apr 15, 2025
918945d
fix: updating the name of the builtin modules for types related opera…
nishu-murmu Apr 15, 2025
7493fdf
Merge branch 'main' of github.com:wxt-dev/wxt into favicon-types
nishu-murmu Apr 17, 2025
7f706a9
fix: updating file name for specific use-case and reverting
nishu-murmu Apr 17, 2025
3864cf3
chore: rename
nishu-murmu Apr 17, 2025
a883194
Merge branch 'main' of github.com:wxt-dev/wxt into favicon-types
nishu-murmu Apr 25, 2025
6e44b81
Merge branch 'main' of github.com:wxt-dev/wxt into favicon-types
nishu-murmu Apr 28, 2025
efbc299
fix: adding docs and proper type for favicon and updating tests.
nishu-murmu Apr 28, 2025
f617b98
chore: updating docs.
nishu-murmu Apr 28, 2025
a983d27
chore: removing unused imports.
nishu-murmu Apr 28, 2025
d89074b
Merge branch 'main' into favicon-types
nishu-murmu Aug 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 65 additions & 0 deletions docs/guide/essentials/favicon.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
});
},
});
```
55 changes: 55 additions & 0 deletions packages/wxt/e2e/tests/typescript-project.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
},
});
Comment on lines +406 to +416
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Build will run prepare automatically, you don't need to include both.

Suggested change
await project.prepare({
manifest: {
permissions: ['favicon'],
},
});
await project.build({
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>');
Expand Down
20 changes: 20 additions & 0 deletions packages/wxt/src/builtin-modules/favicon-permission.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) => {
Copy link
Member

@aklinker1 aklinker1 Sep 3, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Edit: See review comment, we can probably just delete the second hook. Keeping the original comment here just to explain how modules should be written

The second hook should be added inside the setup function, not nested inside the first hook's callback:

export default defineWxtModule({
  name: 'wxt:built-in:favicon-permission',
  setup(wxt) {
    const hasManifestPermission = () => wxt.config.manifest.permissions?.includes('favicon')

    wxt.hooks.hook('prepare:publicPaths', ...)

    wxt.hooks.hook('build:manifestGenerated', ...)
  },
})

const favicon_resource: any = {
resources: ['/_favicon/*'],
matches: [],
};
manifest.web_accessible_resources ??= [];
manifest.web_accessible_resources?.push(favicon_resource);
});
}
});
},
});
3 changes: 2 additions & 1 deletion packages/wxt/src/builtin-modules/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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];