Google マップボタンを復元する Chrome 拡張機能を作成する方法-jsチュートリアル-php.cn

Google マップボタンを復元する Chrome 拡張機能を作成する方法

WBOY

リリース： 2024-07-18 18:58:39

オリジナル

270 人が閲覧しました

こんにちは！
Google マップボタンを復元するための非常に簡単な Chrome 拡張機能 を作成する方法のチュートリアルです。 EU デジタル市場法 (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 に「ワルシャワ」と入力して結果を調べることができます。

Google マップボタンを復元する Chrome 拡張機能を作成する方法

必要な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 検索ページではないことに注意してください。国ごとに指定できます。たとえば、ポーランド語 ページの 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);
    }
  }
}

ログイン後にコピー

マニフェスト.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*"
        ]
      }
    ]
  }

ログイン後にコピー