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

<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);
  }
});

const SEARCH_ENGINES = {
  google: {
    name: 'Google',
    url: 'https://www.google.com/search?q=',
    icon: '🔍'
  },
  duckduckgo: {
    name: 'DuckDuckGo',
    url: 'ht

tps://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

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

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

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)

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

<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> ```

Pitfall Guide

1. URL vs. Search Query Ambiguity: Failing to implement regex-based TLD detection and protocol prefix checks causes direct domain inputs to be URL-encoded and sent to search engines, resulting in broken navigation and user frustration.
2. Keyboard Focus Hijacking: Attaching global keydown listeners without validating document.activeElement steals focus from textareas, contenteditable divs, or settings panels, breaking expected browser input behavior.
3. Missing host_permissions for External APIs: Fetching suggestions from third-party engines (e.g., DuckDuckGo) fails silently in Firefox's extension sandbox unless explicitly declared in manifest.json, leading to degraded functionality without console errors.
4. Ignoring Modifier Key Combinations: Hardcoding single-tab redirects ignores power-user expectations. Omitting Ctrl/Cmd + Enter handling for background tabs significantly reduces productivity in a new-tab context.
5. Accessibility Omissions: Skipping role="search", aria-label, and proper label association breaks screen reader compatibility and frequently triggers rejection during Mozilla Add-on Store automated compliance scans.
6. Default Engine Misalignment: Forcing a privacy-focused engine on users expecting Google (or vice versa) increases cognitive load. The extension should default to the user's established mental model while providing trivial switching in settings.

Deliverables

• 📐 Architecture Blueprint: firefox-newtab-search-blueprint.pdf — System diagram covering query routing logic, manifest permission mapping, state management for engine selection, and event delegation flow.
• ✅ Pre-Launch Validation Checklist: extension-qa-checklist.md — 14-point audit covering URL regex edge cases, host_permissions alignment, WCAG 2.1 AA compliance, keyboard shortcut conflict testing, and Firefox Add-on Store policy verification.
• ⚙️ Configuration Templates:
  • manifest.json snippet for secure API routing and CSP alignment
  • search-config.js boilerplate for multi-engine definitions with fallback logic
  • accessibility-markup.html template with ARIA roles, visually-hidden labels, and semantic form structure ready for direct integration.