feat: support firefox browser

.eslintrc

@@ -27,7 +27,8 @@
     "@typescript-eslint/no-explicit-any": "off"
   },
   "globals": {
-    "chrome": "readonly"
+    "chrome": "readonly",
+    "browser": "readonly"
   },
   "ignorePatterns": ["watch.js", "dist/**"]
 }

.gitignore

@@ -6,6 +6,8 @@
 
 # build
 /dist
+/chrome
+/firefox
 
 # etc
 .DS_Store
@@ -15,4 +17,6 @@
 #generated
 public/*
 
-/tails-devtools.zip
+/tails-devtools.zip
+/chrome-tails-devtools.zip
+/firefox-tails-devtools.zip

README.md

@@ -6,7 +6,9 @@
 
 ## Supported Browser
 
-<img alt="Chrome" src="https://img.icons8.com/fluent/24/000000/chrome.png" align="center"/> Install extension from [Chrome Web Store](https://chrome.google.com/webstore/detail/tailwind-css-devtools/pgamkpjkbfldnmemhcbekimfdnjcgkco?authuser=0)
+<img width="24" height="24" alt="Chrome" src="https://img.icons8.com/fluent/24/000000/chrome.png" align="center"/> Install extension from [Chrome Web Store](https://chrome.google.com/webstore/detail/tailwind-css-devtools/pgamkpjkbfldnmemhcbekimfdnjcgkco?authuser=0)
+
+<img width="24" height="24" alt="Firefox" src="https://inceptum-stor.icons8.com/M3f8MXabIMHf/icon_Firefox_browser.png" align="center"/> Install extension from [Firefox Add-Ons](https://addons.mozilla.org/firefox/addon/tailwind-css-devtools/)
 
 ## Contribute
 

nodemon.json

@@ -1,6 +1,6 @@
 {
-  "watch": ["src", "utils", "vite.config.ts"],
+  "watch": ["src", "utils", "vite.config.ts", "vite.firefox.config.ts"],
   "ext": "tsx,css,html,ts",
   "ignore": ["src/**/*.spec.ts"],
-  "exec": "vite build"
+  "exec": "vite build && vite build --config vite.firefox.config.ts"
 }

package.json

@@ -9,7 +9,9 @@
   },
   "scripts": {
     "zip": "bash ./scripts/bundle.sh",
-    "build": "tsc --noEmit && vite build && yarn zip",
+    "build": "tsc --noEmit && yarn build:chrome && yarn build:firefox && yarn zip",
+    "build:chrome": "vite build",
+    "build:firefox": "vite build --config vite.firefox.config.ts",
     "dev": "nodemon"
   },
   "type": "module",

scripts/bundle.sh

@@ -1,6 +1,10 @@
 #!/bin/bash
 set -ex
 
-pushd dist
-zip -r ../tails-devtools.zip .
+pushd chrome
+zip -r ../chrome-tails-devtools.zip .
+popd
+
+pushd firefox
+zip -r ../firefox-tails-devtools.zip .
 popd

src/global.d.ts

@@ -4,6 +4,10 @@ declare namespace chrome {
   export default Chrome;
 }
 
+declare global {
+  const browser: Chrome;
+}
+
 declare module "*.svg" {
   import React = require("react");
   export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>;

src/manifest-type.ts

@@ -238,6 +238,7 @@ export interface ManifestType {
   version_name?: string | undefined;
   web_accessible_resources?:
     | (WebAccessibleResourceById | WebAccessibleResourceByMatch)[]
+    | string[]
     | undefined;
 }
 

src/manifest.firefox.ts

@@ -0,0 +1,24 @@
+import packageJson from "../package.json";
+
+const manifest = {
+  manifest_version: 2,
+  name: "Tailwind CSS Devtools",
+  author: "tungtbt",
+  version: packageJson.version,
+  description: packageJson.description,
+  permissions: ["<all_urls>"],
+  icons: {
+    "128": "./logo.png",
+  },
+  browser_action: {
+    default_icon: {
+      "128": "./logo.png",
+    },
+  },
+  web_accessible_resources: ["fonts/*"],
+  devtools_page: "src/pages/devtools/index.html",
+  content_security_policy:
+    "script-src 'self' 'unsafe-eval'; object-src 'self';",
+};
+
+export default manifest;

src/pages/devtools/index.ts

@@ -1,9 +1,14 @@
+import { isChrome, platform } from "@src/platform";
 try {
-  chrome.devtools.panels.elements.createSidebarPane(
+  platform.devtools.panels.elements.createSidebarPane(
     "Tailwind CSS",
-    function (sidebar) {
-      sidebar.setHeight("100vh");
-      sidebar.setPage("src/pages/panel/index.html");
+    function (sidebar: any) {
+      if (isChrome) {
+        sidebar.setPage("src/pages/panel/index.html");
+        sidebar.setHeight("100vh");
+      } else {
+        sidebar.setPage("../panel/index.html");
+      }
     }
   );
 } catch (e) {

src/pages/panel/bridge.ts

@@ -1,3 +1,4 @@
+import { platform } from "@src/platform";
 import {
   InspectedElement,
   inspectElement,
@@ -9,7 +10,7 @@ import {
   setClassList,
 } from "./remote";
 
-const devtools = chrome.devtools;
+const devtools = platform.devtools;
 const inspectedWindow = devtools.inspectedWindow;
 
 export const factory =

src/pages/panel/context/theme.tsx

@@ -1,3 +1,4 @@
+import { platform } from "@src/platform";
 import React, {
   createContext,
   memo,
@@ -9,7 +10,7 @@ import React, {
 import { useLocalStorage } from "../hooks";
 
 export function getBrowserTheme() {
-  return chrome.devtools.panels.themeName === "dark" ? "dark" : "light";
+  return platform.devtools.panels.themeName === "dark" ? "dark" : "light";
 }
 
 type Theme = "dark" | "light" | "auto";

src/pages/panel/fonts.firefox.css

@@ -0,0 +1,20 @@
+@font-face {
+  font-family: "Inter var";
+  font-weight: 300 700;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: "Regular";
+  src: url("moz-extension://__MSG_@@extension_id__/fonts/Inter-roman-latin.var.woff2")
+    format("woff2");
+}
+
+@font-face {
+  font-family: "Fira Code VF";
+  font-display: swap;
+  font-weight: 300 700;
+  font-style: normal;
+  src: url("moz-extension://__MSG_@@extension_id__/fonts/FiraCode-VF.woff2")
+      format("woff2-variations"),
+    url("moz-extension://__MSG_@@extension_id__/fonts/FiraCode-VF.woff")
+      format("woff-variations");
+}

src/pages/panel/index.css

@@ -1,4 +1,5 @@
 @import "./font.css";
+@import "./fonts.firefox.css";
 
 @tailwind base;
 @tailwind components;

src/platform.ts

@@ -0,0 +1,3 @@
+export const isChrome = typeof browser === "undefined";
+
+export const platform = isChrome ? chrome : browser;

tsconfig.json

@@ -22,6 +22,12 @@
       "@pages/*": ["src/pages/*"]
     }
   },
-  "include": ["src", "utils", "vite.config.ts", "index.d.ts"],
+  "include": [
+    "src",
+    "utils",
+    "vite.config.ts",
+    "vite.firefox.config",
+    "index.d.ts"
+  ],
   "exclude": ["node_modules"]
 }

utils/plugins/make-manifest-firefox.ts

@@ -0,0 +1,30 @@
+import * as fs from "fs";
+import * as path from "path";
+import { PluginOption } from "vite";
+
+import colorLog from "../log";
+import manifestFirefox from "../../src/manifest.firefox";
+
+const { resolve } = path;
+
+const outDir = resolve(__dirname, "..", "..", "public");
+
+export default function makeManifest(): PluginOption {
+  return {
+    name: "make-manifest-firefox",
+    buildEnd() {
+      if (!fs.existsSync(outDir)) {
+        fs.mkdirSync(outDir);
+      }
+
+      const manifestPath = resolve(outDir, "manifest.json");
+
+      fs.writeFileSync(manifestPath, JSON.stringify(manifestFirefox, null, 2));
+
+      colorLog(
+        `Manifest Firefox file copy complete: ${manifestPath}`,
+        "success"
+      );
+    },
+  };
+}

vite.config.ts

@@ -8,9 +8,8 @@ import copyFonts from "./utils/plugins/copy-fonts";
 
 const root = resolve(__dirname, "src");
 const pagesDir = resolve(root, "pages");
-const assetsDir = resolve(root, "assets");
 const panelDir = resolve(pagesDir, "panel");
-const outDir = resolve(__dirname, "dist");
+const outDir = resolve(__dirname, "chrome");
 const publicDir = resolve(__dirname, "public");
 
 function selfResolve() {
@@ -43,13 +42,13 @@ export const sharedConfig: UserConfig = {
   define: {
     "process.env": process.env,
   },
-  plugins: [react(), makeManifest(), selfResolve(), copyLogo(), copyFonts()],
+  plugins: [react(), selfResolve(), copyLogo(), copyFonts()],
   publicDir,
 };
 
 export default defineConfig({
   ...sharedConfig,
-  plugins: [...(sharedConfig.plugins || [])],
+  plugins: [...(sharedConfig.plugins || []), makeManifest()],
   build: {
     target: ["es2020"],
     outDir,

vite.firefox.config.ts

@@ -0,0 +1,27 @@
+import { defineConfig } from "vite";
+import { resolve } from "path";
+import makeManifest from "./utils/plugins/make-manifest-firefox";
+import { sharedConfig } from "./vite.config";
+
+const root = resolve(__dirname, "src");
+const pagesDir = resolve(root, "pages");
+const outDir = resolve(__dirname, "firefox");
+
+export default defineConfig({
+  ...sharedConfig,
+  plugins: [...(sharedConfig.plugins || []), makeManifest()],
+  build: {
+    target: ["es2020"],
+    outDir,
+    rollupOptions: {
+      input: {
+        devtools: resolve(pagesDir, "devtools", "index.html"),
+        panel: resolve(pagesDir, "panel", "index.html"),
+        sandbox: resolve(pagesDir, "sandbox", "index.html"),
+      },
+      output: {
+        entryFileNames: (chunk) => `src/pages/${chunk.name}/index.js`,
+      },
+    },
+  },
+});