Cara Membuat Ekstensi Chrome dari Awal

Jika Anda mau menambah atau memodifikasi beberapa fungsi di Google Chrome, Anda perlu menggunakan ekstensi. Meskipun Anda dapat mengunduh ekstensi dari Toko Web Chrome, tetapi terkadang Anda memerlukan fungsionalitas khusus yang tidak dapat Anda temukan di ekstensi yang ada.

Nah, kabar baiknya adalah Anda dapat membuat ekstensi sendiri untuk menambah atau mengubah fungsionalitas yang diperlukan atau membuat add-on atau aplikasi baru untuk Google Chrome, yang nantinya bisa Anda buat. mendistribusikan ke pengguna lain menggunakan Toko Web Chrome.

Berikut ini, saya akan menunjukkan kepada Anda cara termudah untuk membuat ekstensi. Jika Anda memiliki pengetahuan tentang pengembangan web (HTML, CSS, dan JS), Anda akan merasa seperti di rumah. Jika tidak, tonton dulu saluran ini untuk pelajari dasar-dasar pengembangan web, kemudian lanjutkan di bawah.

Prasyarat

Anda harus menyelesaikan persyaratan berikut sebelum memulai dengan tutorial ini.

1. Anda harus terbiasa HTML, CSS, dan JavaScript. [Periksa sumber daya]
2. Anda harus memiliki editor kode untuk menulis ekstensi. [Bandingkan editor]
3. (Opsional) Jika Anda ingin mendistribusikan ekstensi Anda ke pengguna lain, Anda harus memiliki akun pengembang di Toko Web Chrome. [Buat sebuah akun]

catatan: Google meminta Anda membayar sedikit biaya untuk membuat akun pengembang di Toko Web Chrome.

Buat ekstensi

Dalam tutorial ini, saya akan membagikan proses pembuatan a ekstensi yang harus dilakukan untuk Google Chrome. Ini akan menjadi utilitas (seperti yang ditunjukkan di bawah) untuk menunjukkan komponen penting dan kemampuan yang disediakan untuk ekstensi.

1. Dapatkan templat

Google Chrome, seperti platform lainnya, membutuhkannya ekstensi untuk memiliki struktur yang ditetapkan, yang mungkin terlihat rumit untuk pemula. Itu sebabnya bagus untuk mendapatkan templat boilerplate untuk ekstensi yang akan menyediakan semua kebutuhan.

Extensionizr adalah generator boilerplate terbaik untuk ekstensi chrome. Ini memungkinkan Anda untuk memilih salah satu dari jenis ekstensi yang diberikan - aksi browser (tindakan untuk semua halaman atau browser), aksi halaman (tindakan untuk halaman saat ini), atau ekstensi tersembunyi (tindakan latar belakang yang biasanya disembunyikan di antarmuka depan).

Selain itu, ia menyediakan berbagai opsi penyesuaian untuk termasuk / kecualikan add-ons yang diperlukan, izin, dll. Anda harus memilih “Tindakan peramban” sebagai jenis ekstensi dan “Tidak ada latar belakang” sebagai halaman latar belakang untuk tutorial ini.

Setelah selesai memilih opsi untuk membuat ekstensi sampel, tekan tombol “Unduh itu!” tombol di Extensionizr. Akhirnya, ekstrak arsip (.zip) ke direktori dan buka editor kode Anda untuk mulai menulis ekstensi.

2. Kode ekstensi

Setelah mengunduh dan mengekstrak templat, Anda akan melihat struktur direktori seperti yang ditunjukkan pada tangkapan layar di bawah ini. Template diatur dengan rapi, dan Anda harus tahu bahwa file yang paling penting adalah “manifes. json“.

Mari kita mengenal file dan folder lain di direktori ini juga:

1. _locales: Sudah terbiasa menyimpan informasi bahasa untuk aplikasi multibahasa.
2. css: Berfungsi untuk menyimpan perpustakaan front-end pihak ketiga seperti Bootstrap 4.
3. ikon: Ini dirancang untuk memiliki ikon untuk ekstensi Anda dalam berbagai ukuran.
4. js: Ini berguna untuk menyimpan perpustakaan back-end pihak ketiga seperti jQuery 3.
5. src: Ini menyimpan kode aktual yang akan Anda tulis untuk ekstensi Anda.

manifes. json

Ini berisi metadata dasar tentang aplikasi Anda, yang mendefinisikan detail aplikasi Anda ke browser. Anda dapat mengeditnya untuk mengatur nama ekstensi, deskripsi, situs web, ikon, dll. Bersama dengan spesifik seperti tindakan dan izin browser.

Misalnya, dalam kode di bawah ini, Anda akan melihat bahwa saya mengubah nama, deskripsi, dan homepage_url bersama dengan default_title di bawah browser_action. Apalagi saya ditambahkan “penyimpanan” di bawah izin karena kami perlu menyimpan data dalam ekstensi kami.

 "name": "Todoizr - To-do Simplified", "versi": "0.0.1", "manifest_version": 2, "description": "Aplikasi agenda sederhana untuk semua orang.", "homepage_url": " https://go.aksingh.net/todoizr "," icons ": " 16 ":" icons / icon16.png "," 48 ":" icons / icon48.png "," 128 ":" icons / icon128 .png "," default_locale ":" en "," browser_action ": " default_icon ":" icons / icon19.png "," default_title ":" Todoizr - To-do Sederhana "," default_popup ":" src / browser_action / browser_action.html "," izin ": [" penyimpanan "] 

src \ browser_action

Direktori ini akan menyimpan kode untuk tindakan browser. Dalam kasus kami, kami akan melakukannya kode jendela sembulan ditampilkan di mengklik ikon ekstensi di browser. Ekstensi kami akan memungkinkan pengguna untuk menambahkan dan melihat item yang harus dilakukan di popup.

catatan: Anda selalu dapat memulai dengan kode dengan mengkloning repositori ini.

Kode awal dari templat

Meskipun direktori ini hanya memiliki file HTML yang memiliki semua kode, saya telah memutuskan untuk membaginya menjadi tiga file terpisah untuk kejelasan yang lebih baik. Konon, file HTML itu bernama “browser_action.html” sekarang memiliki kode berikut:

Apalagi file style itu bernama “browser_action.css” memiliki konten di bawah ini sementara file JavaScript bernama “browser_action.js” kosong untuk saat ini.

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

Rancang antarmuka popup

Setelah menyiapkan proyek awal, mari kita merancang antarmuka popup terlebih dahulu. saya sudah mengatur antarmuka dengan pendekatan minimalis, menunjukkan nama di atas diikuti oleh formulir untuk menambahkan item yang harus dilakukan dan area di bawah ini untuk melihat item yang ditambahkan. Ini terinspirasi oleh desain sederhana dari “Bentuk Gaya 5“.

Dalam kode di bawah ini, saya telah menambahkan dua divs - satu untuk menampilkan formulir untuk menambahkan item yang harus dilakukan dan yang lain untuk menampilkan daftar item yang harus dilakukan. Yang mengatakan, kode baru untuk “browser_action.html” adalah sebagai berikut:

       
  
 
Todoizr
 
 
   
 
 
  
 
 
 
 
    

Dan file gaya “browser_action.css” sekarang memiliki kode berikut:

 @import url ("./ form_style_5.css"); #mainPopup height: 200px; lebar: 300px; font-family: Helvetica, Ubuntu, Arial, sans-serif;  / * Agenda item bentuk * / .form-style-5 margin: auto; padding: 0px 20px;  .form-style-5: first-child background: none;  .form-style-5 h1 color: # 308ce3; ukuran font: 20px; perataan teks: tengah;  .form-style-5 input [type = "text"] width: auto; mengapung: kiri; margin-bottom: tidak disetel;  .form-style-5 input [type = "button"] background: # 308ce3; lebar: otomatis; mengapung: benar; padding: 7px; perbatasan: tidak ada; batas-jari-jari: 4px; ukuran font: 14px;  .form-style-5 input [type = "button"]: hover background: # 3868d5;  / * Daftar item agenda * / .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, file gaya pihak ketiga “form_style_5.css” memiliki konten di bawah ini. Hanya diambil dari situs webnya untuk menginspirasi desain ekstensi kami.

 / * Form Style 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 otomatis; padding: 20px; latar belakang: # f4f7f8; border-radius: 8px; font-family: Georgia, "Times New Roman", Times, serif;  .form-style-5 fieldset border: none;  .form-style-5 legend font-size: 1.4em; margin-bottom: 10px;  .form-style-5 label display: block; margin-bottom: 8px;  .form-style-5 input [type = "text"], input .form-style-5 [type = "date"], input .form-style-5 [type = "datetime"], .form-style -5 input [type = "email"], .form-style-5 input [type = "number"], input .form-style-5 [type = "search"], .form-style-5 input [type = "waktu"], input .form-style-5 [type = "url"], .form-style-5 textarea, .form-style-5 pilih font-family: Georgia, "Times New Roman", Times , serif; latar belakang: rgba (255.255.255, .1); perbatasan: tidak ada; batas-jari-jari: 4px; ukuran font: 16px; margin: 0; garis besar: 0; padding: 7px; lebar: 100%; ukuran kotak: kotak batas; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; warna latar: # 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;  .form-style-5 input [type = "text"]: fokus, input .form-style-5 [type = "date"]: fokus, input .form-style-5 [type = "datetime"]: fokus, input .form-style-5 [type = "email"]: fokus, input .form-style-5 [type = "number"]: fokus, input .form-style-5 [type = "search"] : fokus, input .form-style-5 [type = "time"]: fokus, input .form-style-5 [type = "url"]: fokus, .form-style-5 textarea: fokus, .form- style-5 select: focus background: # d2d9dd;  .form-style-5 pilih -webkit-appearance: tombol-menulist; tinggi: 35px;  .form-style-5 .number background: # 1abc9c; warna: #fff; tinggi: 30px; lebar: 30px; display: inline-block; ukuran font: 0.8em; margin-right: 4px; garis-tinggi: 30px; perataan teks: tengah; text-shadow: 0 1px 0 rgba (255.255.255,0.2); batas-radius: 15px 15px 15px 0px;  .form-style-5 input [type = "submit"], input .form-style-5 [type = "button"] position: relative; display: blok; bantalan: 19px 39px 18px 39px; warna: #FFF; margin: 0 otomatis; latar belakang: # 1abc9c; ukuran font: 18px; perataan teks: tengah; font-style: normal; lebar: 100%; perbatasan: 1px solid # 16a085; lebar-batas: 1px 1px 3px; margin-bottom: 10px;  .form-style-5 input [type = "submit"]: hover, .form-style-5 input [type = "button"]: hover background: # 109177;  

Tulis logika sembulan

Setelah kita selesai dengan front-end ekstensi, sekarang mari kita menulis logika untuk kerjanya. Kami membutuhkan ekstensi kami untuk dapat menambah item agenda dan juga menampilkannya di jendela sembulan. Jadi kami akan menambahkan pendengar klik tombol untuk menambahkan teks masukan sebagai item yang harus dilakukan dan pendengar pemuatan halaman untuk menampilkan item-item itu.

Dalam kode di bawah ini, kita akan menggunakan dua fungsi - sync.get () dan sync.set (), yang merupakan bagian dari “chrome.storage“. Kami membutuhkan yang kedua untuk menyimpan item yang harus dilakukan di penyimpanan dan yang pertama untuk mengambilnya dan menunjukkannya.

Yang mengatakan, di bawah ini adalah kode final “browser_action.js” mengajukan. Seperti yang Anda lihat di bawah, kode ini sangat dikomentari untuk membantu Anda memahami tujuannya.

 function loadItems () / * Pertama dapatkan () data dari penyimpanan * / chrome.storage.sync.get (['todo'], fungsi (hasil) var todo = [] jika (result && result.todo && result.todo.trim ()! == ") / * Parse dan dapatkan array saat disimpan sebagai string * / 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. Muat ekstensi

Setelah Anda selesai menulis ekstensi, inilah saatnya untuk mengujinya melalui fitur Google Chrome yang menawarkan untuk memuat ekstensi yang tidak dibongkar dan tidak dibongkar. Tapi pertama-tama, kamu harus aktifkan mode pengembang di browser Anda: klik pilihan tombol > memilih “Lebih banyak alat” > Ekstensi, dan kemudian beralih “mode pengembang“.

Sekarang Anda akan melihat lebih banyak tombol di bawah bilah pencarian. Di sini klik “Muat terbuka” tombol. Ini akan meminta direktori - jelajahi dan pilih direktori ekstensi Anda, dan itu akan memuat ekstensi. Jika Anda mengedit atau memperbarui kode ekstensi Anda, Anda dapat mengklik tombol muat ulang untuk memuat perubahan terbaru.

Dalam contoh kita, Anda akan melihat ikon ekstensi di sebelah ikon profil karena kami menambahkan tindakan browser di ekstensi sampel kami. Anda dapat mengklik ikon itu untuk menambah dan melihat item yang harus dilakukan dalam ekstensi kami karena itu adalah tindakan yang ditentukan.

Bagikan ekstensi

Padahal itu mudah untuk mengunggah ekstensi ke Toko Web Chrome, prosesnya terlalu lama untuk mencakup semua detail. Singkatnya, Anda membuat akun pengembang, mengemas ekstensi Anda, dan kemudian mengirimkannya beserta detail kontennya (seperti nama, ikon, tangkapan layar, dll.); sebagaimana tercantum dalam panduan langkah demi langkahnya.

Apa selanjutnya? Baca dan kode

Seperti yang mungkin Anda harapkan, tujuan tutorial ini adalah untuk membantu Anda memulai pengembangan ekstensi untuk Google Chrome. Saya telah mencoba untuk membahas konsep-konsep dasar; namun, Anda perlu tahu lebih banyak untuk melakukan pengembangan ekstensi yang serius.

Yang mengatakan, di bawah ini adalah beberapa milik saya sumber daya go-to favorit untuk belajar mengembangkan ekstensi untuk Google Chrome dan browser berbasis Chromium lainnya:

1. Semua kemampuan, komponen, dan fitur ekstensi.
2. Contoh ekstensi oleh tim di belakang Google Chrome.

Jika Anda telah melewati sumber daya ini dan siap menghadapi beberapa tantangan, coba tambahkan fitur di bawah ini dalam ekstensi yang baru saja selesai Anda kembangkan:

1. Opsi untuk menghapus item tugas yang disimpan.
2. Fitur untuk menampilkan notifikasi ketika selesai menambahkan item.

Itu semua tentang mengembangkan ekstensi pertama Anda untuk peramban paling populer. Ekstensi apa yang Anda buat? Apakah Anda mendapat masalah? Tolong beri tahu saya kisah Anda dengan menulis komentar di bawah atau mengirim saya pesan ke @aksinghnet.

Terakhir tetapi tidak kalah pentingnya, harap perhatikan bahwa Anda dapat mencoba Todoizr (ekstensi yang kami buat) di Chrome Web Store dan periksa kode lengkapnya di repositori ini.