So erstellen Sie eine Chrome-Erweiterung zum Wiederherstellen der Google Maps-Schaltfläche

Hallo!
Es handelt sich um eine Anleitung zum Erstellen einer sehr einfachen Chrome-Erweiterung zum Wiederherstellen der Google Maps-Schaltfläche. In Übereinstimmung mit dem EU Digital Markets Act (DMA) hat Google Änderungen an der Google-Suche im Europäischen Wirtschaftsraum (EWR) vorgenommen und den Maps-Link oben auf der Suchseite entfernt, der auf Google Maps verweist. Ich habe beschlossen, eine Erweiterung zu erstellen, um diese Schaltfläche wiederherzustellen.

Wir besprechen, wie man:

1. Erstellen Sie eine manifest.json-Datei – erforderlich für die Chrome-Erweiterung
2. Sehen Sie sich die Google-Suchergebnisseite an, um deren Struktur zu verstehen.
3. Schreiben Sie eine JavaScript-Datei, um die Maps-Schaltfläche einzufügen.
4. Fügen Sie die neue Chrome-Erweiterung zu Ihrem Browser hinzu.

Wie fange ich an?

Google bietet eine hervorragende Dokumentation zum Erstellen von Chrome-Erweiterungen.

Fangen wir an

Zuerst müssen wir die Datei manifest.json erstellen. Ich werde nicht näher auf diese Datei eingehen. Mehr darüber können Sie hier lesen.

{
    "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*"
        ]
      }
    ]
  }

Was wollen wir tun?

Bevor wir mit dem Codieren beginnen, müssen wir verstehen, wie Google Suchergebnisse anzeigt. Wir können zum Beispiel „Warschau“ in Google eingeben und die Ergebnisse untersuchen.

Erstellen Sie den erforderlichen HTML-Code

Lassen Sie uns nun den HTML-Code dieser Seite untersuchen. Drücken Sie F12, um die Entwicklertools zu öffnen und das div zu finden, das Elemente wie Grafiken, Videos usw. enthält. Es sollte mit der Klasse crJ18e getaggt sein.

<div class="crJ18e">
  <div role="list" style="display:contents">
    <div role="listitem"></div>
  </div>
</div>

Wir müssen diese Struktur kopieren, um die Schaltfläche „Karten“ hinzuzufügen. Wir kopieren jedes Attribut und auch das innere Etikett. Wir verwenden die Methode document.querySelector, um das gewünschte Tag zu finden, und die Methode document.createElement, um ein neues Tag zu erstellen. Erstellen wir eine neue JavaScript-Datei mit dem Namen content.js.

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);
  }
}

Weiterleitungslink zu Google Maps

Woher weiß ich, was die URL der Google Maps-Suche ist? Ich habe in der Google-Dokumentation gefunden, dass es so aussieht:
https://www.google.com/maps/search/?api=1&query=parameters

Alles, was wir tun müssen, ist, herauszufinden, wonach der Nutzer in Google gesucht hat, und die Parameter zu ersetzen. Die Such-URL für „Warschau“ beginnt wie folgt:
https://www.google.com/search?q=Warschau. Wir müssen also den Wert des q-Parameters ermitteln.

const urlParams = new URLSearchParams(window.location.search);
const searchQuery = urlParams.get('q');

Fügen Sie Seiten in anderen Sprachen hinzu

Denken Sie daran, dass „https://www.google.com/“ nicht die einzige Google-Suchseite ist. Dies kann für das Land angegeben werden. Die URL der polnischen-Seite lautet beispielsweise „https://www.google.pl/“. Wir müssen dies in die Datei manifest.json aufnehmen.

Vollständiger Code

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

Neue Chrome-Erweiterung hinzufügen

Es ist sehr einfach, unsere Erweiterung zum Browser hinzuzufügen. Laut
Google-Dokumentation, das sind Schritte:

1. Speichern Sie den Erweiterungsordner (2 Dateien) im Ordner auf Ihrem Testgerät.
2. Gehen Sie zu chrome://extensions/.
3. Aktivieren Sie oben rechts den Entwicklermodus.
4. Klicken Sie auf Unverpackt laden.
5. Suchen Sie den App- oder Erweiterungsordner und wählen Sie ihn aus.

Wenn Sie jetzt etwas in Google eingeben, sollte eine neue Maps-Schaltfläche neben den anderen Google-Schaltflächen erscheinen.

Fehlerbehebung und häufige Probleme

• Schaltfläche wird nicht angezeigt: Stellen Sie sicher, dass sich die Klassennamen und die Struktur der Google-Suchseite nicht geändert haben. Überprüfen Sie die Seite zur Bestätigung.
• JavaScript-Fehler: Öffnen Sie die Entwicklertools und überprüfen Sie die Konsole auf Fehler in Ihrem Skript.

Erweiterte Funktionen

1. Schaltflächenplatzierung ändern: Passen Sie die Position der Maps-Schaltfläche relativ zu anderen Google-Schaltflächen an.
2. Lokalisierte Versionen: Erweitern Sie die Unterstützung auf weitere Sprachen und Google-Domänen.
3. Zusätzliche Schaltflächen: Fügen Sie weitere nützliche Schaltflächen wie „Bilder“ oder „Neuigkeiten“ hinzu.
4. Fehlerbehandlung: Implementieren Sie mehr Fehlerbehandlung.

Hinweis: Denken Sie daran, dass Google seinen HTML-Code ändern kann, daher müssen Sie Ihren Code entsprechend aktualisieren.

Abschluss

Indem Sie diese Schritte befolgen, können Sie die Google Maps-Schaltfläche auf der Suchseite wiederherstellen. Probieren Sie es aus und lassen Sie mich wissen, wenn Sie auf Probleme stoßen oder Verbesserungsvorschläge haben. Dies ist mein erster Dev-Community-Beitrag

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Chrome-Erweiterung zum Wiederherstellen der Google Maps-Schaltfläche. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!