Home > Web Front-end > JS Tutorial > body text

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

WBOY
Release: 2024-07-18 18:58:39
Original
279 people have browsed it

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:

  1. Create a manifest.json file - required for Chrome Extension
  2. Inspect the Google search results page to understand its structure.
  3. Write a JavaScript file to inject the Maps button.
  4. 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*"
        ]
      }
    ]
  }
Copy after login

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.

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

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>
Copy after login

We need to copy this structure to add the Maps button. We will copy each attribute and also inner 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);
  }
}
Copy after login

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');
Copy after login

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);
    }
  }
}
Copy after login

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*"
        ]
      }
    ]
  }
Copy after login

Add new chrome extension

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

  1. Save the extension (2 files) folder on your test device.
  2. Go to chrome://extensions/.
  3. At the top right, turn on Developer mode.
  4. Click Load unpacked.
  5. 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.

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

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

  1. Change Button Placement: Adjust the position of the Maps button relative to other Google buttons.
  2. Localized Versions: Extend support to more languages and Google domains.
  3. Additional Buttons: Add more useful buttons like "Images" or "News".
  4. 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

The above is the detailed content of How to Create a Chrome Extension to Restore the Google Maps Button. For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!