Sambungan Chrome Satu Klik: Tukar Latar Belakang Anda dengan Gaya (atau Kekacauan)

Jika anda pernah mahu menyerikan penyemak imbas anda dengan hanya satu klik—kerana siapa yang mempunyai masa untuk lebih daripada satu, bukan?—maka Sambungan Chrome Satu Klik ialah anda perlukan. Sambungan ini direka untuk sesuatu yang berguna (atau tidak berguna) dengan hanya klik butang. Dalam artikel ini, kami akan menunjukkan kepada anda cara membina sambungan Satu Klik anda sendiri dalam sekelip mata. Bersedia untuk mengubah dunia… atau hanya warna latar belakang halaman web. Kami di sini bukan untuk menilai.

Apakah Sambungan Chrome Satu Klik?

Fikirkan Sambungan Chrome Satu Klik sebagai butang ajaib penyemak imbas anda. Anda mengkliknya, dan—voila!—sesuatu berlaku. Sama ada ia menukar warna latar belakang, memberi anda petikan inspirasi atau mencetuskan animasi kucing menari (kami tidak akan menghalang anda), dunia adalah tiram anda. Untuk tutorial ini, kami akan bermula dengan sesuatu yang mudah: menukar latar belakang halaman web menjadi warna biru muda yang menenangkan dengan satu klik. mudah? Anda bertaruh.

Langkah 1: Cipta Folder Sambungan Anda (AKA Folder “Semuanya Akan Baik”)

Pertama, anda perlu menyediakan folder untuk menyimpan fail sambungan anda. Panggilnya sambungan satu klik atau sesuatu yang lebih dramatik seperti turn-the-world-blue. Di dalam folder ini, anda memerlukan beberapa fail penting:

• manifest.json (otak sambungan anda)
• background.js (ini ialah ahli sihir di sebalik tirai)
• popup.html (apa yang pengguna lihat apabila mereka mengklik ikon sambungan)
• popup.js (skrip ajaib yang melakukan sesuatu)

Struktur Folder:

one-click-extension/
│
├── manifest.json
├── background.js
├── popup.html
└── popup.js

Langkah 2: Cipta Fail Manifes (AKA the Extension's Brain)

manifes.json anda ialah otak sambungan anda. Ia memberitahu Chrome perkara yang dilakukan sambungan anda dan cara menjadikannya berfungsi. Tanpanya, sambungan anda seperti kereta tanpa enjin—sedap dipandang tetapi tidak berguna sama sekali.

Berikut ialah contoh manifes yang akan memberitahu Chrome untuk memuatkan sambungan kami:

{
  "manifest_version": 3,
  "name": "One Click Background Changer",
  "version": "1.0",
  "description": "A super cool extension that changes your background color to light blue with one click.",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/16x16.png",
      "48": "icons/48x48.png",
      "128": "icons/128x128.png"
    }
  },
  "permissions": ["activeTab"],
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "icons/16x16.png",
    "48": "icons/48x48.png",
    "128": "icons/128x128.png"
  }
}

Langkah 3: Bina UI Pop Timbul (AKA Butang “Hei, Klik Saya!”)

Timbul timbul ialah perkara yang pengguna lihat apabila mereka mengklik pada ikon sambungan anda. Dalam kes kami, kami mahukan butang yang, apabila diklik, menukar warna latar belakang halaman. Cukup mudah, bukan? Ia seperti tongkat sakti, tetapi tanpa bahaya dikutuk.

Berikut ialah pop timbul.html:

one-click-extension/
│
├── manifest.json
├── background.js
├── popup.html
└── popup.js

Langkah 5: Skrip Latar Belakang (AKA Fail "Jangan Sentuh Saya, Saya Bekerja")

Fail background.js anda berjalan di latar belakang. Pekerja senyaplah yang melakukan semua beban berat—seperti memastikan sambungan anda berfungsi apabila anda tidak melihat. Dalam kes ini, kami tidak memerlukan banyak, tetapi anda boleh menambah ciri yang lebih kompleks di sini jika anda berasa seronok.

Buat masa ini, cuma tambahkan persediaan asas ini:

{
  "manifest_version": 3,
  "name": "One Click Background Changer",
  "version": "1.0",
  "description": "A super cool extension that changes your background color to light blue with one click.",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/16x16.png",
      "48": "icons/48x48.png",
      "128": "icons/128x128.png"
    }
  },
  "permissions": ["activeTab"],
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "icons/16x16.png",
    "48": "icons/48x48.png",
    "128": "icons/128x128.png"
  }
}

Langkah 6: Tambah Ikon (Pilihan, Tetapi Amat Disyorkan)

Ikon adalah seperti almari pakaian sambungan anda—ia menjadikannya kelihatan bagus dalam bar alat. Anda boleh menambah ikon dengan saiz yang berbeza (cth., 16x16.png, 48x48.png, 128x128.png). Ini akan digunakan oleh Chrome pada bila-bila masa ia perlu memaparkan sambungan anda.

Hanya buat folder ikon dan tambah ikon yang anda mahu gunakan.

Langkah 7: Muatkan Sambungan Anda ke dalam Chrome (AKA "Momen Kebenaran")

Sudah tiba masanya untuk menguji karya agung anda. Begini cara memuatkan sambungan anda ke dalam Chrome:

1. Buka Chrome dan pergi ke chrome://extensions/.
2. Dayakan "Mod pembangun" (ia seperti mendayakan kod cheat untuk hidup).
3. Klik pada "Muat dibongkar" dan pilih folder sambungan satu klik.
4. Ikon sambungan anda kini sepatutnya muncul dalam bar alat. Tengok la. Mengaguminya. Klik padanya.

Langkah 8: Uji Ia (AKA Momen "Yay, Ia Berfungsi!")

Klik pada ikon sambungan anda. Pop timbul harus muncul dengan butang yang mengatakan "Tukar Latar Belakang." Apabila anda mengkliknya, warna latar belakang halaman web semasa akan bertukar menjadi biru muda, seperti lautan yang tenang pada hari yang sempurna.

Kesimpulan (AKA Bahagian "Anda Melakukannya")

Tahniah! Anda telah membina Sambungan Chrome Satu Klik anda sendiri. Alat mudah ini boleh dikembangkan kepada apa sahaja yang anda mahu, sama ada menukar warna halaman, menambah petikan motivasi atau menjadikan halaman memainkan jazz yang lancar. Kemungkinannya tidak berkesudahan.

Sekarang anda sudah menguasainya, anda sudah bersedia untuk menjadikan internet lebih menyeronokkan. Teruskan dan cipta sesuatu yang menakjubkan, atau sekurang-kurangnya, sesuatu yang akan membuatkan rakan anda menganggap anda sejenis ahli sihir. ✨

Atas ialah kandungan terperinci Sambungan Chrome Satu Klik: Tukar Latar Belakang Anda dengan Gaya (atau Kekacauan). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!