Resolve tsconfig paths, add shadcn template

Author: cezaraugusto

examples/sidebar-shadcn/background.ts

@@ -1,11 +1,13 @@
 const isFirefoxLike =
-  typeof browser !== 'undefined' && typeof browser.sidebarAction !== 'undefined'
+  process.env.EXTENSION_PUBLIC_BROWSER === 'firefox' ||
+  process.env.EXTENSION_PUBLIC_BROWSER === 'gecko-based'
 
+  
 if (isFirefoxLike) {
   browser.browserAction.onClicked.addListener(() => {
     browser.sidebarAction.open()
   })
-} else if (typeof chrome !== 'undefined' && chrome.sidePanel) {
+} else {
   chrome.action.onClicked.addListener(() => {
     chrome.sidePanel.setPanelBehavior({openPanelOnActionClick: true})
   })

examples/sidebar-shadcn/manifest.json

@@ -28,7 +28,7 @@
     "default_panel": "sidebar/index.html",
     "default_title": "Side Panel Content"
   },
-  "permissions": ["tabs"],
+  "chromium:permissions": ["sidePanel"],
   "background": {
     "chromium:service_worker": "background.ts",
     "firefox:scripts": ["background.ts"]

examples/sidebar-shadcn/package.json

@@ -9,11 +9,6 @@
     "url": "https://yourwebsite.com"
   },
   "license": "MIT",
-  "scripts": {
-    "dev": "extension dev",
-    "start": "extension start",
-    "build": "extension build"
-  },
   "dependencies": {
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-slot": "^1.1.0",

examples/sidebar/background.js

@@ -1,18 +1,13 @@
-if (
+const isFirefoxLike =
   process.env.EXTENSION_PUBLIC_BROWSER === 'firefox' ||
   process.env.EXTENSION_PUBLIC_BROWSER === 'gecko-based'
-) {
-  // Firefox (Gecko-based browsers)
+
+if (isFirefoxLike) {
   browser.browserAction.onClicked.addListener(() => {
-    // Opening the sidebar in Firefox
     browser.sidebarAction.open()
   })
 } else {
-  // Chromium-based browsers
   chrome.action.onClicked.addListener(() => {
-    chrome.sidePanel.setOptions({
-      path: 'side_panel/default_path.html',
-      enabled: true
-    })
+    chrome.sidePanel.setPanelBehavior({openPanelOnActionClick: true})
   })
 }

examples/sidebar/manifest.json

@@ -14,27 +14,23 @@
     },
     "default_title": "Open Side Panel"
   },
-  "firefox:sidebar_action": {
-    "default_panel": "sidebar/index.html",
-    "default_title": "Open Sidebar",
-    "default_icon": "images/extension_48.png"
+  "firefox:browser_action": {
+    "default_icon": {
+      "48": "images/extension_48.png"
+    },
+    "default_title": "Open Side Panel"
   },
   "chromium:side_panel": {
     "default_path": "sidebar/index.html",
     "default_title": "Side Panel Content"
   },
+  "firefox:sidebar_action": {
+    "default_panel": "sidebar/index.html",
+    "default_title": "Side Panel Content"
+  },
   "chromium:permissions": ["sidePanel"],
-  "firefox:permissions": ["storage", "tabs"],
-  "chromium:web_accessible_resources": [
-    {
-      "resources": ["sidebar/index.html"],
-      "matches": ["<all_urls>"]
-    }
-  ],
-  "firefox:web_accessible_resources": ["sidebar/index.html"],
   "background": {
-    "chromium:type": "module",
-    "chromium:service_worker": "background.js",
-    "firefox:scripts": ["background.js"]
+    "chromium:service_worker": "background.ts",
+    "firefox:scripts": ["background.ts"]
   }
 }

programs/develop/webpack/plugin-compilation/env.ts

@@ -39,12 +39,8 @@ export class EnvPlugin {
       }
     }
 
-    if (!envPath) return
-
-    console.log(messages.envFileLoaded())
-
     // Load the .env file manually and filter variables prefixed with 'EXTENSION_PUBLIC_'
-    const envVars = dotenv.config({path: envPath}).parsed || {}
+    const envVars = envPath ? dotenv.config({path: envPath}).parsed || {} : {}
     const defaultsPath = path.join(projectPath, '.env.defaults')
     const defaultsVars = fs.existsSync(defaultsPath)
       ? dotenv.config({path: defaultsPath}).parsed || {}
@@ -70,7 +66,7 @@ export class EnvPlugin {
         {} as Record<string, string>
       )
 
-    // Support native environment variables:
+    // Ensure default environment variables are always available:
     // - EXTENSION_PUBLIC_BROWSER
     // - EXTENSION_PUBLIC_ENV_MODE
     filteredEnvVars['process.env.EXTENSION_PUBLIC_BROWSER'] = JSON.stringify(
@@ -106,7 +102,7 @@ export class EnvPlugin {
 
                 // Replace environment variables in the format $EXTENSION_PUBLIC_VAR
                 fileContent = fileContent.replace(
-                  /\$EXTENSION_PUBLIC_[A-Z_]+/g,
+                  /$EXTENSION_PUBLIC_[A-Z_]+/g,
                   (match) => {
                     const envVarName = match.slice(1) // Remove the '$'
                     const value = combinedVars[envVarName] || match

programs/develop/webpack/plugin-compilation/index.ts

@@ -1,7 +1,5 @@
-import path from 'path'
 import {Compiler} from 'webpack'
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin'
-import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'
 import {EnvPlugin} from './env'
 import {CleanDistFolderPlugin} from './clean-dist'
 import * as messages from '../lib/messages'
@@ -28,15 +26,6 @@ export class CompilationPlugin {
       browser: this.browser
     }).apply(compiler)
 
-    compiler.options.resolve.plugins = [
-      new TsconfigPathsPlugin({
-        configFile: path.resolve(
-          path.dirname(this.manifestPath),
-          'tsconfig.json'
-        )
-      })
-    ]
-
     new CleanDistFolderPlugin().apply(compiler)
 
     compiler.hooks.done.tap('develop:brand', (stats) => {

programs/develop/webpack/plugin-js-frameworks/index.ts

@@ -1,6 +1,7 @@
 import path from 'path'
 import {type Compiler} from 'webpack'
 import {PluginInterface} from '../webpack-types'
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'
 import {maybeUseBabel} from './js-tools/babel'
 import {isUsingPreact, maybeUsePreact} from './js-tools/preact'
 import {isUsingReact, maybeUseReact} from './js-tools/react'
@@ -90,6 +91,17 @@ export class JsFrameworksPlugin {
     maybeInstallPreact?.plugins?.forEach((plugin) => plugin.apply(compiler))
     maybeInstallVue?.plugins?.forEach((plugin) => plugin.apply(compiler))
     maybeInstallSvelte?.plugins?.forEach((plugin) => plugin.apply(compiler))
+
+    if (isUsingTypeScript(projectPath)) {
+      compiler.options.resolve.plugins = [
+        new TsconfigPathsPlugin({
+          configFile: path.resolve(
+            path.dirname(this.manifestPath),
+            'tsconfig.json'
+          )
+        })
+      ]
+    }
   }
 
   public async apply(compiler: Compiler) {