Menu

Post image 1
Post image 2
1 / 2
0

Building a Search Bar for Your Firefox New Tab Extension

DEV Community·Weather Clock Dash·29 days ago
#q2PvRe50
#firefox#javascript#ux#webdev#search#input
Reading 0:00
15s threshold

Building a Search Bar for Your Firefox New Tab Extension A search bar is the highest-ROI feature for any new tab extension. Users type queries dozens of times per day — if your extension can save them from navigating to google.com first, that's real value. Here's how I built the search bar in the Weather & Clock Dashboard extension. The Basic HTML <form id= "search-form" class= "search-form" role= "search" > <div class= "search-wrapper" > <svg class= "search-icon" viewBox= "0 0 24 24" fill= "none" stroke= "currentColor" > <circle cx= "11" cy= "11" r= "8" /> <path d= "m21 21-4.35-4.35" /> </svg> <input type= "search" id= "search-input" class= "search-input" placeholder= "Search the web..." autocomplete= "off" spellcheck= "false" autofocus /> </div> </form> Enter fullscreen mode Exit fullscreen mode Handling Form Submission The key: submit to the right search engine based on user preference.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More