browser-extension-manager 1.2.2 → 1.2.4

package/dist/gulp/tasks/distribute.js

@@ -15,6 +15,9 @@ const config = Manager.getConfig('project');
 const rootPathPackage = Manager.getRootPath('main');
 const rootPathProject = Manager.getRootPath('project');
 
+// Constants
+const LOUD = process.env.BXM_LOUD_LOGS === 'true';
+
 // Glob
 const input = [
   // Files to include
@@ -108,7 +111,9 @@ function customTransform() {
     const relativePath = path.relative(file.base, file.path).replace(/\\/g, '/');
 
     // Log
-    logger.log(`Processing file: ${relativePath}`);
+    if (LOUD) {
+      logger.log(`Processing file: ${relativePath}`);
+    }
 
     // Change path if it starts with 'pages/'
     // if (relativePath.startsWith('pages/')) {

package/dist/gulp/tasks/package.js

@@ -58,6 +58,7 @@ async function generateBuildJs(outputDir) {
       },
       config: {
         // Core metadata
+        runtime: 'browser-extension',
         version: project.version,
         environment: Manager.getEnvironment(),
         buildTime: Date.now(),
@@ -97,8 +98,11 @@ async function generateBuildJs(outputDir) {
         refreshNewVersion: { enabled: true, config: {} },
         serviceWorker: { enabled: false, config: {} },
 
-        // Analytics
-        google_analytics: config.google_analytics || {},
+        // Tracking
+        tracking: {
+          'google-analytics': config.google_analytics?.id || '',
+          'google-analytics-secret': config.google_analytics?.secret || '',
+        },
 
         // Theme config
         theme: config.theme || {},

package/dist/gulp/tasks/publish.js

@@ -59,6 +59,7 @@ async function publish(complete) {
     logger.log('  Chrome: CHROME_EXTENSION_ID, CHROME_CLIENT_ID, CHROME_CLIENT_SECRET, CHROME_REFRESH_TOKEN');
     logger.log('  Firefox: FIREFOX_EXTENSION_ID, FIREFOX_API_KEY, FIREFOX_API_SECRET');
     logger.log('  Edge: EDGE_PRODUCT_ID, EDGE_CLIENT_ID, EDGE_API_KEY');
+    logger.log('  Opera: No API available - submit manually at https://addons.opera.com/developer/');
     return complete();
   }
 

package/dist/gulp/tasks/webpack.js

@@ -49,12 +49,11 @@ const watchInput = [
   `${rootPathPackage}/dist/assets/themes/**/*.js`,
   'src/assets/themes/**/*.js',
 
-  // Component files - watch for changes to trigger recompile
-  `${rootPathPackage}/src/popup.js`,
-  `${rootPathPackage}/src/options.js`,
-  `${rootPathPackage}/src/page.js`,
-  `${rootPathPackage}/src/sidepanel.js`,
-  `${rootPathPackage}/src/index.js`,
+  // All project assets js - watch for changes but don't compile as entry points
+  'src/assets/js/**/*.js',
+
+  // All BEM package src files - watch for changes (includes background.js, popup.js, etc.)
+  `${rootPathPackage}/src/**/*.js`,
 
   // So we can watch for changes while we're developing web-manager
   `${rootPathPackage}/../web-manager/src`,
@@ -108,6 +107,9 @@ function getSettings() {
       },
       // Add module resolution paths
       modules: [
+        // Local web-manager's node_modules (for when we're using "web-manager": "file:../web-manager")
+        path.resolve(rootPathPackage, '../web-manager/node_modules'),
+
         // Package's node_modules
         path.resolve(rootPathPackage, 'node_modules'),
 

package/dist/lib/auth-helpers.js

@@ -0,0 +1,184 @@
+// Auth helpers for cross-context auth sync in browser extensions
+// Used by popup.js, options.js, sidepanel.js, page.js
+
+/**
+ * Sign in with custom token from storage
+ * @param {Object} context - The manager instance
+ * @param {Object} authState - Auth state with token
+ */
+async function signInWithStoredToken(context, authState) {
+  const { webManager, logger } = context;
+
+  // Skip if no token
+  if (!authState?.token) {
+    logger.log('[AUTH-SYNC] No token in auth state, skipping sign in');
+    return;
+  }
+
+  try {
+    logger.log('[AUTH-SYNC] Signing in with stored token...');
+
+    // Sign in using webManager's auth which initializes Firebase
+    await webManager.auth().signInWithCustomToken(authState.token);
+
+    logger.log('[AUTH-SYNC] Signed in successfully:', authState.user?.email);
+  } catch (error) {
+    // Token may have expired, clear it
+    logger.error('[AUTH-SYNC] Error signing in with token:', error.message);
+
+    // If token is invalid/expired, clear the auth state
+    if (error.code === 'auth/invalid-custom-token' || error.code === 'auth/custom-token-expired') {
+      logger.log('[AUTH-SYNC] Token expired, clearing auth state');
+      context.extension.storage.remove('bxm:authState');
+    }
+  }
+}
+
+/**
+ * Set up storage listener for cross-context auth sync
+ * Listens for auth state changes from background.js and syncs Firebase auth
+ * @param {Object} context - The manager instance (must have extension, webManager, logger)
+ */
+export function setupAuthStorageListener(context) {
+  const { extension, webManager, logger } = context;
+
+  // Check existing auth state on load and sign in
+  extension.storage.get('bxm:authState', (result) => {
+    const authState = result['bxm:authState'];
+
+    if (authState?.token) {
+      logger.log('[AUTH-SYNC] Found existing auth state, signing in...', authState.user?.email);
+      signInWithStoredToken(context, authState);
+    }
+  });
+
+  // Listen for WM auth state changes and sync to storage
+  // When user signs out via WM, clear storage so background.js knows
+  webManager.auth().listen((state) => {
+    if (!state.user) {
+      // User signed out - clear storage so all contexts sync
+      logger.log('[AUTH-SYNC] WM auth signed out, clearing storage...');
+      extension.storage.remove('bxm:authState');
+    }
+  });
+
+  // Listen for storage changes from background.js
+  // Note: BEM normalizes storage to sync or local, so we listen to all areas
+  extension.storage.onChanged.addListener((changes) => {
+    // Check for auth state change
+    const authChange = changes['bxm:authState'];
+    if (!authChange) {
+      return;
+    }
+
+    // Log
+    logger.log('[AUTH-SYNC] Auth state changed in storage:', authChange);
+
+    // Get the new auth state
+    const newAuthState = authChange.newValue;
+
+    // If auth state was cleared (signed out)
+    if (!newAuthState) {
+      logger.log('[AUTH-SYNC] Auth state cleared, signing out...');
+      webManager.auth().signOut();
+      return;
+    }
+
+    // Sign in with the new token
+    if (newAuthState?.token) {
+      signInWithStoredToken(context, newAuthState);
+    }
+  });
+
+  // Log
+  logger.log('Auth storage listener set up');
+}
+
+/**
+ * Open auth page in new tab (for signing in via website)
+ * @param {Object} context - The manager instance (must have extension, webManager, logger)
+ * @param {Object} options - Options object
+ * @param {string} options.path - Path to open (default: '/token')
+ * @param {string} options.authReturnUrl - Return URL for electron/deep links
+ */
+export function openAuthPage(context, options = {}) {
+  const { extension, webManager, logger } = context;
+
+  // Get auth domain from config
+  const authDomain = webManager.config?.firebase?.app?.config?.authDomain;
+
+  if (!authDomain) {
+    logger.error('No authDomain configured');
+    return;
+  }
+
+  // Build the URL
+  const path = options.path || '/token';
+  const authUrl = new URL(path, `https://${authDomain}`);
+
+  // Add return URL if provided (for electron/deep links)
+  if (options.authReturnUrl) {
+    authUrl.searchParams.set('authReturnUrl', options.authReturnUrl);
+  }
+
+  // Log
+  logger.log('Opening auth page:', authUrl.toString());
+
+  // Get current active tab so we can restore it after auth
+  extension.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+    const authSourceTabId = tabs[0]?.id;
+
+    // Add source tab ID to URL so background can restore it
+    if (authSourceTabId) {
+      authUrl.searchParams.set('authSourceTabId', authSourceTabId);
+    }
+
+    // Open in new tab
+    extension.tabs.create({ url: authUrl.toString() });
+  });
+}
+
+/**
+ * Set up DOM event listeners for auth buttons (sign in, account)
+ * Uses event delegation so it works with dynamically rendered content
+ * @param {Object} context - The manager instance (must have extension, webManager, logger)
+ */
+export function setupAuthEventListeners(context) {
+  // Only set up once DOM is ready
+  if (typeof document === 'undefined') {
+    return;
+  }
+
+  // Sign in button (.auth-signin-btn) - opens auth page
+  document.addEventListener('click', (event) => {
+    const $signInBtn = event.target.closest('.auth-signin-btn');
+    if (!$signInBtn) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    openAuthPage(context);
+  });
+
+  // Account button (.auth-account-btn) - opens account page on website
+  document.addEventListener('click', (event) => {
+    const $accountBtn = event.target.closest('.auth-account-btn');
+    if (!$accountBtn) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    openAuthPage(context, { path: '/account' });
+  });
+
+  // Note: .auth-signout-btn is handled by web-manager's auth module
+  // BEM's storage listener will detect the sign-out via onAuthStateChanged in background.js
+  // If background hasn't initialized Firebase yet, stale storage is cleared on next auth attempt
+
+  // Log
+  context.logger.log('Auth event listeners set up');
+}

package/dist/lib/logger.js

@@ -1,5 +1,5 @@
 // Libraries
-const chalk = require('chalk');
+const chalk = require('chalk').default;
 
 // Logger class
 function Logger(name) {

package/dist/options.js

@@ -2,6 +2,7 @@
 import { Manager as WebManager } from 'web-manager';
 import extension from './lib/extension.js';
 import LoggerLite from './lib/logger-lite.js';
+import { setupAuthStorageListener, setupAuthEventListeners, openAuthPage as openAuthPageHelper } from './lib/auth-helpers.js';
 
 // Import theme (exposes Bootstrap to window.bootstrap)
 import '__theme__/_theme.js';
@@ -29,12 +30,28 @@ class Manager {
     // Initialize
     await this.webManager.initialize(configuration);
 
+    // Set up auth state listener (updates bindings with user/account state)
+    this.webManager.auth().listen((state) => {
+      this.logger.log('Auth state changed:', state);
+    });
+
+    // Set up storage listener for cross-context auth sync
+    setupAuthStorageListener(this);
+
+    // Set up auth event listeners (sign in, account buttons)
+    setupAuthEventListeners(this);
+
     // Log
     this.logger.log('Initialized!', this);
 
     // Return manager instance
     return this;
   }
+
+  // Open auth page in new tab (for signing in via website)
+  openAuthPage(options = {}) {
+    openAuthPageHelper(this, options);
+  }
 }
 
 // Export

package/dist/page.js

@@ -2,6 +2,7 @@
 import { Manager as WebManager } from 'web-manager';
 import extension from './lib/extension.js';
 import LoggerLite from './lib/logger-lite.js';
+import { setupAuthStorageListener, setupAuthEventListeners, openAuthPage as openAuthPageHelper } from './lib/auth-helpers.js';
 
 // Import theme (exposes Bootstrap to window.bootstrap)
 import '__theme__/_theme.js';
@@ -29,12 +30,28 @@ class Manager {
     // Initialize
     await this.webManager.initialize(configuration);
 
+    // Set up auth state listener (updates bindings with user/account state)
+    this.webManager.auth().listen((state) => {
+      this.logger.log('Auth state changed:', state);
+    });
+
+    // Set up storage listener for cross-context auth sync
+    setupAuthStorageListener(this);
+
+    // Set up auth event listeners (sign in, account buttons)
+    setupAuthEventListeners(this);
+
     // Log
     this.logger.log('Initialized!', this);
 
     // Return manager instance
     return this;
   }
+
+  // Open auth page in new tab (for signing in via website)
+  openAuthPage(options = {}) {
+    openAuthPageHelper(this, options);
+  }
 }
 
 // Export

package/dist/popup.js

@@ -2,6 +2,7 @@
 import { Manager as WebManager } from 'web-manager';
 import extension from './lib/extension.js';
 import LoggerLite from './lib/logger-lite.js';
+import { setupAuthStorageListener, setupAuthEventListeners, openAuthPage as openAuthPageHelper } from './lib/auth-helpers.js';
 
 // Import theme (exposes Bootstrap to window.bootstrap)
 import '__theme__/_theme.js';
@@ -29,12 +30,28 @@ class Manager {
     // Initialize
     await this.webManager.initialize(configuration);
 
+    // Set up auth state listener (updates bindings with user/account state)
+    this.webManager.auth().listen((state) => {
+      this.logger.log('Auth state changed:', state);
+    });
+
+    // Set up storage listener for cross-context auth sync
+    setupAuthStorageListener(this);
+
+    // Set up auth event listeners (sign in, account buttons)
+    setupAuthEventListeners(this);
+
     // Log
     this.logger.log('Initialized!', this);
 
     // Return manager instance
     return this;
   }
+
+  // Open auth page in new tab (for signing in via website)
+  openAuthPage(options = {}) {
+    openAuthPageHelper(this, options);
+  }
 }
 
 // Export

package/dist/sidepanel.js

@@ -2,6 +2,7 @@
 import { Manager as WebManager } from 'web-manager';
 import extension from './lib/extension.js';
 import LoggerLite from './lib/logger-lite.js';
+import { setupAuthStorageListener, setupAuthEventListeners, openAuthPage as openAuthPageHelper } from './lib/auth-helpers.js';
 
 // Import theme (exposes Bootstrap to window.bootstrap)
 import '__theme__/_theme.js';
@@ -29,12 +30,28 @@ class Manager {
     // Initialize
     await this.webManager.initialize(configuration);
 
+    // Set up auth state listener (updates bindings with user/account state)
+    this.webManager.auth().listen((state) => {
+      this.logger.log('Auth state changed:', state);
+    });
+
+    // Set up storage listener for cross-context auth sync
+    setupAuthStorageListener(this);
+
+    // Set up auth event listeners (sign in, account buttons)
+    setupAuthEventListeners(this);
+
     // Log
     this.logger.log('Initialized!', this);
 
     // Return manager instance
     return this;
   }
+
+  // Open auth page in new tab (for signing in via website)
+  openAuthPage(options = {}) {
+    openAuthPageHelper(this, options);
+  }
 }
 
 // Export