Using Chrome on a Desktop? How To Get Search Results Faster.

Google notified me that all Chrome extensions had to be upgraded to Manifest Version 3. I took this as an opportunity to redesign and rebrand one of my extensions: New Tab: Search.

I previously wrote about it here:

Searching is easy. Here’s how to make it even easier.

What does it do?

Performing a search takes 4 steps:

1. Open the browser (ex. Chrome)
2. Visit the website (ex. Amazon)
3. Enter search text (ex. pickle lip balm)
4. Click the Search button or hit Enter/Return

Obviously you still have to open the browser (Step 1) and specify what you’re looking for (Step 3).

With this Chrome Extension, the search box is already on the page. Once you put in your criteria, click the logo where to search (Step 4).

I’m saving you the step of visiting the website directly (Step 2)

Is it customizable?

Yes — these are the available sites that can be searched:

Platforms available for you to search. Only show the ones you care about.

Rebranding

In addition to the redesign, I wanted to brand it a little differently. The “story” I wanted to tell changed from:

Change your default “new tab” screen to get results faster

to:

Get search results faster

Less text. Simpler.

Technical challenges migrating from Manifest V2 to V3

Looking back at my Google Search History, the migration wasn’t too bad:

I use a Google API for the “autocomplete” — the predictive text for the search term.

How to have Google AutoComplete in a Chrome Extension

So far this post is mostly just advertising my new Chrome Extension 😃.

Here are some coding snippets for the technical audience.

Below is the code used in the background.js file.

// background.js
chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
      if (request.action == "getAutocompleteData") {
        // Use fetch to make the request
        fetch('https://suggestqueries.google.com/complete/search?output=chrome&hl=en&q=' + encodeURIComponent(request.term))
          .then(response => response.json())
          .then(data => {
            sendResponse(data[1]);
          })
          .catch(error => {
            console.error('Error fetching autocomplete data:', error);
          });
  
        // To indicate that sendResponse will be called asynchronously
        return true;
      }
    }
  );

And then in the javascript file that calls it:

$(function () {
 // Autosuggest
 var getData = function (request, response) {
  chrome.runtime.sendMessage({ action: "getAutocompleteData", term: request.term }, function(data) {
   response(data);
  });
 };
 
 var selectItem = function (event, ui) {
  $("#searchBox").val(ui.item.value);
  return false;
 }
 
 $("#searchBox").autocomplete({
  source: getData,
  select: selectItem,
  minLength: 2
 });
});

Is it perfect? No.

I wanted the search input box to immediately have the “focus”. Right now the user needs to click in the box before they can start typing.

I spent several hours trying to come up with a work-around, but couldn’t figure it out. When opening a new Chrome tab, the cursor is always placed in the URL bar. So an extra “click” is still needed.

Depending on the site, you may have to click into the search box anyways (example at the time of writing: Amazon). I made another extension (Autofocus Cursor) to combat this.

Click here to download the free Chrome Extension “New Tab: Search”