Cara membuat add-ons atau Ekstensi di browser

Add-ons di Mozilla firefox sejak Firefox 45 berubah menjadi webExtensions agar bisa cross browser.  Karena itu dalam tutorial kali ini penulis hanya membahas cara membuat web ekstensi sehingga juga bisa diinstall di Chrome ataupun Opera.

Langkah awal untuk membuat add-ons atau webextensions adalah membuat file format json dengan nama manifest.json yang bisa anda buat pake notepad biasa atau lebih baik lagi notepad++ seperti di bawah ini:

{
"manifest_version": 2,
"name": "MyAddons",
"description": "Addons buat coba-coba",
"version": "1.0",
"permissions": [
"http://*/*"
],
"icons":{"16":"myicon16x16.png","100":"myicon100x100.png"},
"content_scripts": [
{
"matches": ["https://website buat di ditanam add-ons"],
"js": ["jquery.js", "jquery-ui-1.8.16.custom.min.js", "jquery.blockUI.min.js", "jNotify.jquery.js"],
"css": ["bootstrap.min.css","my.css"],
"run_at": "document_idle"
},
{
"matches":["https://alamat url kedua"],
"js":["jquery.js","my.js","badudu.js"],
"run_at":"document_idle"
}
]
}

Keterangan:

manifest_version

Format: json value

Adalah versi manifest dari add-ons. Untuk membuat add-ons ada format-format dalam bentuk baku yang terangkum dalam file manifest.json dan untuk saat ini format yang dipakai adalah manifest_version 2 yang merupakan pengembangan dari manifest_version 1 yang sudah tidak dipakai lagi di tahun 2013.

name

Format: json value

Adalah nama add-ons anda

descriptions

Format: json value

Keterangan dari add-ons anda

versions

Versi add-ons anda.

permissions

Format: JSON Array

Alamat url apa yang diijinkan beserta protokolnya.  Seperti contoh di atas yaitu “http:///“, menandakan bahwa add-ons tersebut akan tampil saat anda membuka halaman yang berawalan http, semisal anda ingin add-ons bisa tampil saat membuka file, permissions tersebut menjadi “file:////“.  Jadi formatnya menjadi seperti dibawah ini:

“permissions”: [
“http:///“,”file:////“]

Tanda asteriks “*” menandakan reguler ekpressions sembarang karakter diijinkan.

icons

Format: JSON Object

Icons yang akan ditampilkan baik di toolbar browser atau di panel add-ons.  Ukuran yang disarankan adalah 16×16 px, 128×128 px dan 48×48 px

contents_scripts

Format: JSON Array

Terdiri atas:

matches

Format:Json Array

Alamat URL web saat akan menampilkan add-ons.

js

Format:Json Array

Nama-nama file javascript

css

Format: Json Array

Nama-nama file stylesheet(CSS)

run_at

Format: Json Value

terdiri atas:

  • document_idle: script yang diinjectkan berjalan sesudah event window.onload
  • document_start: setelah css selesai dipanggil tapi sebelum DOM(Document Object Model) terkonstruksi atau juga sebelum script-script dalam web tersebut berjalan.
  • document_end: script yang diinjectkan berjalan sesudah DOM selesai tapi sebelum gambar dan frame muncul.

Berdasar keterangan-keterangan tersebut di atas, sekarang kita membuat add-ons sederhana yaitu menghilangkan alamat url dari sebuah halaman website misal tribunnews.com. Adapun langkah-langkahnya sebagai berikut:
– Buat folder misal bernama myaddons
– Buat file manifest json seperti ini:

{
"manifest_version": 2,
"name": "TribunNewsRemoveImage",
"description": "Addons buat menghilangkan image tribunnews.com",
"version": "1.0",
"permissions": [
"http://*/*"
],
"icons":{"16":"mylogo16x16.png","128":"mylogo128x128.png"},
"content_scripts":[
{
"matches": ["http://www.tribunnews.com/*"],
"css":["my.css"],
"js": ["jquery-3.2.1.min.js","my.js"],
"run_at": "document_idle"
}
]
}

Setelah itu download jquery terbaru lalu taruh dalam satu folder dengan manifest.json tadi(di contoh adalah jquery versi 3.2.1).

Setelah selesai buat script javascript seperti berikut:

$(function(){ $("<div id='fixedfooter'></div>").appendTo("body");
$("<button id='mybutton'>Klik</button>").appendTo("#fixedfooter");
$("#mybutton").click(function(){ $("img").remove();});});

Simpan dalam folder myaddons. Setelah selesai, buat file css seperti berikut:

#fixedfooter{
background-color:green;
position:fixed;
bottom:0;
left:0;
width:100%;
height:50px;
z-index:9999
}
#mybutton{
height:30px;
width:150px;
left:40px;
}

Namai dengan my.css dan simpan di folder yang sama.

Install add-ons yang penulis sertakan  dalam attachment tersebut di browser anda, bisa Firefox(attachment 1), Chrome atau Opera(attachment 2, ubah extensinya dari xpi ke zip dan taruh dalam satu folder), atau bisa juga browser-browser “aneh” selain 3 browser populer tersebut.  Asal enginenya sama yaitu dari Gecko dan Chromium, add-ons atau ekstensi tersebut masih bisa digunakan di browser yang kurang populer.

Khusus Firefox, setiap add-ons harus melalui tahap verifikasi dahulu.  Untuk mengetahui tahapan tersebut silahkan ke halaman cara registrasi dan verifikasi add-ons di Firefox.

Dan berikut adalah hasil add-ons dari TribunNewsRemoveImage, di mana gambar dari web tersebut hilang semua dengan menekan tombol klik.

contoh hasil cara buat add-ons di browser

Attachments

anasmbahdien

Seorang programmer yang menguasai bahasa pemograman Delphi, VB.NET, PHP dan Android. Untuk hasil karya kunjungi mogotekno.com

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *