如何创建 Chrome 扩展程序来恢复 Google 地图按钮

嗨！
这是一个如何创建非常简单的 Chrome 扩展 来恢复 Google 地图按钮的教程。根据欧盟数字市场法案 (DMA)，Google 对欧洲经济区 (EEA) 的 Google 搜索进行了更改，删除了搜索页面顶部链接到 Google 地图的地图链接。我决定创建一个扩展来恢复此按钮。

我们将介绍如何：

1. 创建一个 manifest.json 文件 - Chrome 扩展程序所需
2. 检查 Google 搜索结果页面以了解其结构。
3. 编写一个 JavaScript 文件来注入地图按钮。
4. 将新的 Chrome 扩展程序添加到您的浏览器。

如何开始？

Google 提供了有关创建 Chrome 扩展程序的优秀文档。

让我们开始吧

首先，我们必须创建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*"
        ]
      }
    ]
  }

我们想做什么？

在开始编码之前，我们需要了解 Google 如何显示搜索结果。例如，我们可以在 Google 中输入“Warsaw”并检查结果。

创建所需的 HTML 代码

现在，让我们检查一下该页面的 HTML 代码。按 F12 打开开发者工具并找到包含图形、视频等元素的 div。它应该使用类 crJ18e 进行标记。

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

我们需要复制此结构以添加地图按钮。我们将复制每个属性以及内部 。标签。我们将使用 document.querySelector 方法查找所需的标签，并使用 document.createElement 方法创建新标签。让我们创建一个名为 content.js 的新 JavaScript 文件。

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);
  }
}

将链接重定向到 Google 地图

如何知道 Google 地图搜索的 URL 是什么？我在 Google 文档中发现它看起来像这样：
https://www.google.com/maps/search/?api=1&query=parameters

我们需要做的就是获取用户在google中搜索的内容并替换参数。 “华沙”的搜索 URL 开头如下：
https://www.google.com/search?q=华沙。因此，我们需要获取 q 参数的值。

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

包括其他语言页面

请记住，“https://www.google.com/”并不是唯一的Google Serach 页面。可以为国家指定。例如，Polish 页面 URL 为“https://www.google.pl/”。我们需要将其包含在manifest.json 文件中。

完整代码

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

添加新的 Chrome 扩展

将我们的扩展添加到浏览器非常简单。根据
Google 文档，这些是步骤：

1. 将扩展程序（2 个文件）文件夹保存在您的测试设备上。
2. 转到 chrome://extensions/。
3. 在右上角，打开开发者模式。
4. 点击加载已解压的。
5. 查找并选择应用程序或扩展程序文件夹。

现在，当您在 Google 中输入

某些内容时，一个新的地图按钮应该与其他 Google 按钮一起出现。

故障排除和常见问题

• 按钮未出现
：确保 Google 搜索页面的类名和结构未更改。检查页面以确认。
• JavaScript 错误
：打开开发者工具并检查控制台是否存在脚本中的任何错误。

高级功能

1. 更改按钮位置
：调整地图按钮相对于其他 Google 按钮的位置。
2. 本地化版本
：将支持扩展到更多语言和 Google 域。
3. 其他按钮
：添加更多有用的按钮，例如“图像”或“新闻”。
4. 错误处理
：实现更多错误处理。

注意：请记住，Google 可以更改其 HTML 代码，因此您需要相应地更新您的代码。

结论

按照以下步骤，您可以恢复搜索页面上的 Google 地图按钮。尝试一下，如果您遇到任何问题或有改进建议，请告诉我。 这是我的第一篇开发社区帖子

以上是如何创建 Chrome 扩展程序来恢复 Google 地图按钮的详细内容。更多信息请关注PHP中文网其他相关文章！