Chrome Extension Popup To Fullpage — Best Practices

3 min read

Popup-to-Fullpage Pattern

Overview

The popup-to-fullpage pattern enables Chrome extensions to expand compact popup interfaces into full-tab pages when users need additional screen real estate. Chrome’s extension architecture imposes size constraints on popup windows, typically limiting them to approximately 800x600 pixels. While sufficient for quick actions, this restricted viewport becomes problematic for complex dashboards, detailed data tables, forms with multiple sections, or any interface requiring extensive scrolling.

This pattern differs from popup-to-tab by emphasizing dedicated fullpage views with redesigned layouts optimized for larger screens, rather than simply opening the same popup HTML in a tab.

Why Use Fullpage Views

Popup windows have inherent limitations beyond size. They close when users click outside them, making it impossible to reference extension content while working in other tabs. They cannot be pinned, bookmarked, or arranged in tab groups. Fullpage views eliminate these constraints entirely, providing the full browser tab experience with persistent access, multi-column layouts, and complex UI elements.

Implementation

Opening Fullpage Views

// From popup or background script
function openFullpage(view) {
  chrome.tabs.create({
    url: chrome.runtime.getURL(view + '.html'),
    active: true
  });
}

document.getElementById('open-dashboard').addEventListener('click', () => {
  openFullpage('dashboard');
  window.close();
});

Deep Linking with URL Parameters

// Opening with section targeting
chrome.tabs.create({
  url: chrome.runtime.getURL('dashboard.html?section=analytics&view=detailed')
});

// Parse parameters
const params = new URLSearchParams(window.location.search);
const section = params.get('section') || 'overview';

Context Detection

function detectContext() {
  const url = window.location.href;
  if (url.includes('popup.html')) return 'popup';
  if (url.includes('fullpage.html')) return 'fullpage';
  return 'unknown';
}

State Sharing

Storage-Based State

const appState = {
  async load() {
    this.data = await chrome.storage.local.get(null);
  },
  async update(updates) {
    await chrome.storage.local.set(updates);
  }
};

chrome.storage.onChanged.addListener((changes) => appState.load());

Side Panel as Middle Ground

The side panel provides an intermediate option between popup and fullpage. Side panels persist across tab navigation and can display extension content alongside web content:

chrome.sidePanel.setOptions({ path: 'sidepanel.html', enabled: true });
chrome.sidePanel.open();

Best Practices

Maintain a single codebase that adapts to context using responsive design and context detection. Preserve user state when switching between views using sessionStorage for scroll position and navigation history. Use hash-based routing for SPA behavior in chrome-extension:// URLs.

See popup-to-tab for the related pattern covering popup-to-tab expansion. The side panel documentation covers the middle ground approach. Popup Patterns provides additional implementation guidance. -e —

Part of the Chrome Extension Guide by theluckystrike. Built at zovo.one.

← Previous popup-state-persistence Next → popup-to-tab