Cara Buat Sambungan Chrome dari Scratch

Jika anda mahu tambah atau ubahsuai beberapa fungsi di Google Chrome, anda perlu menggunakan sambungan. Walaupun anda boleh memuat turun pelanjutan dari Kedai Web Chrome, tetapi kadang-kadang anda memerlukan fungsi tertentu yang anda tidak dapat mencari dalam sebarang pelanjutan yang ada.

Nah, berita baiknya ialah anda boleh membuat pelanjutan anda sendiri untuk menambah atau mengubah suai fungsi yang diperlukan atau membuat add-on atau aplikasi baru untuk Google Chrome, yang boleh anda nanti diedarkan kepada pengguna lain menggunakan Kedai Web Chrome.

Dalam perkara berikut, saya akan menunjukkan kepada anda cara termudah untuk membuat sambungan. Sekiranya anda mempunyai pengetahuan mengenai pembangunan web (HTML, CSS, dan JS), anda akan merasa benar di rumah. Jika tidak, mula-mula menonton saluran ini belajar asas pembangunan web, kemudian teruskan di bawah.

Prasyarat

Anda perlu mempunyai keperluan berikut sebelum selesai dengan tutorial ini.

1. Awak mesti kenal HTML, CSS, dan JavaScript. [Semak sumber]
2. Anda mesti mempunyai editor kod untuk menulis pelanjutan. [Bandingkan editor]
3. (Pilihan) Jika anda ingin mengedarkan sambungan anda kepada pengguna lain, anda mesti mempunyai akaun pemaju di Kedai Web Chrome. [Buat akaun]

Catatan: Google meminta anda untuk membayar yuran yang kecil untuk membuat akaun pemaju di Kedai Web Chrome.

Buat pelanjutan

Dalam tutorial ini, saya akan berkongsi proses mencipta lanjutan tugasan untuk Google Chrome. Ia akan menjadi utiliti (seperti yang ditunjukkan di bawah) untuk menunjukkan komponen penting dan kebolehan yang disediakan untuk sambungan.

1. Dapatkan template

Google Chrome, seperti platform lain, memerlukannya sambungan untuk mempunyai struktur yang ditetapkan, yang mungkin kelihatan rumit untuk pemula. Itulah sebabnya ia baik untuk mendapatkan template boilerplate untuk lanjutan yang akan menyediakan semua keperluan.

Extensionizr adalah penjana dandang terbaik untuk sambungan krom. Ia membolehkan anda memilih salah satu daripada jenis pelanjutan yang diberikan - tindakan penyemak imbas (tindakan untuk semua halaman atau penyemak imbas), tindakan halaman (tindakan untuk halaman semasa), atau lanjutan tersembunyi (tindakan latar belakang yang biasanya tersembunyi di antara muka depan).

Selain itu, ia menyediakan pelbagai pilihan penalaan halus termasuk / tidak termasuk tambahan yang diperlukan, kebenaran, dan lain-lain. Anda perlu memilih “Tindakan penyemak imbas” sebagai jenis pelanjutan dan “Tiada latar belakang” sebagai halaman latar belakang untuk tutorial ini.

Apabila anda selesai memilih pilihan untuk membuat sambungan sampel anda, tekan “Muat turunnya!” butang dalam Extensionizr. Akhirnya, ekstrak arkib (.zip) ke direktori dan buka editor kod anda untuk mula menulis pelanjutan.

2. Kod pelanjutan

Selepas anda memuat turun dan mengekstrak templat tersebut, anda akan melihat struktur direktori seperti yang ditunjukkan dalam tangkapan skrin di bawah. Templat teratur kemas dan anda mesti tahu bahawa fail yang paling penting adalah “manifest.json“.

Mari mengenali fail dan folder lain dalam direktori ini juga:

1. _locales: Ia digunakan untuk maklumat bahasa kedai untuk aplikasi berbilang bahasa.
2. css: Ia berfungsi untuk menyimpan perpustakaan front-end pihak ketiga seperti Bootstrap 4.
3. ikon: Ia direka untuk mempunyai ikon untuk pelanjutan anda dalam pelbagai saiz.
4. js: Ia berguna untuk menyelamatkan perpustakaan belakang pihak ketiga seperti jQuery 3.
5. src: Ia menyimpan kod sebenar yang akan anda tulis untuk pelanjutan anda.

manifest.json

Ia mengandungi metadata asas mengenai apl anda, yang mentakrifkan butiran apl anda kepada penyemak imbas. Anda boleh mengeditnya untuk menetapkan nama pelanjutan anda, keterangan, tapak web, ikon, dll. Bersama-sama dengan spesifik seperti tindakan pelayar dan kebenaran.

Sebagai contoh, dalam kod di bawah, anda akan melihat bahawa saya menukar nama, keterangan, dan homepage_url bersama default_title di bawah browser_action. Selain itu, saya tambahnya “penyimpanan” di bawah kebenaran kerana kami perlu menyimpan data dalam pelanjutan kami.

 "name": "Todoizr - To-do Simplified", "version": "0.0.1", "manifest_version": 2, "description": "App to-do mudah untuk semua orang.", "homepage_url" https://go.aksingh.net/todoizr "," icons ": " 16 ":" icons / icon16.png "," 48 ":" icons / icon48.png "," 128 ":" icons / icon128 , "default_title": "Todoizr - To-do Simplified", "default_popup": "src / browser_action / browser_action.html "," kebenaran ": [" storan "] 

src \ browser_action

Direktori ini akan memegang kod untuk tindakan penyemak imbas. Dalam kes kita, kita akan kod tetingkap pop timbul dipaparkan semasa mengklik ikon pelanjutan dalam penyemak imbas. Pelanjutan kami akan membolehkan pengguna menambah dan melihat item tugasan dalam pop timbul.

Catatan: Anda sentiasa boleh melompat dengan kod dengan mengklonkan repositori ini.

Kod permulaan dari templat

Walaupun direktori ini hanya mempunyai fail HTML yang mempunyai semua kod, saya telah memutuskan untuk membahagikannya kepada tiga fail berasingan untuk kejelasan yang lebih baik. Yang berkata, fail HTML dinamakan “browser_action.html” kini mempunyai kod berikut:

Selain itu, fail gaya dinamakan “browser_action.css” mempunyai kandungan di bawah semasa fail JavaScript dinamakan “browser_action.js” kosong sekarang.

 #mainPopup padding: 10px; ketinggian: 200px; lebar: 400px; font-family: Helvetica, Ubuntu, Arial, sans-serif;  h1 font-size: 2em;  

Reka bentuk antara muka pop timbul

Selepas menubuhkan projek awal, mari kita reka bentuk pertama antara muka pop. saya ada sediakan antara muka dengan pendekatan minimalis, menunjukkan nama di bahagian atas diikuti dengan satu bentuk untuk menambah benda tugasan dan satu kawasan di bawah untuk melihat item yang ditambah. Ia diilhamkan oleh reka bentuk ringkas “Borang Gaya 5“.

Di dalam kod di bawah, saya telah menambah dua divs - satu untuk memaparkan borang untuk menambah item tugasan dan yang satu lagi untuk memaparkan senarai perkara yang telah ditambah untuk dilakukan. Yang berkata, kod baru untuk “browser_action.html” adalah seperti berikut:

       
  
 
Todoizr
 
 
   
 
 
  
 
 
 
 
    

Dan fail gaya “browser_action.css” kini mempunyai kod berikut:

 @import url ("./form_style_5.css"); #mainPopup ketinggian: 200px; lebar: 300px; font-family: Helvetica, Ubuntu, Arial, sans-serif;  / * Borang item tugasan * / .form-style-5 margin: auto; padding: 0px 20px;  .form-style-5: first-child background: none;  .form-style-5 h1 color: # 308ce3; saiz fon: 20px; teks-align: center;  .form-style-5 input [type = "text"] width: auto; terapung: kiri; margin-bottom: unset;  .form-style-5 input [type = "button"] background: # 308ce3; lebar: auto; terapung: betul; padding: 7px; sempadan: tiada; jejari sempadan: 4px; saiz fon: 14px;  .form-style-5 input [type = "button"]: hover background: # 3868d5;  / * Senarai item tugasan * / .form-style-5: last-child height: inherit; margin-bottom: 5px;  .form-style-5 ul padding: 20px;  .form-style-5 ul li font-size: 14px;  

Terakhir, fail gaya pihak ketiga “form_style_5.css” mempunyai kandungan di bawah. Ia hanya diambil dari laman webnya untuk memberi inspirasi kepada reka bentuk pelanjutan kami.

 / * Borang Gaya 5 oleh Sanwebe.com * / / * https://www.sanwebe.com/2014/08/css-html-forms-designs * / .form-style-5 max-width: 500px; padding: 10px 20px; latar belakang: # f4f7f8; margin: 10px auto; padding: 20px; latar belakang: # f4f7f8; jejari sempadan: 8px; font-family: Georgia, "Times New Roman", Times, serif;  .form-style-5 fieldset border: none;  .form-style-5 legenda font-size: 1.4em; margin-bottom: 10px;  .form-style-5 label display: block; margin-bottom: 8px; [input = form-style-5] [jenis = "teks"], input form-style-5 [type = "date"], input form-style-5 [type = "datetime"], -5 input [type = "email"], input form-style-5 [type = "number"], input form-style-5 [type = "search"], type-style-5 input [ , "form", .form-style-5 input [type = "url"], .form-style-5 textarea, .form-style-5 select font-family: Georgia, "Times New Roman" , serif; latar belakang: rgba (255,255,255, .1); sempadan: tiada; jejari sempadan: 4px; saiz fon: 16px; margin: 0; garis besar: 0; padding: 7px; lebar: 100%; box-sizing: border-box; -webkit-box-size: border-box; -moz-box-size: border-box; warna latar belakang: # e8eeef; warna: # 8a97a0; -webkit-box-shadow: 0 1px 0 rgba (0,0,0,0.03) inset; box-shadow: 0 1px 0 rgba (0,0,0,0.03) inset; margin-bottom: 30px; [input = "date"]: fokus, bentuk .form-style-5 [type = "datetime"]: fokus, bentuk .form-style-5 input [type = "email"]: fokus, .form-style-5 input [type = "number"]: focus, .form-style-5 input [type = : fokus, bentuk .form-style-5 input [type = "time"]: fokus, bentuk-bentuk-5 input [type = "url"]: fokus, .form-style-5 textarea: gaya-5 pilih: fokus latar belakang: # d2d9dd;  .form-style-5 pilih -webkit-penampilan: menulist-button; ketinggian: 35px;  .form-style-5 .umber background: # 1abc9c; warna: #fff; ketinggian: 30px; lebar: 30px; paparan: blok dalam talian; saiz fon: 0.8em; margin-right: 4px; garis ketinggian: 30px; teks-align: center; teks-bayangan: 0 1px 0 rgba (255,255,255,0.2); jejari sempadan: 15px 15px 15px 0px;  .form-style-5 input [type = "submit"], .form-style-5 input [type = "button"] position: relative; paparan: blok; padding: 19px 39px 18px 39px; warna: #FFF; margin: 0 auto; latar belakang: # 1abc9c; saiz fon: 18px; teks-align: center; gaya fon: normal; lebar: 100%; sempadan: 1px pepejal # 16a085; lebar sempadan: 1px 1px 3px; margin-bottom: 10px;  .form-style-5 input [type = "submit"]: hover, .form-style-5 input [type = "button"]: hover background: # 109177;  

Tulis logik pop timbul

Sebaik sahaja kita selesai dengan lanjutan depan, mari kita tulis logik untuk bekerja. Kami memerlukan sambungan kami untuk dapat tambah barangan untuk melakukan dan juga memaparkannya dalam tetingkap pop timbul. Jadi kami akan menambah pendengar klik butang untuk menambah teks input sebagai item tugasan dan pendengar beban halaman untuk menunjukkan item tersebut.

Dalam kod di bawah, kita akan menggunakan dua fungsi - sync.get () dan sync.set (), yang merupakan sebahagian daripada “chrome.storage“. Kami memerlukan yang kedua untuk menyimpan item tugasan dalam simpanan dan yang pertama untuk mengambilnya dan menunjukkannya.

Yang berkata, di bawah adalah kod terakhir bagi “browser_action.js” fail. Seperti yang anda dapat lihat di bawah, kod ini sangat mengulas untuk membantu anda memahami tujuannya.

 / loader_sync.get (['todo'], function (result) var todo = [] if (result && result.todo && result.todo.trim ()! == ") / * Parse dan dapatkan array kerana disimpan sebagai rentetan * / todo = JSON.parse (result.todo) console.log ('todo.length = + todo.length) untuk (var i = 0; i < todo.length; i++)  item = todo[i] if (item && item.trim() !==")  /* Append the items in the #list for showing them */ var list = document.getElementById('list') var entry = document.createElement('li') var text = document.createTextNode(item) entry.appendChild(text) list.appendChild(entry)   )  /* Load the to-do items upon popup load */ document.addEventListener('DOMContentLoaded', function() console.log('Inside doc.loaded()') loadItems() ) /* Save the to-do item upon button click */ document.getElementById('btn').addEventListener('click', function (ev)  console.log('Inside btn.click()') text = document.getElementById('txt').value if (text && text.trim() !==")  /* First get() old data as calling set() will replace it */ chrome.storage.sync.get(['todo'], function(result)  var todo = [] if (result && result.todo && result.todo.trim() !==")  /* Parse and get the array as it is saved as a string */ todo = JSON.parse(result.todo)  todo.push(text) chrome.storage.sync.set('todo': JSON.stringify(todo), function()  /* Data is saved now */ var list = document.getElementById('list') while (list.firstChild)  list.removeChild(list.firstChild)  loadItems() ) )  ) 

3. Muatkan sambungan

Selepas selesai menulis lanjutan anda, sudah tiba masanya untuk mengujinya melalui ciri Google Chrome yang menawarkan untuk memuatkan sambungan tidak disimpan dan tidak dibongkar. Tetapi pertama, anda mesti membolehkan mod pemaju dalam penyemak imbas anda: klik pada pilihan butang > pilih “Lebih banyak alat” > Pelanjutan, dan kemudian toggle on “Mod pembangun“.

Sekarang anda akan melihat lebih banyak butang di bawah bar carian. Di sini, klik “Muatkan dibongkar” butang. Ia akan meminta direktori - menyemak imbas dan pilih direktori sambungan anda, dan ia akan memuatkan pelanjutannya. Jika anda mengedit atau mengemas kini kod pelanjutan anda, anda boleh mengklik butang tambah nilai untuk memuatkan perubahan terkini.

Dalam contoh kami, anda akan melihat ikon pelanjutan itu di sebelah ikon profil kerana kami menambah tindakan penyemak imbas dalam pelanjutan sampel kami. Anda boleh mengklik ikon itu menambah dan melihat item tugasan dalam peluasan kami kerana itu adalah tindakan yang ditentukan.

Mengedarkan sambungan

Walaupun begitu mudah untuk memuat naik pelanjutan ke Kedai Web Chrome, proses terlalu panjang untuk merangkumi semua butiran. Singkatnya, anda membuat akaun pemaju, pakej pelanjutan anda, dan kemudian serahkannya bersama butiran kandungannya (seperti nama, ikon, tangkapan skrin, dan lain-lain); seperti yang disenaraikan dalam panduan langkah demi langkahnya.

Apa selepas ini? Baca dan kod

Seperti yang anda mungkin jangkakan, tujuan tutorial ini adalah untuk membuat anda bermula dengan pembangunan lanjutan untuk Google Chrome. Saya telah cuba untuk menampung konsep asas; Walau bagaimanapun, anda perlu tahu lebih banyak lagi untuk melakukan pembangunan lanjutan yang serius.

Yang berkata, di bawah adalah sebahagian daripada saya sumber pergi ke sumber kegemaran untuk belajar mengembangkan sambungan untuk Google Chrome dan pelayar berasaskan Chromium yang lain:

1. Semua kebolehan, komponen, dan ciri pelanjutan.
2. Sambungan sampel oleh pasukan di belakang Google Chrome.

Jika anda telah melalui sumber-sumber ini dan bersedia untuk beberapa cabaran, cobalah menambah ciri-ciri berikut dalam pelanjutan yang baru saja anda tamat membangun:

1. Pilihan untuk memadam item yang disimpan untuk tugasan.
2. Ciri untuk menunjukkan pemberitahuan apabila selesai menambah item.

Itu semua tentang mengembangkan pelanjutan pertama anda untuk pelayar yang paling popular. Pelanjutan apa yang anda buat? Adakah anda menghadapi masalah? Tolong beritahu saya cerita anda dengan menulis komen di bawah atau menghantar mesej kepada saya di @aksinghnet.

Akhir sekali, jangan lupa, anda boleh mencuba Todoizr (pelanjutan yang kami buat) di Kedai Web Chrome dan semak kod lengkapnya dalam repositori ini.