Belajar Membuat Extensi Google Chrome

0
62

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.

Statistik-Browser-Belajar-Membuat-Extensi-Chrome-lamongandev.com

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.

Test-extensi-Belajar-Membuat-Extensi-Chrome-lamongandev.com

Yang pertama buat dahulu folder dengan nama “Belajar Extensi Chrome

Buat-folder-Belajar-Membuat-Extensi-Chrome-lamongandev.com

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.

Icon-extensi-Belajar-Membuat-Extensi-Chrome-lamongandev.com

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);

file-extensi-chrome-Belajar-Membuat-Extensi-Chrome-lamongandev.com

Jika sudah sekarang kita coba install extensinya, Masuk ke browser chrome kalian, klik Alat->Extensi pada menu bar atas

lokasi-extensi-google-chrome-Belajar-Membuat-Extensi-Chrome-lamongandev.com

Aktifkan Developer mode pada bagian kiri atas,

extensi-mode-developer-off-Belajar-Membuat-Extensi-Chrome-lamongandev.com

extensi-mode-developer-on-Belajar-Membuat-Extensi-Chrome-lamongandev.com

Klik “Muat Extensi” dan pilih folder extensi yang sudah kita buat tadi, Kemudian Klik “BUKA”.

klik-muat-extensi-Belajar-Membuat-Extensi-Chrome-lamongandev.com

pilih-folder-extensi-chrome-Belajar-Membuat-Extensi-Chrome-lamongandev.com

Dan ekstensi kita sudah langsung aktif..

ekstensi-aktif-Belajar-Membuat-Extensi-Chrome-lamongandev.com

Sekarang coba akses website, maka ekstensi kita akan otomatis menjalankan perintah javascript yang ada di ” content.js ”

Test-extensi-Belajar-Membuat-Extensi-Chrome-lamongandev.com