Cara Membuat Sambungan Chrome untuk Memulihkan Butang Peta Google

Hai!
Ini ialah tutorial cara membuat Sambungan Chrome yang sangat mudah untuk memulihkan butang Peta Google. Selaras dengan Akta Pasaran Digital EU (DMA), Google membuat perubahan pada Carian Google di Kawasan Ekonomi Eropah (EEA), mengalih keluar pautan Peta di bahagian atas halaman carian yang memaut ke Peta Google. Saya memutuskan untuk membuat sambungan untuk memulihkan butang ini.

Kami akan membincangkan cara:

1. Buat fail manifest.json - diperlukan untuk Sambungan Chrome
2. Periksa halaman hasil carian Google untuk memahami strukturnya.
3. Tulis fail JavaScript untuk menyuntik butang Peta.
4. Tambah sambungan Chrome baharu pada penyemak imbas anda.

Bagaimana hendak bermula?

Google menyediakan dokumentasi yang sangat baik tentang membuat sambungan Chrome.

Mari kita mulakan

Pertama sekali, kita perlu mencipta fail manifest.json. Saya tidak akan pergi ke butiran tentang fail ini. Anda boleh membaca lebih lanjut mengenainya di sini.

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

Apa yang kita nak buat?

Sebelum kita memulakan pengekodan, kita perlu memahami cara Google memaparkan hasil carian. Sebagai contoh, kita boleh menaip "Warsaw" dalam Google dan memeriksa hasilnya.

Cipta kod HTML yang diperlukan

Sekarang, mari kita periksa kod HTML halaman ini. Tekan F12 untuk membuka Alat Pembangun dan cari div yang mengandungi elemen seperti Grafik, Video, dsb. Ia harus ditandakan dengan kelas crJ18e.

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

Kita perlu menyalin struktur ini untuk menambah butang Peta. Kami akan menyalin setiap atribut dan juga tag. Kami akan menggunakan kaedah document.querySelector untuk mencari teg yang dikehendaki dan kaedah document.createElement untuk mencipta teg baharu. Mari buat fail JavaScript baharu bernama 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);
  }
}

Ubah hala pautan ke Peta Google

Bagaimana untuk mengetahui apakah URL carian Peta Google? Saya dapati dalam dokumen Google bahawa ia kelihatan seperti ini:
https://www.google.com/maps/search/?api=1&query=parameters

Apa yang perlu kita lakukan ialah mendapatkan perkara yang dicari pengguna di google dan menggantikan parameter. URL carian untuk "Warsaw" bermula seperti ini:
https://www.google.com/search?q=Warsaw. Jadi, kita perlu mendapatkan nilai parameter q.

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

Sertakan halaman bahasa lain

Ingat bahawa "https://www.google.com/" bukan satu-satunya Halaman Google Serach. Itu boleh ditentukan untuk negara. Contohnya, URL halaman Poland ialah "https://www.google.pl/". Kita perlu memasukkan ini dalam fail manifest.json.

Kod penuh

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

Tambah sambungan krom baharu

Sangat mudah untuk menambahkan sambungan kami pada penyemak imbas. Menurut
Dokumentasi Google, ini ialah langkah:

1. Simpan sambungan (2 fail) folder pada peranti ujian anda.
2. Pergi ke chrome://extensions/.
3. Di bahagian atas sebelah kanan, hidupkan Mod pembangun.
4. Klik Muat tidak dibungkus.
5. Cari dan pilih folder apl atau sambungan.

Sekarang, apabila anda menaip sesuatu dalam Google, butang Peta baharu akan muncul sejajar dengan butang Google yang lain.

Penyelesaian masalah dan Isu Biasa

• Butang Tidak Muncul: Pastikan nama kelas dan struktur halaman carian Google tidak berubah. Semak halaman untuk mengesahkan.
• Ralat JavaScript: Buka Alat Pembangun dan semak konsol untuk sebarang ralat dalam skrip anda.

Ciri Terperinci

1. Tukar Peletakan Butang: Laraskan kedudukan butang Peta berbanding butang Google yang lain.
2. Versi Disetempat: Lanjutkan sokongan kepada lebih banyak bahasa dan domain Google.
3. Butang Tambahan: Tambahkan lebih banyak butang berguna seperti "Imej" atau "Berita".
4. Pengendalian ralat: Laksanakan lebih banyak pengendalian ralat.

Nota: Ingat bahawa Google boleh menukar kod HTML mereka, jadi anda perlu mengemas kini kod anda dengan sewajarnya.

Kesimpulan

Dengan mengikut langkah ini, anda boleh memulihkan butang Peta Google pada halaman carian. Cubalah dan beritahu saya jika anda menghadapi sebarang masalah atau mempunyai cadangan untuk penambahbaikan. Ini adalah Siaran Komuniti Dev pertama saya

Atas ialah kandungan terperinci Cara Membuat Sambungan Chrome untuk Memulihkan Butang Peta Google. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!