Gambar 1 dari 2
Ada dua atribut lain yang dapat Anda gunakan selain browser_action: page_action atau theme. Ketiganya saling eksklusif dan menentukan jenis ekstensi yang Anda buat. Ekstensi browser_action (jenis yang paling umum) memasang ikon Anda – ditentukan oleh atribut default_icon – di area ekstensi di sebelah kanan bilah alamat Chrome.
Anda dapat membuat manifes menggunakan Windows Notepad: Anda hanya perlu menyimpannya dengan nama MANIFEST.JSON (bukan MANIFEST.TXT). Jika ada kesalahan dalam file manifes, Anda akan mendapatkan pesan yang relatif berguna yang memberi tahu Anda titik pasti dalam file tempat kesalahan terjadi dalam hal nomor baris dan kolom.
Jika Anda mendapatkan kesalahan, kembali dan periksa kembali file tersebut. Pastikan koma, tanda kutip, dan titik dua berada di tempat yang tepat, pastikan Anda belum menggunakan tanda kurung siku atau tanda kurung siku alih-alih kurung kurawal, dan ingat bahwa jika Anda membuka kurung kurawal atau kurung kurawal di hampir semua jenis file kode, Anda harus menutupnya lagi. Jika semuanya gagal, unduh kode ekstensi kami yang berfungsi.
Membuatnya melakukan sesuatu
Sejauh ini ekstensi kami tidak melakukan apa pun selain menampilkan ikon di browser. Agar berguna, kita perlu menambahkan baris lain ke file manifes: atribut default_popup untuk tindakan browser. Ini hanya menentukan file HTML yang akan ditampilkan Chrome saat Anda mengeklik ikonnya. Itu dapat berisi apa pun yang dapat dimuat dalam halaman HTML standar, termasuk JavaScript dan CSS yang kompleks jika Anda mau. Hal yang menarik tentang pop-up adalah Chrome secara otomatis menyesuaikan ukurannya agar sesuai dengan konten, sehingga Anda dapat menampilkan cuplikan informasi.
Kami akan memanfaatkan ini dengan membuat ekstensi “cuplikan berguna”. Dalam kasus kami, ini akan menampilkan pop-up yang berisi nomor telepon ekstensi kantor rekan kerja.
Yang perlu kita lakukan hanyalah memperluas sedikit file manifes, lalu membuat file HTML sederhana dengan cuplikan yang relevan, ditambah sedikit gaya CSS. File manifes sekarang terlihat seperti ini:
{
“nama”: “Ekstensi Memoire PC Pro Aide”,
"versi": "0,2",
“deskripsi”: “Pengganti sel otak yang hilang.”,
“ikon”: {
“16”: “pcpro_16.jpg”,
“48”: “pcpro_48.jpg”,
“128”: “pcpro_128.jpg”},
“tindakan_browser”: {
“ikon_default”: “pcpro_19.jpg”,
“default_popup”: “AideMemoire.html”
}
}
Kami telah merapikan kode ikon menggunakan berbagai ukuran ikon agar Chrome dapat ditampilkan sesuai kebutuhan. Satu-satunya perubahan fungsional adalah penambahan baris default_popup, yang menentukan file HTML aide memoire kami. File itu terlihat seperti ini:
Dan hanya itu saja. Kami sekarang memiliki ekstensi Chrome yang berfungsi dan sebenarnya cukup berguna jika Anda memiliki sedikit informasi yang selalu Anda lupakan sepanjang hari. Klik ikon ekstensi dan gelembung pop-up kecil muncul, sehingga informasi selalu tersedia dan Anda tidak perlu keluar dari apa yang sedang Anda lakukan.
Langkah selanjutnya
Ini hanyalah puncak gunung es dalam hal ekstensi, tetapi struktur sederhana dari file manifes dan beberapa file pendukung HTML adalah sama untuk hampir semua ekstensi. Anda bisa mendapatkan dokumentasi Google lengkap untuk ekstensi.
Sekarang klik di sini untuk panduan langkah demi langkah kami agar ekstensi Anda berfungsi di Google Chrome.
