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>

Enter fullscreen mode

Exit fullscreen mode

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