Rumah >hujung hadapan web >tutorial js >Plat Dandang Sambungan Chrome dengan Interaksi Pop Timbul (Manifes V3)

Plat Dandang Sambungan Chrome dengan Interaksi Pop Timbul (Manifes V3)

WBOY
WBOYasal
2024-09-05 06:33:02883semak imbas

Matlamatnya

Sambungan boilerplate ini memberikan pembangun titik permulaan untuk mencipta sambungan Chrome mereka sendiri menggunakan Manifest V3.

Apa yang baru

Peningkatan terbesar dalam versi ini ialah penambahan antara muka timbul. Kini, apabila pengguna mengklik butang sambungan dalam bar atas penyemak imbas, mereka dipaparkan dengan pop timbul interaktif dan bukannya hanya log mesej ke konsol.

Ciri-ciri

Pelat dandang ini menunjukkan tiga gelagat sambungan utama:

  1. Sebelum halaman dimuatkan: Cetak mesej ke konsol DevTools sebelum halaman dimuatkan.
  2. Selepas halaman dimuatkan: Cetak mesej ke konsol DevTools sebelum halaman dimuatkan.
  3. Interaksi pop timbul: Memaparkan pop timbul apabila pengguna mengklik butang sambungan, membenarkan interaksi pengguna yang lebih kompleks.

Pelanjutan kini menyediakan butang dalam pop timbul yang, apabila diklik, menyuntik skrip ke dalam tab aktif untuk mengubah suai DOM dan log mesej ke konsol.

Pemasangan

  1. Klon atau muat turun fail daripada github.com/llagerlof/fresh-chrome-extension dan letakkannya dalam direktori.
  2. Buka halaman sambungan penyemak imbas anda: chrome://extensions
  3. Dayakan "Mod pembangun" di penjuru kanan sebelah atas.
  4. Klik Muatkan Dibongkar dan pilih direktori sambungan.

Bagaimana untuk mengujinya

  1. Buka mana-mana tapak web.
  2. Klik butang sambungan pada bar atas penyemak imbas. Anda akan melihat pop timbul dengan butang.
  3. Klik butang dalam pop timbul berlabel "Klik butang ini untuk menambah div oren pada halaman".
  4. Perhatikan perubahan berikut:
    • Div oren muncul di bahagian atas halaman dengan mesej "DOM diubah suai!"
    • Buka alat pembangun (F12) dan lihat konsol. Anda akan melihat mesej "Tindakan dilaksanakan daripada pop timbul!"

Chrome Extension Boilerplate with Popup Interaction (Manifest V3)

Pelat dandang ini menyediakan asas yang kukuh untuk membina sambungan Chrome yang lebih kompleks. Jangan ragu untuk mengubah suai dan memanjangkannya untuk memenuhi keperluan khusus anda.

Selamat mengekod!

Atas ialah kandungan terperinci Plat Dandang Sambungan Chrome dengan Interaksi Pop Timbul (Manifes V3). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn