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

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

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

新しいChrome拡張機能を追加

拡張機能をブラウザに追加するのは非常に簡単です。
によると Google ドキュメント。手順:

1. テストデバイス上の拡張子 (2 ファイル) フォルダー を保存します。
2. chrome://extensions/ に移動します。
3. 右上で、開発者モードをオンにします。
4. 解凍された状態でロードをクリックします。
5. アプリまたは拡張機能フォルダーを検索して選択します。

Google で何かを入力すると、他の Google ボタンと並んで新しいマップ ボタンが表示されます。

トラブルシューティングと一般的な問題

• ボタンが表示されない: Google 検索ページのクラス名と構造が変更されていないことを確認してください。ページを調べて確認してください。
• JavaScript エラー: 開発者ツールを開き、スクリプトにエラーがないかコンソールを確認します。

高度な機能

1. ボタンの配置を変更: 他の Google ボタンに対するマップ ボタンの位置を調整します。
2. ローカライズ バージョン: サポートをより多くの言語と Google ドメインに拡張します。
3. 追加ボタン: 「画像」や「ニュース」などの便利なボタンを追加します。
4. エラー処理: より多くのエラー処理を実装します。

注: Google は HTML コードを変更する可能性があるため、それに応じてコードを更新する必要があることに注意してください。

結論

次の手順に従うことで、検索ページに [Google マップ] ボタンを復元できます。試してみて、問題が発生したり、改善の提案がある場合はお知らせください。 これは私の最初の開発コミュニティ投稿です

以上がGoogle マップ ボタンを復元する Chrome 拡張機能を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。