Pada artikel ini, saya akan menunjukkan cara membuat ekstensi Google Chrome sederhana dan mempublikasikannya ke Toko Web Chrome.
Poin utamanya adalah untuk menunjukkan proses pembuatan dan penerbitan fungsionalitas aplikasi ini akan bersifat primitif.
Ekstensi ini menampilkan saran acak dari layanan API eksternal setiap kali pengguna membukanya. Saya menyebutnya “Beri Saya Saran”.
Saya ingin memperingatkan Anda, diperlukan biaya pendaftaran satu kali untuk mendaftarkan akun Pengembang Google Anda dan memublikasikan ekstensi.
Saya akan menjelaskan proses ini di bawah.
Pratinjau
Tautan
- "Kode sumber"
- Toko Web Google -› Beri Saya Saran
- Spesifikasi Ekstensi Google
- Layanan API Saran Gratis
- Setel ulang CSS
- Google Font
Langkah 1. Buat template proyek
- ikon - folder yang berisi ikon aplikasi
- manifest.json - file konfigurasi untuk ekstensi
- .gitignore - saat saya memasukkan kode ini ke GitHub, saya membuat file terkenal ini untuk mengabaikan hal-hal lokal dari git
- index.html - file HTML utama
- main.js - file JavaScript utama
- reset.css - file css untuk mengatur ulang semua gaya browser default. Anda dapat menemukannya di sini.
- styles.css - file css utama
Langkah 2. Kembangkan ekstensi
Pertama mari tambahkan kode HTML. Dalam tag ‹head› saya telah menghubungkan file CSS dan font dari layanan Google Fonts (pilihan saya adalah Montserrat). Lalu saya menambahkan struktur HTML sederhana ke dalam badan.
Jika Anda tidak tahu cara menghubungkan Google Font, Anda dapat memeriksanya di sini — https://www.w3schools.com/css/css_font_google.asp
<!DOCTYPE html>
<html lang="en">
<head>
<title>Give Me Advice</title>
<meta charset="UTF-8">
<!-- attach local css files -->
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="styles.css">
<!-- add external fonts from Google Fonts service -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- here is loader icon -->
<img id="loader" src="icons/load.png" alt="loading" width="30" height="30" />
<!-- this is the span tag which shows the advice -->
<span id="advice"></span>
</div>
</body>
<script src="main.js"></script>
</html>
Kemudian tambahkan beberapa CSS. Tidak ada yang aneh, hanya gaya seperti pada aplikasi web sederhana.
/* add black background color to whole body */
body {
background-color: #000;
}
/* set up styles for container with advice */
.container {
min-width: 450px;
min-height: 200px;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
/* add styles for advice text */
#advice {
/* set font that I connected in HTML file */
font-family: 'Montserrat', sans-serif;
font-weight: 500;
color: #FFF;
}
/* create loader animation */
#loader {
animation: circle 6s linear infinite;
}
@keyframes circle{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
Mesin aplikasi ini adalah JavaScript. Praktik yang baik adalah membagi fungsi berdasarkan logika.
Detailnya:
- fetchAdvice - fungsi yang memanggil API Endpoint dan mem-parsing saran.
- attachAdvice - fungsi yang mendapatkan saran sebagai parameter dan memasukkannya ke dalam tag dengan id elemen #advice.
- stopLoader - fungsi yang menghapus elemen dengan id #loader dari dokumen. Awalnya ada kemajuan melingkar, tetapi ketika aplikasi mendapat saran, itu akan disembunyikan.
- window.onload - event load diaktifkan ketika seluruh halaman telah dimuat. Saya menambahkan event handler di sini yang memanggil semua fungsi di atas langkah demi langkah: ambil saran -› hentikan pemuat -› lampirkan saran.
// Function to call API and parse advice
const fetchAdvice = async () => {
const res = await fetch ('https://api.adviceslip.com/advice');
const record = await res.json();
return record?.slip?.advice ?? "-";
}
// Function to put advice into <span> tag
const attachAdvice = (advice) => {
const textNode = document.createTextNode(advice);
document.getElementById("advice").appendChild(textNode);
}
// Function to stop loader
const stopLoader = () => {
document.getElementById("loader").remove();
};
// Add onload event handler and main logic of this application
window.onload = async () => {
const advice = await fetchAdvice();
stopLoader();
attachAdvice(advice);
};
Untuk memeriksa apakah aplikasi berfungsi dengan baik Anda dapat membuka file html di browser, seperti halnya aplikasi web pada umumnya.
Langkah 3. Siapkan manifest.json
Manifes ekstensi memberikan informasi kepada browser tentang kemampuan ekstensi dan file yang digunakannya. Fitur yang tersedia untuk digunakan ekstensi ditentukan oleh versi manifes saat ini. Manifest V3 memperkenalkan penyempurnaan pada keamanan, privasi, dan kinerja ekstensi, serta memungkinkan ekstensi menggunakan teknologi web terbuka seperti pekerja layanan dan janji.
https://developer.chrome.com/docs/extensions/mv3/intro /
Mari kita periksa detailnya:
- nama - nama aplikasi ini, yang ditampilkan sebagai judul di Google Web Store.
- versi - versi aplikasi ini
- deskripsi - deskripsi yang ditampilkan di Google Web Store.
- manifest_version - versi file konfigurasi (pada saat penulisan artikel ini, versi terakhir adalah 3)
- penulis - nama pengembang
- action -› default_popup - jalur ke file HTML utama
- action -› default_title - keterangan alat yang ditampilkan dengan ikon ekstensi melayang di atas
- ikon -› 16/32/128 - ikon aplikasi
{
"name": "Give Me Advice",
"version": "1.0.0",
"description": "application that gives advices",
"manifest_version": 3,
"author": "Andrii Krupa",
"action":{
"default_popup": "index.html",
"default_title": "Give Me Advice"
},
"icons": {
"16": "icons/icon16.png",
"32": "icons/icon32.png",
"128": "icons/icon128.png"
}
}
Ada banyak parameter untuk mengkonfigurasi file ini, namun parameter di atas cukup untuk aplikasi sederhana ini.
Langkah 4. Pemeriksaan Terakhir
Untuk memastikan semuanya berfungsi dengan baik dan manifest.json ditulis dengan baik, saya akan mengunggah ekstensi ini ke Google Chrome saya dalam mode pengembang.
Langkah
Buka ekstensi chrome Anda (chrome://extensions/) dan di pojok kanan atas aktifkan tombol 'Mode pengembang'.
Sekarang di bagian atas Anda dapat melihat 3 tombol baru. Yang pertama adalah mengunggah ekstensi ('Load unpacked'). Klik dan pilih folder dengan proyek Anda.
4. Kemudian aplikasi akan ditampilkan dan Anda dapat mengujinya di dalam bilah ekstensi.
Langkah 5. Publikasikan aplikasi ke Google Web Store
Setelah Anda memeriksa apakah semuanya baik-baik saja, Anda dapat mempublikasikan ekstensi Anda.
Langkah-langkah yang harus dilakukan
Anda harus pergi ke Dasbor Pengembang Google Chrome, mendaftar dan membayar biaya pendaftaran.
Setelah Anda melewati proses pendaftaran, Anda akan melihat Dashboard ini. Tentu saja tanpa item.
Buka halaman Akun, berikan dan verifikasi alamat email Anda. Ini adalah langkah penting untuk mengirimkan peninjauan ekstensi Anda.
Kemudian Anda perlu membuat file zip yang mencakup semua file proyek, buka halaman Item dan unggah data Anda dengan mengklik tombol “+ Item baru”.
Setelah paket dimuat, Anda melihat halaman dengan pengaturan ekstensi di mana Anda harus mengisi kolom Deskripsi, pilih Kategori (pilihan saya adalah “Hanya untuk Bersenang-senang”) dan Bahasa.
Pada halaman yang sama di bawah ini perlu untuk mengunggah ikon Toko dan hingga 5 Tangkapan Layar.
Hampir selesai. Buka halaman Privasi dan isi kolom lainnya.
Tujuan tunggal - adalah informasi untuk peninjau.
Justifikasi izin - karena ekstensi ini tidak menggunakan kode jarak jauh, Anda dapat memilih opsi pertama (Tidak, saya tidak menggunakan kode jarak jauh).
Kode jarak jauh adalah JS, Wasm, atau CSS apa pun yang tidak disertakan dalam paket ekstensi. Ini termasuk referensi ke file eksternal dalam tag ‹script›, modul yang menunjuk ke file eksternal, dan string yang dievaluasi melalui eval()
Dan terakhir pilih kotak centang yang sesuai.
Ekstensi ini tidak mengumpulkan data pengguna sehingga semua kotak centang dapat dilewati.
Terakhir konfirmasikan semua pengungkapan untuk mematuhi Kebijakan.
Sekarang klik — tombol Simpan draf. Ini akan menyimpan, memeriksa semua data masukan dan memungkinkan Anda mengirimkan untuk meninjau ekstensi ini.
Jangan stres jika terjadi kesalahan, ini akan menampilkan informasi detail apa yang harus diperbaiki sebelum perpanjangan dapat diajukan untuk ditinjau kembali.
Langkah 6. Kirim untuk ditinjau
Setelah semua pekerjaan selesai, Anda dapat mengklik tombol Kirim untuk ditinjau.
Sekarang yang perlu dilakukan hanyalah menunggu. Secara umum, proses ini dapat memakan waktu hingga beberapa minggu dan bergantung pada ukuran ekstensi fungsionalitas. Namun untuk lamaran saya butuh waktu beberapa jam.
Untuk saat ini ekstensi saya tersedia di Toko Web.
Kesimpulan
Membuat dan mengunggah ekstensi sebenarnya lebih mudah daripada kelihatannya. Bahkan dimungkinkan untuk membuat aplikasi web lengkap dan membuat ekstensi darinya. Selain itu Anda dapat menggunakan Service Worker dengan segala manfaatnya seperti notifikasi, fitur cache, dll.
Ini artikel pertama saya dan semoga bermanfaat bagi Anda :)
