Cara Membuat Extension Chrome Sendiri dengan Mudah

Cara Membuat Extension Chrome Dengan Mudah – Halo Indonesian Blogger, kali ini saya akan sedikit share tentang bagaimana cara untuk membuat sebuah extension yang kita gunakan pada browser Google chrome. Extension ini akan kita gunakan untuk menampilkan halaman blog kita sendiri.

Baca : Cara membuat show hide kategori di Blogger

Sebelum itu apa sebenarnya extension pada chrome ? Extension merupakan sebuah software yang dapat memodifikasi dan meningkatkan fungsional dari browser google chrome. Sebuah extension dekemas dengan menggunakan bahasa pemrograman web seperti HTML,CSS ataupun Javascript.

Fungsinya sendiri berbeda beda tergantung extension yang digunakan, Misalnya disini saya menggunakan Checker Gmail maka saya mendapatkan notifikasi jika ada email masuk, membaca dan menghapus email tanpa harus membuka situs gmail.

Ok kembali pada topik bagaimana cara membuat extension chrome, Disini saya contohkan buat extensi sederhana untuk Indonesian Blogger . Berikut bahan bahan yang harus dipersiapkan;

• Icon
• manifest.json
• popup.html

Cara Membuat Extension Chrome

1. Langkah Pertama, Silahkan buat folder baru untuk menyimpan semua bahan bahan yang akan dibuat nantinya.
2. Siapkan icon, untuk icon teman teman bisa gunakan favicon blog atau mau buat sendiri juga bisa. Silahkan simpan pada folder yang telah dibuat sebelumnya.
3. Berikutnya kita buat adalah meta data dalam format json, Meta data ini kita beri nama manifest.json. File ini berisi tentang informasi nama extensi, deskripsi dan juga nomor versi. Berikut manifest.json yang akan kita gunakan untuk membuat extension chrome:

{
  "manifest_version": 2,

 "name": "Indonesian Blogger",
    

"description": "Dapatkan tutorial terbaik seputar dunia teknologi, 

internet, web & mobile di browser Google Chrome Anda.", 
    

"homepage_url": "https://www.idblog.net/",
    "browser_action": {
       

 "default_icon": "icon.png",
        "icons": { "16": "icon16.png",
     

      "48": "icon48.png",
          "128": "icon128.png" },
        

"default_title": "Indonesian Blogger", 
        "default_popup": 

"popup.html"
    }, 
    "manifest_version": 2,
    "update_url": 

"http://clients2.google.com/service/update2/crx",
    

"content_security_policy": "script-src 'self' https://www.google.com; 

object-src 'self'",
    "version": "1.0"
,
  "permissions": [
    

"activeTab",
    "storage"
  ]
}

Langkah berikutnya membuat file popup.html nya , ini sangat mudah karena jika anda mengerti sedikit HTML saya rasa anda bisa mengeditnya sendiri sesuai keinginan anda.

Disini saya buat sederhana saja dengan table dan juga link yang mengarah ke blog. Langsun saja download popup nya dibawah ini;

Setelah semua file sudah siap langkah berikutnya adalah masuk ke menu extension dengan cara klik 3 titik dipojok kanan > more tools > extension. Jika sudah terbuka centang menu developer mode.

Jika sudah pilih menu load unpack extension dan arahkan ke tempat semua file yang dibuat tadi tersimpan lalu klik saja ok. jika sudah selesai maka extension akan muncul pada menu seperti gambar diatas.

Tampilanya sangat sederhana, hanya menggunakan table dan memberikan link yang mengarah ke blog teman teman nantinya. Untuk memodifikasinya teman teman rubah saja popup.html nya sesuai keinginan. Inilah penampakan dari Indonesian Blogger

Cara Upload Extension Ke Webstore Chrome

Sebelum upload ke chrome developer, anda wajib menyimpan semua file icon,manifest,pop up dan lain lain dalam bentuk zip.

1. Pertama silahkan pergi Chrome Developer
2. Signin dengan email yang digunakan
3. Pilih ” Tambahkan Item Baru”
4. Upload file zip
5. Membayar Biaya Pendaftaran ( sekali untuk selamanya )

Biaya pendaftaran sangat terjangkau, tapi untuk lebih jelasnya anda bisa langsung membacanya, link nya ada diatas yang saya beri box berwarna biru.

Oke saya rasa cukup sekian tutorial Cara Membuat Extension Chrome , Bagaimana ? sangat mudah bukan untuk membuatnya daripada begong mending teman teman langsung praktekin aj gih. Walaupun terbilang basi tapi lumayan lah buat nambah nambah ilmu.

Akhir kata, jika ada kesalahan dan kekurangan dalam artikel ini mohon dimaafkan karena masih dalam tahap pembelajaran hihi, Terima Kasih.