Skip to content

Instantly share code, notes, and snippets.

@wilmoore
Last active June 5, 2024 20:45
Show Gist options
  • Save wilmoore/95623ccdf31438c233a5e41f091894c0 to your computer and use it in GitHub Desktop.
Save wilmoore/95623ccdf31438c233a5e41f091894c0 to your computer and use it in GitHub Desktop.
Software Engineering :: Web :: Browser :: Extension :: Development :: Press Forward/Slash to Search

Software Engineering :: Web :: Browser :: Extension :: Development :: Press Forward/Slash to Search

⪼ Made with 💜 by Polyglot.

related
reference

About

When you navigate to a web page that contains a search field, about 95% of the time, the only thing you care to do on that page is...search. Most websites do not automatically place your cursor into the search box. This means, you have to manually place the focus on the serach box, usually with your mouse or trackpad, click, then type. This extension saves you from moving your hands from the keyboard by allowing you to simply type the / key. When you hit the / key, focus is placed into the search box allowing you to immediately type your search query. By pressing the enter|return key, your search is executed.

Logo Ideas

Unicode U+2315

P /
2 0\

image

Todo

  • MVP / V1
  • Design Logo
  • Icon (based on logo)
  • Help Page
  • Publish
  • Website (Link to product hunt)
  • Product Hunt Submission
  • LinkedIn

Options

  • Enable Placeholder Text: Press / To Search
  • Enable Tour
  • Shortcuts
    • /
    • [ESC]

Popup

Browser Storage + Sync

Pause on this site:

  • Once
  • Forever

Creating /eeek

mkdir browser-extension-eeek
cd browser-extension-eeek

» touch manifest.json
» touch background.js
» touch content.js
» touch popup.{html,js}
» code .
» mkdir images

Features

  • a single keyboard shortcut to show keyboard shortcuts for the current website (?) - if it already exists, then, we don't do anything
  • adds useful keyboard shortcuts to websites that do not have any
    • ?: Open keyboard shortcut help
    • /: search (i.e. LinkedIn)
    • gi: go to inbox (i.e. LinkedIn)
    • gc: go to contacts/connections (i.e. LinkedIn)
    • gp: go to pages (i.e. LinkedIn)
    • gn: go to newsletters (i.e. LinkedIn)

Icons

Input Selector Priority

  1. input[name="q"]
  2. input[inputmode="search"]
  3. input[aria-label="Search" i]
  4. input[aria-label~"Search" i]
  5. input[placeholder~"Search" i]

Input Research

<input type="text" id="twotabsearchtextbox" value="" name="field-keywords" autocomplete="off" placeholder="Search Amazon" class="nav-input nav-progressive-attribute" dir="auto" tabindex="0" aria-label="Search Amazon" spellcheck="false" data-last-active-input="">
<input name="q" id="input_search-box-input-comp-lmi8x0l2" class="KvoMHf has-custom-focus wixui-text-input__input" type="search" placeholder="Type to Search..." aria-required="false" maxlength="100" autocomplete="off" aria-label="Type to Search..." value="" data-last-active-input="">

inputmode="search"

<input aria-expanded="false" aria-owns="search-dropdown-results" data-accessibility-id="header-search-input-field" data-anchor-id="HeaderSearchInputField" data-lpignore="true" type="text" aria-label="Store search: begin typing to search for stores available on DoorDash" autocomplete="off" placeholder="Search stores, dishes, products" inputmode="search" id="FieldWrapper-0" aria-describedby="search-dropdown-results" class="Input__InputContent-sc-1o75rg4-3 idveBz" value="" data-last-active-input="">
<input class="nav-v2-search__input" type="text" name="q" placeholder="Search..." autocomplete="off" value="" data-last-active-input="">
<input class="main__search-input" type="text" name="q" tabindex="1" placeholder="Enter the domain you want" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" required="" data-last-active-input="">
<input id="search-bar-input" autocomplete="off" autocorrect="off" autocapitalize="off" aria-autocomplete="both" aria-haspopup="listbox" aria-describedby="search-term-accessibility-navigation-input" aria-controls="dropdown-container" placeholder="Search products, stores, and recipes" aria-expanded="false" class="e-60moso" value="" aria-label="Search" data-last-active-input="">
<input class="search-global-typeahead__input" placeholder="Search" role="combobox" aria-autocomplete="list" aria-label="Search" aria-activedescendant="" aria-expanded="false" type="text" data-last-active-input="">

document.querySelector('[id*=search]').focus()

<input id="search-field" type="text" class="ydbIO" placeholder="Try searching &quot;Calendar&quot;" autocomplete="off" value="">

Inspiration

GitHub

Source

image

Input

image

Robinhood

Screenshots

Jasper

Screenshots
image
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment