Search Bar in a Firefox New Tab Extension: Which Engine, How to Handle

Adding a search bar to a new tab extension sounds simple — it's just a text input and a redirect. But there are enough details to get right that it's worth writing down.

The Basic Implementation

<form id="search-form" role="search">
  <input
    type="search"
    id="search-input"
    placeholder="Search..."
    autocomplete="off"
    autofocus
  />
</form>

document.getElementById('search-form').addEventListener('submit', e => {
  e.preventDefault();
  const query = document.getElementById('search-input').value.trim();
  if (query) {
    window.location.href = buildSearchUrl(query);
  }
});

Supporting Multiple Search Engines

const SEARCH_ENGINES = {
  google: {
    name: 'Google',
    url: 'https://www.google.com/search?q=',
    icon: '🔍'
  },
  duckduckgo: {
    name: 'DuckDuckGo',
    url: 'https://duckduckgo.com/?q=',
    icon: '🦆'
  },
  bing: {
    name: 'Bing',
    url: 'https://www.bing.com/search?q=',
    icon: '🔷'
  },
  brave: {
    name: 'Brave Search',
    url: 'https://search.brave.com/search?q=',
    icon: '🦁'
  },
  startpage: {
    name: 'Startpage',
    url: 'https://www.startpage.com/search?q=',
    icon: '🔒'
  },
};

function buildSearchUrl(query, engine = 'google') {
  const { url } = SEARCH_ENGINES[engine] || SEARCH_ENGINES.google;
  return url + encodeURIComponent(query);
}

Keyboard Shortcut: Focus Search on Any Key

For power users — pressing any letter key should focus the search bar:

document.addEventListener('keydown', e => {
  // Don't steal focus if user is typing in another input
  if (document.activeElement.tagName === 'INPUT') return;
  if (document.activeElement.tagName === 'TEXTAREA') return;

  // Skip special keys
  if (e.ctrlKey || e.metaKey || e.altKey) return;
  if (e.key.length !== 1) return; // Skip Shift, Enter, etc.

  const searchInput = document.getElementById('search-input');
  searchInput.focus();
  // Don't prevent default — let the keystroke go into the input
});

URL Detection: Smart Redirect

Users often type URLs into search bars. Detect and redirect directly:

function isUrl(input) {
  // Has a dot and no spaces -> likely a URL
  if (!input.includes('.') || input.includes(' ')) return false;

  // Check known TLDs
  const tldPattern = /\.(com|net|org|io|dev|co|app|ai|me|uk|de|fr|ca|au)(\/.*)?$/i;
  if (tldPattern.test(input)) return true;

  // Has http(s):// prefix
  if (/^https?:\/\//i.test(input)) return true;

  return false;
}

function buildSearchUrl(query, engine = 'google') {
  if (isUrl(query)) {
    // Navigate directly to URL
    if (/^https?:\/\//i.test(query)) return query;
    return 'https://' + query;
  }

  const { url } = SEARCH_ENGINES[engine] || SEARCH_ENGINES.google;
  return url + encodeURIComponent(query);
}

Open in New Tab vs Same Tab

Let users decide:

document.getElementById('search-form').addEventListener('submit', e => {
  e.preventDefault();
  const query = document.getElementById('search-input').value.trim();
  if (!query) return;

  const url = buildSearchUrl(query, currentEngine);

  if (openInNewTab) {
    window.open(url, '_blank');
  } else {
    window.location.href = url;
  }
});

// Also handle Ctrl+Enter for "new tab" regardless of setting
document.getElementById('search-input').addEventListener('keydown', e => {
  if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
    e.preventDefault();
    const query = e.target.value.trim();
    if (query) window.open(buildSearchUrl(query), '_blank');
  }
});

Search Suggestions (Optional)

For DuckDuckGo, there's a free suggestions API:

async function getSuggestions(query) {
  if (query.length < 2) return [];
  try {
    const resp = await fetch(
      `https://duckduckgo.com/ac/?q=${encodeURIComponent(query)}&type=list`
    );
    const [, suggestions] = await resp.json();
    return suggestions.slice(0, 5);
  } catch {
    return [];
  }
}

Note: This requires host_permissions for https://duckduckgo.com/ in your manifest.

Accessibility

Don't forget:

<form role="search" aria-label="Web search">
  <label for="search-input" class="visually-hidden">Search the web</label>
  <input
    type="search"
    id="search-input"
    aria-label="Search query"
    placeholder="Search or enter address"
  />
  <button type="submit" aria-label="Search">
    <svg><!-- search icon --></svg>
  </button>
</form>

What Engine to Default To?

I use Google as default in Weather & Clock Dashboard because it's what most users expect. But DuckDuckGo is a close second for privacy-conscious users, and it's trivially changeable in settings.

The key principle: match the user's existing habits. A new tab extension is productivity infrastructure — it should disappear into the workflow, not require relearning.

Weather & Clock Dashboard — free Firefox new tab with search, weather, and clocks. MIT licensed, no tracking.

推荐订阅源

DEV Community