Munkin tak asing lagi bagi kalian jika mendengar kata Google Chrome, Ya.. Google Chrome adalah sebuah aplikasi browser yang digunakan untuk menjelajahi dunia maya atau bahasa kerennya browsing, Google chrome dibuat dan dirancang oleh perusahaan raksasa dunia yakni Google. Saat ini Google chrome adalah salah satu browser paling populer yang digunakan di dunia.
Bagi saya pribadi Google Chrome merupakan browser kebutuhan sehari-hari, Maka dari itu saya mencoba membuat extensi sendiri untuk mengekspresikan kebutuhan saya pada browser. Baiklah, Kita ke topik pembahasan yakni belajar membuat extensi chrome, Perlu diketahui bahwa extensi chrome yakni dibuat menggunakan bahasa Program JAVASCRIPT, atau kadang juga Membutuhkan HTML DAN CSS. Tetapi jangan khawatir kalian tidak harus menguasainya, Jika sudah mengerti dasarnya saja sudah cukup.
Pada tutorial kali ini saya akan memberi basicnya saja yakni menampilkan ” Hello world ” pada web yang diakses. Untuk membuat basicnya sendiri kita hanya butuh 3 file saja yakni file Manifest, icon.png dan content.js.
Yang pertama buat dahulu folder dengan nama “Belajar Extensi Chrome”
Kemudian buat file dengan nama “manifest.json“, Isi dengan source Json berikut :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | { "manifest_version": 2, "name": "Belajar Chrome Ekstensi", "version": "0.1", "browser_action": { "default_icon": "icon.png" }, "content_scripts": [ { "matches": [ "<all_urls>" ], "js": ["content.js"] } ] } |
File manifest json ini berfungsi untuk identifikasi extensi chrome anda, ganti value “name” dangan Judul extensi anda. Selanjutnya masukkan file “icon.png” ke folder “Belajar Extensi Chrome” tadi.
Yang terakhir yakni buat file “content.js” dan isi dengan source javascript berikut :
1 2 3 4 5 6 | /* BELAJAR MEMBUAT EXTENSI CHROME*/ var div = document.createElement('div'); div.style = 'position: fixed; top:25%; left:35%;z-index: 999; width:30%; min-height:200px; padding:10px; background:red; color: #FFFFFF !important;text-align:center;'; div.innerHTML = '<h1>Hello World.. :)</h1>'; document.body.appendChild(div); |
Jika sudah sekarang kita coba install extensinya, Masuk ke browser chrome kalian, klik Alat->Extensi pada menu bar atas
Aktifkan Developer mode pada bagian kiri atas,
Klik “Muat Extensi” dan pilih folder extensi yang sudah kita buat tadi, Kemudian Klik “BUKA”.
Dan ekstensi kita sudah langsung aktif..
Sekarang coba akses website, maka ekstensi kita akan otomatis menjalankan perintah javascript yang ada di ” content.js ”
