How to Create a Chrome Extension to Restore the Google Maps Button

Łukasz Kaproń — Wed, 17 Jul 2024 20:02:11 +0000

Hi!
It is a tutorial how to create very simple Chrome Extension to restore Google Maps button. In compliance with the EU Digital Markets Act (DMA), Google made changes to Google Search in the European Economic Area (EEA), removing the Maps link at the top of the search page that links to Google Maps. I decided to create an extension to restore this button.

We will cover how to:

Create a manifest.json file - required for Chrome Extension
Inspect the Google search results page to understand its structure.
Write a JavaScript file to inject the Maps button.
Add the new Chrome extension to your browser.

How to start?

Google provides excellent documentation about creating Chrome extensions.

Let's start

Firstly, we have to create manifest.json file. I won't go into details about this file. You can read more about it here.

{
    "manifest_version": 3,
    "name": "Google Maps button restored",
    "version": "1.0",
    "description": "Restore google maps button on search page",
    "content_scripts": [
      {
        "js": ["content.js"],
        "matches": [
          "*://www.google.com/search*"
        ]
      }
    ]
  }

What do we want to do?

Before we start coding, we need to understand how Google displays search results. For example, we can type "Warsaw" in Google and examine the results.

Create needed HTML code

Now, let's inspect the HTML code of this page. Press F12 to open Developer Tools and find the div that contains elements like Graphics, Videos, etc. It should be tagged with the class crJ18e.

<div class="crJ18e">
  <div role="list" style="display:contents">
    <div role="listitem"></div>
  </div>
</div>

We need to copy this structure to add the Maps button. We will copy each attribute and also inner <a> tag. We will use the document.querySelector method to find the desired tag and the document.createElement method to create a new tag. Let's create a new JavaScript file named content.js.

const outerDiv = document.querySelector('.crJ18e');

if (outerDiv) {
  const innerDiv = outerDiv.querySelector('[role="list"]');

  if (innerDiv) {
    const newDiv = document.createElement('div');
    newDiv.setAttribute('role', 'listitem');
    newDiv.setAttribute('data-hveid', 'CBYQAA');
    newDiv.setAttribute('data-ved', '2ahUKEwj1n-q81qOHAsXwCqvEDHahCC8MqQJAB6BAgBEAA');

    const aTag = document.createElement('a');
    aTag.href = ``;
    aTag.className = 'LatpMc nPDzT T3FoJb';
    aTag.setAttribute('role', 'link');
    aTag.setAttribute('data-hveid', 'CBYQAA');
    aTag.setAttribute('data-ved', '2ahUKEwj1n-q81qOHAsXwCqvEDHahCC8MqQJegQIFhAB');

    const innerLinkDiv = document.createElement('div');
    innerLinkDiv.className = 'YmvwI';
    innerLinkDiv.textContent = 'Maps';

    aTag.appendChild(innerLinkDiv);

    newDiv.appendChild(aTag);

    innerDiv.appendChild(newDiv);
  }
}

Redirect link to Google Maps

How to know what is the URL of Google Maps search? I found in Google documntantion that it looks like this:
https://www.google.com/maps/search/?api=1&query=parameters

All we need to to do is to get what user searched for in google and replace parameters. The search URL for "Warsaw" starts like this:
https://www.google.com/search?q=Warsaw. So, we need to get the value of the q parameter.

const urlParams = new URLSearchParams(window.location.search);
const searchQuery = urlParams.get('q');

Include other languages pages

Remember that "https://www.google.com/" is not the only Google Serach Page. That can be specified for country. For example, the Polish page URL is "https://www.google.pl/". We need to include this in the manifest.json file.

Full code

contents.js

const urlParams = new URLSearchParams(window.location.search);
const searchQuery = urlParams.get('q');

if (searchQuery) {
  const outerDiv = document.querySelector('.crJ18e');

  if (outerDiv) {
    const innerDiv = outerDiv.querySelector('[role="list"]');

    if (innerDiv) {
      const newDiv = document.createElement('div');
      newDiv.setAttribute('role', 'listitem');
      newDiv.setAttribute('data-hveid', 'CBYQAA');
      newDiv.setAttribute('data-ved', '2ahUKEwj1n-q81qOHAsXwCqvEDHahCC8MqQJAB6BAgBEAA');

      const aTag = document.createElement('a');
      aTag.href = `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(searchQuery)}`;
      aTag.className = 'LatpMc nPDzT T3FoJb';
      aTag.setAttribute('role', 'link');
      aTag.setAttribute('data-hveid', 'CBYQAA');
      aTag.setAttribute('data-ved', '2ahUKEwj1n-q81qOHAsXwCqvEDHahCC8MqQJegQIFhAB');

      const innerLinkDiv = document.createElement('div');
      innerLinkDiv.className = 'YmvwI';
      innerLinkDiv.textContent = 'Maps';

      aTag.appendChild(innerLinkDiv);

      newDiv.appendChild(aTag);

      innerDiv.appendChild(newDiv);
    }
  }
}

manifest.json

{
    "manifest_version": 3,
    "name": "Google Maps button restored",
    "version": "1.0",
    "description": "Restore google maps button on search page",
    "content_scripts": [
      {
        "js": ["content.js"],
        "matches": [
          "*://www.google.com/search*",
          "*://www.google.pl/search*"
        ]
      }
    ]
  }

Add new chrome extension

It is very simple to add our extension to the browser. According to
Google documentation, these are steps:

Save the extension (2 files) folder on your test device.
Go to chrome://extensions/.
At the top right, turn on Developer mode.
Click Load unpacked.
Find and select the app or extension folder.

Now, when you type something in Google, a new Maps button should appear in line with other Google buttons.

Troubleshooting and Common Issues

Button Not Appearing: Ensure that the class names and structure of the Google search page haven't changed. Inspect the page to confirm.
JavaScript Errors: Open Developer Tools and check the console for any errors in your script.

Advanced Features

Change Button Placement: Adjust the position of the Maps button relative to other Google buttons.
Localized Versions: Extend support to more languages and Google domains.
Additional Buttons: Add more useful buttons like "Images" or "News".
Error handling: Implement more error handling.

Note: Remember that Google can change their HTML code, so you will need to update your code accordingly.

Conclusion

By following these steps, you can restore the Google Maps button on the search page. Try it out and let me know if you encounter any issues or have suggestions for improvement. This is my first Dev Community Post

Hello

Łukasz Kaproń — Thu, 06 Apr 2023 11:09:37 +0000

Forem: Łukasz Kaproń