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

[nishu-murmu]

Overview

As suggested I've used WxtModules to implement this functionality.

Manual Testing

1. Add favicon permissions wxt.config.ts.
2. Add this below code for favicon functionality testing.

function getFaviconUrl(url: string, size = 16) {
  //@ts-expect-error not supported by wxt now
  const u = new URL(browser.runtime.getURL("/_favicon/"));
  u.searchParams.set("pageUrl", url);
  u.searchParams.set("size", size.toString());
  return u.toString();
}

console.log(getFaviconUrl("https://developer.chrome.com/docs/extensions/how-to/ui/favicons"))

Related Issue

This PR closes #1559

[netlify]

✅ Deploy Preview for creative-fairy-df92c4 ready!

Name	Link
🔨 Latest commit	d89074b
🔍 Latest deploy log	https://app.netlify.com/projects/creative-fairy-df92c4/deploys/68ad3c3e3d3d45000888db2a
😎 Deploy Preview	https://deploy-preview-1570--creative-fairy-df92c4.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[nishu-murmu]

@aklinker1
Additionally name of the inbuilt module doesn't seems right, please suggest so I can update accordingly??

[nishu-murmu]

@aklinker1
I've updated the name of the builtin module for more generic use case.

[aklinker1]

Thanks for adding the test! After seeing the expected outupt, I think this PR is still missing a few things:

1. The favicon's URL needs to be typed as "/_favicon?${string}", right? Or else query parameters won't be allowed.
2. The web_accessible_resources.matches is an empty array, meaning I would have to write a module or hook to modify that array so I can load favicons from content scripts. A simpler solution would be to not add this entry if one containing the /_favicon URL already exists. That way devs can just add their own entry and not worry about duplicating them.
3. I think we need to add docs around this similar to the https://wxt.dev/guide/essentials/scripting.html page, just documenting what happens when you add the favicon permission, how to fetch a favicon, and how to add a custom matches to the web_accessible_resources entry.

[nishu-murmu]

Thanks for adding the test! After seeing the expected outupt, I think this PR is still missing a few things:

1. The favicon's URL needs to be typed as "/_favicon?${string}", right? Or else query parameters won't be allowed.
2. The web_accessible_resources.matches is an empty array, meaning I would have to write a module or hook to modify that array so I can load favicons from content scripts. A simpler solution would be to not add this entry if one containing the /_favicon URL already exists. That way devs can just add their own entry and not worry about duplicating them.
3. I think we need to add docs around this similar to the https://wxt.dev/guide/essentials/scripting.html page, just documenting what happens when you add the favicon permission, how to fetch a favicon, and how to add a custom matches to the web_accessible_resources entry.

In second point, so basically only types will be updated automatically and web_accessible_resources will be added by devs?

[aklinker1]

A couple of follow-up changes, but it looks good overall! Thanks for working on this one.

In second point, so basically only types will be updated automatically and web_accessible_resources will be added by devs?

Yes. Not every extension that uses the favicon permission needs a web_acccessible_resources entry added - you only need that to use favicons in content scripts. If someone needs access to favicons in a content script, they should add the entry themselves.

So we should just remove the second hook from the module.

[aklinker1]

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'],
	},
	});

[aklinker1]

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', ...)
  },
})