Skip to content

⚠️ Extension working But ❌ Chrome API not showing up on console #160

@amjadiqbal

Description

@amjadiqbal

I have successfully setup the extension, and I got 2 issues first the extension is only working 2nd tabs, not the first tab also when I type chrome on console it return me empty object,

also when click other than 2nd tabs, I got error unable to getActiveTab

this is my code,

const extensionSession = session.fromPartition('persist:chrome-extensions');
// Updated Chrome Extensions setup using optimized TabManager
const extensions = new ElectronChromeExtensions({
  session: extensionSession,
  license: 'GPL-3.0',
  createTab: async (details) => {
    console.log('[ChromeExt] New tab creation request:', details);
    
    if (!mainWindow) {
      throw new Error('Main window not available');
    }

    try {
      // Use the new optimized TabManager.createTab method
      const newTab = tabManager.createTab(
        mainWindow, 
        details.url || 'nexus://new-tab'
      );

      // CRITICAL: Return the NEW tab's webContents, not main window's
      // The Chrome Extensions system needs the actual tab's webContents
      if (newTab.browserView?.webContents) {
        return [newTab.browserView.webContents, mainWindow];
      }

      // Fallback to main window webContents if tab creation failed
      console.warn('[ChromeExt] ⚠️ Tab browserView not available, using main window');
      return [mainWindow.webContents, mainWindow];
    } catch (error) {
      console.error('[ChromeExt] ❌ Failed to create tab:', error);
      return [mainWindow.webContents, mainWindow];
    }
  },

  selectTab: (webContents, browserWindow) => {
    console.log('[ChromeExt] Selecting tab via Chrome API, webContents ID:', webContents.id);
  
    if (!mainWindow) {
      console.warn('[ChromeExt] ⚠️ Main window not available for tab selection');
      return;
    }
  
    try {
      const tabs = tabManager.getTabs(mainWindow);
      const tab = tabs.find(t =>
        t.browserView?.webContents?.id === webContents.id
      );
  
      if (tab) {
        const success = tabManager.activateTab(mainWindow, tab.id);
  
        if (success) {
          // ✅ Ensure extension system is aware of selection
          extensions.selectTab(tab.browserView!.webContents);
  
          console.log('[ChromeExt] ✅ Tab selected via tab manager:', tab.id);
        } else {
          console.warn('[ChromeExt] ⚠️ Failed to activate tab:', tab.id);
        }
      } else {
        console.warn('[ChromeExt] ⚠️ Tab not found for webContents ID:', webContents.id);
        console.log('[ChromeExt] Available tabs:', tabs.map(t => ({
          id: t.id,
          webContentsId: t.browserView?.webContents?.id,
          url: t.url
        })));
      }
    } catch (error) {
      console.error('[ChromeExt] ❌ Error selecting tab:', error);
    }
  },
  
  removeTab: (webContents, browserWindow) => {
    console.log('[ChromeExt] Removing tab via Chrome API, webContents ID:', webContents.id);
    
    if (!mainWindow) {
      console.warn('[ChromeExt] ⚠️ Main window not available for tab removal');
      return;
    }

    try {
      // Find the tab by webContents ID using the new tab structure
      const tabs = tabManager.getTabs(mainWindow);
      const tab = tabs.find(t => 
        t.browserView?.webContents?.id === webContents.id
      );

      if (tab) {
        // Use the new optimized TabManager.closeTab method
        const success = tabManager.closeTab(mainWindow, tab.id);
        
        if (success) {
          console.log('[ChromeExt] ✅ Tab removed via tab manager:', tab.id);
        } else {
          console.warn('[ChromeExt] ⚠️ Failed to close tab:', tab.id);
        }
      } else {
        console.warn('[ChromeExt] ⚠️ Tab not found for removal, webContents ID:', webContents.id);
        
        // Debug: List all available tabs
        console.log('[ChromeExt] Available tabs for removal:', tabs.map(t => ({
          id: t.id,
          webContentsId: t.browserView?.webContents?.id,
          url: t.url
        })));
      }
    } catch (error) {
      console.error('[ChromeExt] ❌ Error removing tab:', error);
    }
  },

  createWindow: async (details) => {
    console.log('[ChromeExt] Creating new window:', details);
    
    try {
      const newWindow = new BrowserWindow({
        width: details.width || 200,
        height: details.height || 200,
        x: details.left || 100,
        y: Math.max(details.top || 150, 0), // Ensure y is not negative
        frame: false,
        show: false,
        resizable: false,
        transparent: false,
        alwaysOnTop: true,
        skipTaskbar: true,
        focusable: true,
        webPreferences: {
          sandbox: true,
          session: session.defaultSession,
          contextIsolation: true,
          nodeIntegration: false,
          webSecurity: true
        }
      });

      // Load the popup URL if provided
      if (details.url) {
        await newWindow.loadURL(details.url);
      }

      newWindow.once('ready-to-show', () => {
        newWindow.show();
        console.log('[ChromeExt] ✅ Extension window shown:', newWindow.id);
      });

      // Close window on blur (when user clicks outside)
      newWindow.on('blur', () => {
        if (!newWindow.isDestroyed()) {
          console.log('[ChromeExt] Extension window lost focus, closing:', newWindow.id);
          newWindow.close();
        }
      });

      // Handle window close
      newWindow.on('closed', () => {
        console.log('[ChromeExt] Extension window closed:', newWindow.id);
      });

      return newWindow;
    } catch (error) {
      console.error('[ChromeExt] ❌ Failed to create extension window:', error);
      throw error;
    }
  },

  removeWindow: (browserWindow) => {
    console.log('[ChromeExt] Removing window via Chrome API:', browserWindow.id);
    
    try {
      if (browserWindow && !browserWindow.isDestroyed()) {
        browserWindow.destroy();
        console.log('[ChromeExt] ✅ Window removed successfully:', browserWindow.id);
      } else {
        console.warn('[ChromeExt] ⚠️ Window already destroyed or invalid');
      }
    } catch (error) {
      console.error('[ChromeExt] ❌ Error removing window:', error);
    }
  }
});

const activeTab = tabManager.getActiveTab(mainWindow);
console.log('[ChromeExt] Active tab:', activeTab);
if (activeTab && activeTab.browserView) {
  console.log("Active tab webContent Id is: ")
  // 
}

extensions.addTab(mainWindow!.webContents, mainWindow);

// CRITICAL: Handle CRX protocol for extension icons
ElectronChromeExtensions.handleCRXProtocol(session.defaultSession);

// Handle extension events
extensions.on('browser-action-popup-created', (popup) => {
  console.log('[ChromeExt] Browser action popup created:', {
    webContentsId: popup.browserWindow.webContents.id,
    windowId: popup.browserWindow.id
  });
});

extensions.on('url-overrides-updated', (urlOverrides) => {
  console.log('[ChromeExt] URL overrides updated:', urlOverrides);
});

// Handle extension errors
extensions.on('extension-ready', (extension) => {
  console.log('[ChromeExt] ✅ Extension ready:', {
    id: extension.id,
    name: extension.name,
    version: extension.version
  });
});

extensions.on('extension-unloaded', (extension) => {
  console.log('[ChromeExt] Extension unloaded:', {
    id: extension.id,
    name: extension.name
  });
});

// Initialize Chrome Web Store support
await installChromeWebStore({ 
  session: session.defaultSession,
  autoUpdate: true,
  loadExtensions: true,
  allowUnpackedExtensions: true
});

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions