如何创建 Chrome 扩展程序来恢复 Google 地图按钮-js教程-PHP中文网

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

WBOY

发布： 2024-07-18 18:58:39

原创

319 人浏览过

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

我们将介绍如何：

创建一个 manifest.json 文件 - Chrome 扩展程序所需
检查 Google 搜索结果页面以了解其结构。
编写一个 JavaScript 文件来注入地图按钮。
将新的 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”并检查结果。

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

创建所需的 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*"
        ]
      }
    ]
  }

登录后复制