Membangunkan sambungan Google Chrome

Tutorial ini membimbing anda melalui membina sambungan Google Chrome asas menggunakan HTML, CSS, dan JavaScript. Kami akan membuat pemetik bahasa yang mudah, mempelajari konsep pembangunan lanjutan utama di sepanjang jalan.

Apa yang akan anda pelajari:

• Membina menu pop timbul untuk interaksi pengguna.
Menyediakan Mod Pemaju Chrome:

Mulailah dengan mengaktifkan mod pemaju di Chrome. Ini membolehkan anda memuatkan dan menguji pelanjutan anda semasa pembangunan. Akses ini dengan mengklik tiga titik menegak (lebih banyak alat) di sudut kanan atas Chrome, memilih "lebih banyak alat" & gt; "Sambungan," dan kemudian membolehkan suis togol "mod pemaju" di sebelah kanan atas. Dokumentasi untuk butiran mengenai fungsi yang tersedia.

2. Fail manifest.json :

Buat folder baru (misalnya, "bahasa") untuk projek anda. Di dalam, buat manifest.json dengan kod ini:

 {"name": "pemetik bahasa", "keterangan": "pelanjutan pemilihan bahasa yang mudah", "versi": "1.0", "manifest_version": 3, "latar belakang" "default_popup": "popup.html"}}  Menambah ikon bendera bahasa:   <p> Buat subdirektori "bendera" dalam folder projek anda. Muat turun lima imej bendera (misalnya, Bahasa Inggeris, Cina, Itali, dan lain -lain) dan simpannya sebagai <code> english.png </code>, <code> cina.png </code>, dll. alt = "Membangunkan Google Chrome Extensions" />  </p><p> <strong> 4. <code> latar belakang.js </code> Pekerja perkhidmatan: </strong> </p> <p> create <code> latar belakang.js </code> dengan kod ini: </p> <pre class="brush:php;toolbar:false"> let url = 'url (flags/english.png)'; chrome.runtime.oninstalled.addlistener (() = & gt; {chrome.storage.sync.set ({language}); console.log (`bahasa lalai ditetapkan ke $ {bahasa}`);}; Membuat menu popup (<code> popup.html </code> dan <code> popup.css </code>):   <p> cipta <code> popup.html </code>: </p>   <twite> Picker Language  <link rel="stylesheet" href="popup.css">   <div id="flagoptions"> </div>  <code> popup.css </code>:  <pre class="brush:php;toolbar:false"> .container {width: 300px; } butang {ketinggian: 30px; lebar: 30px; Garis besar: Tiada; Sempadan: Tiada; Radius sempadan: 50%; Margin: 10px; Latar Belakang berulang: tidak berulang; Latar Belakang: Pusat; Latar Belakang: Mengandungi; } .currentflag {/ * Tambah gaya untuk bendera yang sedang dipilih */} 

6. Popup JavaScript ( popup.js ):

create popup.js (ini adalah versi yang dipermudahkan, yang memerlukan perkembangan selanjutnya untuk fungsi penuh):

Seksyen akan mengandungi JavaScript untuk menjana butang bahasa secara dinamik dari array `lain -lain, mengendalikan peristiwa klik untuk menukar bahasa yang dipilih, dan mengemas kini UI dengan sewajarnya. Memuatkan dan menguji: ** Dalam `Chrome: // Extensions/`, klik "Beban Unpacked," pilih folder projek anda, dan uji pelanjutan anda. ** 8. Penerbitan (Advanced): ** Daftar sebagai pemaju kedai web Chrome (memerlukan bayaran) untuk menerbitkan pelanjutan anda. Versi yang diselaraskan ini memberikan laluan yang lebih jelas dan lebih ringkas untuk mewujudkan sambungan krom asas. Ingatlah untuk mengisi kod `Popup.js` yang hilang berdasarkan logik yang dibentangkan dalam contoh yang asal, lebih terperinci.

Atas ialah kandungan terperinci Membangunkan sambungan Google Chrome. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!