如何建立 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中文網其他相關文章！