嗨！
這是一個如何創建非常簡單的 Chrome 擴充 來恢復 Google 地圖按鈕的教學。根據歐盟數位市場法案 (DMA)，Google 對歐洲經濟區 (EEA) 的 Google 搜尋進行了更改，刪除了搜尋頁面頂部連結到 Google 地圖的地圖連結。我決定創建一個擴充功能來恢復此按鈕。
我們將介紹如何：
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 程式碼。按 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 地圖搜尋的 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*"
]
}
]
}
將我們的擴充功能加入瀏覽器非常簡單。根據
Google 文檔，這些是步驟：
現在，當您在 Google 中輸入
某些內容時，一個新的地圖按鈕應該與其他 Google 按鈕一起出現。
進階功能
注意：請記住，Google 可以更改其 HTML 程式碼，因此您需要相應地更新您的程式碼。
依照以下步驟，您可以恢復搜尋頁面上的 Google 地圖按鈕。嘗試一下，如果您遇到任何問題或有改進建議，請告訴我。 這是我的第一篇開發社群貼文
以上是如何建立 Chrome 擴充功能來恢復 Google 地圖按鈕的詳細內容。更多資訊請關注PHP中文網其他相關文章！
