feat: Add firefox and chrome variable in @wxt-dev/browser

Author: SimYunSup

packages/browser/package.json

@@ -24,6 +24,7 @@
   ],
   "devDependencies": {
     "@types/chrome": "0.0.323",
+    "@types/firefox-webext-browser": "120.0.4",
     "fs-extra": "^11.3.0",
     "nano-spawn": "^0.2.0",
     "tsx": "4.19.4",

packages/browser/scripts/generate.ts

@@ -6,8 +6,16 @@ import { sep as posixSep } from 'node:path/posix';
 
 // Fetch latest version
 
-console.log('Getting latest version of \x1b[36m@types/chrome\x1b[0m');
-await spawn('pnpm', ['i', '--ignore-scripts', '-D', '@types/chrome@latest']);
+console.log(
+  'Getting latest version of \x1b[36m@types/chrome\x1b[0m, \x1b[36m@types/firefox-webext-browser\x1b[0m',
+);
+await spawn('pnpm', [
+  'i',
+  '--ignore-scripts',
+  '-D',
+  '@types/chrome@latest',
+  '@types/firefox-webext-browser@latest',
+]);
 
 // Generate new package.json
 
@@ -16,11 +24,17 @@ console.log('Generating new \x1b[36mpackage.json\x1b[0m');
 const pkgJsonPath = fileURLToPath(
   import.meta.resolve('@types/chrome/package.json'),
 );
+const firefoxPkgJsonPath = fileURLToPath(
+  import.meta.resolve('@types/firefox-webext-browser/package.json'),
+);
 const pkgDir = dirname(pkgJsonPath);
 const pkgJson = await fs.readJson(pkgJsonPath);
+const firefoxPkgJson = await fs.readJson(firefoxPkgJsonPath);
 const pkgJsonTemplate = await fs.readFile('templates/package.json', 'utf8');
 const newPkgJson = JSON.parse(
-  pkgJsonTemplate.replaceAll('{{chromeTypesVersion}}', pkgJson.version),
+  pkgJsonTemplate
+    .replaceAll('{{chromeTypesVersion}}', pkgJson.version)
+    .replaceAll('{{firefoxTypesVersion}}', firefoxPkgJson.version),
 );
 newPkgJson.dependencies = pkgJson.dependencies;
 newPkgJson.peerDependencies = pkgJson.peerDependencies;
@@ -51,7 +65,38 @@ const declarationFileMapping = (
 
 for (const { file, srcPath, destPath } of declarationFileMapping) {
   const content = await fs.readFile(srcPath, 'utf8');
-  const transformedContent = transformFile(file, content);
+  const transformedContent = transformChromeFile(file, content);
+  const destDir = dirname(destPath);
+  await fs.mkdir(destDir, { recursive: true });
+  await fs.writeFile(destPath, transformedContent);
+  console.log(`  \x1b[2m-\x1b[0m \x1b[36m${file}\x1b[0m`);
+}
+// Generate Firefox declaration files
+console.log('Generating \x1b[36mfirefox\x1b[0m declaration files');
+
+const firefoxPkgDir = dirname(firefoxPkgJsonPath);
+const firefoxDeclarationFileMapping = (
+  await fs.readdir(firefoxPkgDir, {
+    recursive: true,
+    encoding: 'utf8',
+  })
+)
+  // Filter to .d.ts files
+  .filter((file) => file.endsWith('.d.ts'))
+  // Map to usable paths
+  .map((file) => ({
+    file: file.includes('index')
+      ? file.replaceAll(sep, posixSep).replace('index', 'firefox')
+      : file.replaceAll(sep, posixSep),
+    srcPath: join(firefoxPkgDir, file),
+    destPath: file.includes('index')
+      ? join(outDir, 'firefox.d.ts')
+      : join(outDir, file),
+  }));
+
+for (const { file, srcPath, destPath } of firefoxDeclarationFileMapping) {
+  const content = await fs.readFile(srcPath, 'utf8');
+  const transformedContent = transformFirefoxFile(file, content);
   const destDir = dirname(destPath);
   await fs.mkdir(destDir, { recursive: true });
   await fs.writeFile(destPath, transformedContent);
@@ -66,7 +111,7 @@ console.log(
 
 // Transformations
 
-function transformFile(file: string, content: string): string {
+function transformChromeFile(file: string, content: string): string {
   return (
     // Add prefix
     `/* DO NOT EDIT - generated by scripts/generate.ts */\n\n${content}\n`
@@ -80,3 +125,13 @@ function transformFile(file: string, content: string): string {
       .replaceAll('developer.Browser.com', 'developer.chrome.com')
   );
 }
+function transformFirefoxFile(file: string, content: string): string {
+  return (
+    // Add prefix
+    `/* DO NOT EDIT - generated by scripts/generate.ts */\n\n${content}\n`
+      // Rename `browser` namespace to `Firefox` and export it
+      .replaceAll('declare namespace browser', 'export namespace Firefox')
+      // Update references to `browser` namespace to `Firefox`
+      .replaceAll('browser.', 'Firefox.')
+  );
+}