Dasar-dasar membuat chrome extension

Secara prinsip script inti dari chrome extension terdiri dari 4 bagian yaitu content scripts, background, popup dan option page.  Semua script tersebut opsional, artinya script yang dibuat tersebut menyesuaikan dengan kebutuhan dari suatu ekstensi.

Adapun perbedaan-perbedaan mendasar dari script-script tersebut adalah:

Content Script

Adalah kode javascript yang berhubungan dengan page dari suatu website.  Script tersebut dapat mengakses DOM html web itu secara langsung.  Tetapi perlu diingat, meski bisa mengakses halaman website, namun script tersebut sama sekali tidak berhubungan dengan kode javascript website.  Sebagai contoh semisal dalam halaman web itu sudah ada library JQuery, tetapi jika content script tidak ada library tersebut maka anda tidak bisa menggunakan JQuery.

Background Script

Adalah script yang berjalan di latar belakang.  Script yang berjalan di latar belakang tidak bisa mengakses DOM dari suatu website atau lebih tepatnya tidak berhubungan dengan content script sebagaimana tersebut di atas.  Untuk berkomunikasi antara background script dan content script maka diperlukan sebuah port.

Popup

Adalah bagian chrome extension yang terletak di kanan atas(sebagai toolbar menu) seperti gambar berikut:

Bagian popup ini adalah halaman html biasa dan pada umumnya digunakan untuk setting hal-hal tertentu misalkan untuk klik tombol connect seperti anonymox extension atau screenshoot pada extension-extension yang berfungsi sebagai screenshoot website.  Perlu diingat bahwa anda tidak boleh menggunakan inline javascript di halaman tersebut.  Yang dimaksud inline Javascript adalah kode Javascript langsung pada halaman web.  Semisal contoh berikut:


<script type='text/javascript'>

$(document).ready(function(){

 

});

</script>

Karena itu agar javascript dapat berfungsi anda harus membuat file javascript baru yang dimasukkan dalam halaman popup semisal:

<html>

<head>

<script type=’text/javascript’ src=’my.js’>

</head>

<body>

</body>

</html>

Bagian popup ini sama sekali juga tidak bisa berhubungan dengan content script.  Agar dapat berkomunikasi dengan content script, sama seperti background maka harus dibuatkan sebuah port.

Option page

Mungkin saat anda menggunakan chrome extensi saat diklik membuka halaman baru seperti misalnya adblocker plus.  Halaman tersebut disebut dengan Halaman opsi(option page).  Option page pada umumnya berfungsi sebagai setting suatu extension.

Semua bagian-bagian tersebut di atas di muat dalam file manifest.json.  File manifest.json tersebut adalah file sentral untuk membuat chrome extension.  Fungsi file manifest.jon adalah mengatur segala setting yang berhubungan dengan chrome extension anda, baik itu logo/icon, javascript, image resources dan lain sebagainya. Jika format JSON dalam file tersebut salah atau salah satu file missing atau tidak ada maka chrome extension anda tidak bisa digunakan.
Dan berikut adalah contoh komplek dari file manifest.json:


{
    "manifest_version": 2,
    "name": "Bobote",
    "description": "Addin bot tokoped,sopii dan bukalapak",
    "version": "1.0",
    "permissions": [ "tabs",
        "https://*/*",
		"http://*/*",
		 "storage",
		 "activeTab",
		  "contextMenus",
		  "nativeMessaging",
		  "debugger",
		  "clipboardRead"
    ],
    "content_scripts": [
        {
            "matches": ["https://www.tokopedia.com/product-add.pl*"],
            "js": ["jquery-3.2.1.min.js","basemodule.js",
			"jNotify.jquery.js","bootstrap.min.js","tokopedadd.js"],
            "css": ["jNotify.jquery.css","bootstrap.min.css","bootstrap-reset.css","operlay.css"],
            "run_at": "document_idle"
        },
		  {
            "matches": ["https://www.bukalapak.com/products/new*"],
            "js": ["jquery-3.2.1.min.js", 
			"jNotify.jquery.js","bootstrap.min.js","basemodule.js","bladd.js"],
            "css": ["jNotify.jquery.css","bootstrap.min.css","bootstrap-reset.css","operlay.css"],
            "run_at": "document_idle"
        },
		 {
            "matches": ["https://www.bukalapak.com/products"],
            "js": ["jquery-3.2.1.min.js", 
			"jNotify.jquery.js","bootstrap.min.js","basemodule.js","bladd.js"],
            "css": ["jNotify.jquery.css","bootstrap.min.css","bootstrap-reset.css","operlay.css"],
            "run_at": "document_idle"
        },
		{"matches":["https://www.tokopedia.com/manage-product-new.pl*"],
			"js":["jquery-3.2.1.min.js","tokoped.js"],
			 "run_at": "document_idle"
		},
		{
		"matches":["https://www.bukalapak.com/products/draft"],
		 "js": ["jquery-3.2.1.min.js","bldraft.js"]
		},
		{
		"matches":["https://www.bukalapak.com/p/*"],
		"js": ["jquery-3.2.1.min.js","blsave.js"]
		},
		{
		"matches":["https://seller.shopee.co.id/portal/product/list/*"],
		"js": ["jquery-3.2.1.min.js","sopheesave.js"]
		},
		
		{
            "matches": ["https://seller.shopee.co.id/portal/product/new*"],
            "js": [ "jquery-3.2.1.min.js", 
			"jNotify.jquery.js","bootstrap.min.js","basemodule.js","sopheeadd.js"],
            "css": ["jNotify.jquery.css","bootstrap.min.css","bootstrap-reset.css","operlay.css"],
            "run_at": "document_idle"
        }
    ],
	 "background": {
	"scripts": ["player.js","helpers.js","background.js","listen.js","blocking.js"],
	 "persistent": false
  },
	 "browser_action":{
	  "default_title": "Botthok",
	  "default_popup": "popup.html"
	 },
	  "web_accessible_resources":["myjq.js","tokopedupload.js","dom.js","setting_tools.png","radioactivity.png","please_wait.gif",
	  "bukalapaksavecomplete.js",
	  "bukalapakapplication.js"]
}

Memang terkesan rumit karena banyaknya item. Tapi dari contoh tersebut kita dapat menguraikannya secara sederhana agar tidak terkesan sulit: