Mengembangkan Ekstensi Google Chrome

Ini bukan rahasia lagi apabila perambang favorit saya adalah Google Chrome. Saya suka karena cepat, handal, tidak crash (sangat sering), dan tampilannya bagus. Ada juga hal lain yang menurut saya lebih berharga. Ini adalah fakta bahwa Anda dapat membuat ekstensi untuknya hanya dengan menggunakan HTML, CSS, dan JavaScript. Saya selalu mendukung produk seperti itu, produk yang terbuka untuk komunitas dan Chrome kebetulan menjadi salah satu produk semacam ini. Jika Anda membutuhkan sesuatu dan belum diimplementasikan, Anda bebas mengembangkannya sendiri.

Jadi pada akhir artikel ini Anda akan menemukan ekstensi Chrome yang dapat bekerja, yang akan menggunakan sebagian besar teknik yang dijelaskan di bawah ini. Anda bisa mengunduh contoh hasil akhir dengan menggunakan tombol kode sumber download di bagian atas halaman ini.

Mengapa Anda Harus Menulis Ekstensi Anda Sendiri?

Saya selalu mendorong orang-orang untuk menggunakan alat yang lebih baik untuk mempercepat alur kerja. Perangkat lunak yang kita gunakan seharusnya membantu kita, dan kita seharusnya tidak harus bertarung dengannya. Mengembangkan ekstensi / plugin untuk editor atau browser favorit Anda tidak hanya membantu Anda, tapi juga pemrogram lain, yang cepat atau lambat akan berada dalam situasi yang sama. Jika ada yang hilang, Anda bisa membuatnya sendiri dan dengan Chrome ini sangat mudah. Pemodelan lingkungan sekitar kebutuhan Anda adalah kunci untuk menjadi sangat produktif.

Mengembangkan & Menguji Ekstensi Anda

Untungnya ada cara untuk menguji ekstensi Anda tanpa harus mengunggahnya toko web Chrome. Di address bar peramban Anda, ketik saja:

chrome://extensions

Pastikan Anda mencentang Developer mode dan klik tombol Load unpacked extension.... Kemudian cukup pilih folder dari harddisk Anda yang berisi berkas ekstensi.

Arsitektur

Berikut diagram arsitektur untuk ekstensi Chrome:

Dan sekarang mari kita lihat lebih dekat setiap elemen dalam arsitektur.

Manifest

Titik masuk ekstensi Anda adalah berkas manifest.json. Ini harus berisi objek JSON yang valid. Sebagai contoh:

{
    "name": "BrowserActionExtension",
    "version": "0.0.1",
    "manifest_version": 2,
    "browser_action": {
        "default_title": "That's the tool tip",
        "default_popup": "popup.html"
    }
}

Properti yang dibutuhkan adalah name, version, dan manifest_version. version bisa di mana saja dari satu sampai empat, bilangan bulat yang dipisahkan titik. Ini adalah sesuatu yang digunakan oleh sistem autoupdate Google. Begitulah cara mengetahui kapan untuk memperbarui ekstensi Anda. Isi dari manifest_version haruslah bilangan bulat 2.

Manifest bisa berisi properti lain tergantung pada jenis ekstensi yang Anda butuhkan, tapi saya akan menjelaskan hanya yang saya anggap cukup menarik.

Halaman Background

Setiap ekstensi memiliki halaman background yang tak terlihat yang dijalankan oleh peramban. Ada dua jenis - halaman background persisten dan halaman event. Yang pertama aktif, sepanjang waktu. Yang kedua hanya aktif bila dibutuhkan. Google mendorong pengembang untuk menggunakan halaman event, karena ini menghemat memori dan meningkatkan keseluruhan kinerja peramban. Namun, ada baiknya untuk mengetahui bahwa ini juga mengharuskan Anda memasukkan logika dan inisialisasi utama Anda. Biasanya halaman/skrip background memainkan peran yang menjembatani antara bagian lain dari ekstensi.

Berikut adalah bagaimana Anda harus menjelaskannya di manifest:

"background": {
    "scripts": ["background.js"],
    "persistent": false/true
}

Seperti yang telah Anda duga, jika properti persistent itu bernilai false maka Anda akan menggunakan halaman event. Jika tidak, Anda akan bekerja dengan halaman background yang persisten.

Content Script

Jika Anda memerlukan akses ke DOM laman saat ini, maka Anda harus menggunakan content script. Sebuah kode yang dijalankan dalam konteks halaman web saat ini, yang berarti akan dieksekusi dengan setiap refresh. Untuk menambahkan skrip seperti itu, gunakan sintaks berikut.

"content_scripts": [
    {
        "matches": ["https://*/*", "https://*/*"],
        "js": ["content.js"]
    }
]

Ingatlah bahwa nilai dari matches menentukan halaman mana yang akan digunakan skrip Anda. Baca lebih lanjut tentang matches patterns di sini.

Antarmuka Pengguna

Ada beberapa cara untuk membangun UI ekstensi Anda. Inilah empat yang paling populer.

Browser Action

Sebagian besar pengembang menggunakan properti browser_action untuk membangun plugin mereka. Begitu Anda menyetelnya, ikon yang mewakili ekstensi Anda akan ditempatkan di sisi kanan bilah alamat. Pengguna kemudian bisa mengklik ikon dan membuka pop-up konten HTML yang sebenarnya Anda kontrol.

Berkas manifest harus berisi data berikut:

"browser_action": {
    "default_icon": {
        "19": "icons/19x19.png",
        "38": "icons/38x38.png"
    },
    "default_title": "That's the tool tip",
    "default_popup": "popup.html"
}

default_title adalah tool tip yang ditunjukkan saat pengguna menyorot ikon Anda. default_popup sebenarnya adalah berkas HTML yang dimuatkan di dalam pop-up. Ada juga lencana yang bisa Anda tempatkan di atas ikon Anda. Anda bisa melakukannya di dalam background script Anda. Sebagai contoh:

chrome.browserAction.setBadgeText({text: "yeah"});

Inilah kode yang saya gunakan untuk menghasilkan gambar di atas.

Page Action

Properti page_action mirip dengan browser action, namun ikon ditampilkan di dalam bilah alamat:

Yang menarik di sini adalah bahwa ikon Anda awalnya tersembunyi, jadi Anda harus memutuskan kapan harus menunjukkannya. Sebagai contoh, pada gambar di atas, ikon RSS akan ditampilkan hanya jika halaman saat ini berisi link ke RSS feed. Jika Anda perlu menampilkan ikon Anda setiap saat, ada gunanya menggunakan browser_action secara langsung.

Untuk menambahkan page action, ketik kode berikut di dalam manifest Anda:

"page_action": {
    "default_icon": {
        "19": "images/icon19.png",
        "38": "images/icon38.png"
    },
    "default_title": "Google Mail",
    "default_popup": "popup.html"
}

Berbeda dengan ikon browser action, ikon page action tidak memiliki lencana.

DeveloperTools

Saya sering menggunakan DeveloperTools dan Chrome menawarkan metode untuk menambahkan tab baru ke alat ini. Hal pertama yang harus Anda lakukan adalah menambahkan halaman HTML yang akan dimuat saat panel dibuka:

"devtools_page": "devtools.html"

Tidak perlu meletakkan HTML di dalam halaman, kecuali untuk menautkan dalam berkas JavaScript, yang akan membuat tab:

<script src="devtools.js"></script>;

Dan kemudian sertakan kode berikut di dalam berkas devtools.js:

chrome.devtools.panels.create(
    "TheNameOfYourExtension", 
    "img/icon16.png", 
    "index.html",
    function() {

    }
);

Sekarang kode di atas akan menambahkan tab baru dengan nama TheNameOfYourExtension dan setelah Anda klik di atasnya, peramban akan memuat index.html di dalam DeveloperTools.

Omnibox

omnibox adalah kata kunci yang ditampilkan di dalam bilah alamat Chrome. Misalnya, jika Anda menambahkan properti berikut ke manifest Anda

"omnibox": { "keyword" : "yeah" }

Dan kemudian tambahkan kode di bawah ini, di dalam background script Anda:

chrome.omnibox.onInputChanged.addListener(function(text, suggest) {
    suggest([
      {content: text + " one", description: "the first one"},
      {content: text + " number two", description: "the second entry"}
    ]);
});
chrome.omnibox.onInputEntered.addListener(function(text) {
    alert('You just typed "' + text + '"');
});

Anda harus mengetik yeah di dalam bilah alamat. Maka Anda akan melihat sesuatu seperti ini:

Menekan tab akan menghasilkan tampilan seperti berikut:

Tentu saja menggunakan API chrome.omnibox, Anda bisa menangkap masukan pengguna dan bereaksi terhadap masukan itu.

API

Ada banyak hal berbeda yang dapat Anda lakukan di ekstensi Anda. Misalnya, Anda bisa mendapatkan akses ke bookmark atau riwayat pengguna. Anda bisa bergerak, membuat tab atau bahkan mengubah ukuran jendela utama. Saya sangat menyarankan untuk melihat dokumentasi untuk mendapatkan gagasan yang lebih baik tentang bagaimana menyelesaikan tugas-tugas ini.

Apa yang seharusnya Anda ketahui adalah tidak semua API tersedia di setiap bagian ekstensi Anda. Misalnya, content script Anda tidak dapat mengakses chrome.devtools.panel atau skrip di tab DeveloperTools Anda tidak dapat membaca DOM laman. Jadi, jika Anda bertanya-tanya mengapa ada sesuatu yang tidak beres, ini bisa jadi alasannya.

Perpersanan

Seperti yang saya sebutkan di atas, Anda tidak selalu memiliki akses ke API yang ingin Anda gunakan. Jika demikian, maka sebaiknya Anda menggunakan pesan lewat. Ada dua jenis pesan - one-time requests dan long-lived connections.

One-Time Requests

Jenis komunikasi ini hanya terjadi satu kali. Contoh. Anda mengirim pesan dan menunggu jawaban. Misalnya, Anda bisa menempatkan kode berikut di background script Anda:

chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
    switch(request.type) {
        case "dom-loaded":
            alert(request.data.myProperty);
        break;
    }
    return true;
});

Kemudian gunakan kode dari bawah dalam content script Anda:

window.addEventListener("load", function() {
    chrome.extension.sendMessage({
        type: "dom-loaded", 
        data: {
            myProperty: "value"
        }
    });
}, true);

Dan inilah bagaimana Anda bisa mendapatkan informasi tentang DOM halaman ini dan menggunakannya di dalam background script Anda, yang biasanya tidak memiliki akses ke data ini.

Long-Lived Connections

Gunakan jenis pesan ini jika Anda memerlukan saluran komunikasi yang terus-menerus. Di dalam content script Anda tempatkan kode berikut ini:

var port = chrome.runtime.connect({name: "my-channel"});
port.postMessage({myProperty: "value"});
port.onMessage.addListener(function(msg) {
    // do some stuff here
});

Dan kemudian di background script, gunakan ini:

chrome.runtime.onConnect.addListener(function(port) {
    if(port.name == "my-channel"){
        port.onMessage.addListener(function(msg) {
            // do some stuff here
        });
    }
});

Override Pages

Overriding pages adalah cara yang bagus untuk menyesuaikan peramban Anda. Anda juga bisa mengganti beberapa halaman bawaan di Chrome. Misalnya Anda bisa membuat halaman riwayat sendiri. Untuk melakukannya, tambahkan cuplikan kode berikut:

"chrome_url_overrides" : {
    "<page to override>;": "custom.html"
}

Nilai yang memungkinkan dari <page to override> adalah bookmarks, history, dan newtab. Ini cukup keren untuk memiliki halaman new tab yang baru.

Contoh Ekstensi

Untuk menyelesaikan artikel ini saya memutuskan untuk menyertakan contoh sederhana, sehingga Anda bisa mendapatkan pemahaman yang lebih baik tentang keseluruhan gambar. Contoh ekstensi ini menggunakan sebagian besar hal yang saya jelaskan di atas untuk sekedar menetapkan warna latar belakang #F00 untuk semua div di halaman saat ini. Jangan ragu untuk mengunduh kode sumber menggunakan tombol di bagian atas artikel ini.

Berkas Manifest

Tentu saja saya memulai dengan berkas manifest:

{
    "name": "BrowserExtension",
    "version": "0.0.1",
    "manifest_version": 2,
    "description" : "Description ...",
    "icons": { "16": "icons/16x16.png", "48": "icons/48x48.png", "128": "icons/128x128.png" },
    "omnibox": { "keyword" : "yeah" },
    "browser_action": {
        "default_icon": { "19": "icons/19x19.png", "38": "icons/38x38.png" },
        "default_title": "That's the tool tip",
        "default_popup": "browseraction/popup.html"
    },
    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },
    "chrome_url_overrides" : {
        "newtab": "newtab/newtab.html"
    },
    "content_scripts": [{
        "matches": ["http://*/*", "https://*/*"],
        "js": ["content.js"]
    }],
    "devtools_page": "devtools/devtools.html"
}

Perlu diingat bahwa Anda dapat mengatur berkas Anda ke dalam folder. Juga, perhatikan properti version. Anda harus memperbarui properti ini setiap kali Anda ingin mengunggah ekstensi ke toko web.

Background Script

// omnibox
chrome.omnibox.onInputChanged.addListener(function(text, suggest) {
    suggest([
      {content: "color-divs", description: "Make everything red"}
    ]);
});
chrome.omnibox.onInputEntered.addListener(function(text) {
    if(text == "color-divs") colorDivs();
});

// listening for an event / one-time requests
// coming from the popup
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
    switch(request.type) {
        case "color-divs":
            colorDivs();
        break;
    }
    return true;
});

// listening for an event / long-lived connections
// coming from devtools
chrome.extension.onConnect.addListener(function (port) {
    port.onMessage.addListener(function (message) {
        switch(port.name) {
            case "color-divs-port":
                colorDivs();
            break;
        }
    });
});

// send a message to the content script
var colorDivs = function() {
    chrome.tabs.getSelected(null, function(tab){
        chrome.tabs.sendMessage(tab.id, {type: "colors-div", color: "#F00"});
        // setting a badge
        chrome.browserAction.setBadgeText({text: "red!"});
    });
}

Beberapa baris pertama mendapatkan tindakan pengguna dari omnibox. Setelah itu, saya menetapkan one-time request listener, yang akan menerima pesan dari ikon browser action.

Potongan berikutnya adalah long-lived connection dengan tab devtools (tidak perlu menggunakan long-lived connection untuk hal ini, saya melakukannya hanya untuk tujuan pengajaran). Dengan menggunakan listener ini, saya bisa mendapatkan masukan dari pengguna dan mengirimkannya ke content script, yang memiliki akses ke elemen DOM. Intinya di sini adalah pertama pilih tab yang ingin saya manipulasi dan kemudian kirim pesan ke situ. Terakhir, saya meletakkan lencana pada ikon ekstensi.

Browser Action

Kita mulai dengan berkas popup.html kita:

// popup.html
<script type="text/javascript" src="popup.js"></script>
<div style="width:200px">
    <button id="button">Color all the divs</button>
</div>

Kemudian kita membuat berkas popup.js:

// popup.js
window.onload = function() {
    document.getElementById("button").onclick = function() {
        chrome.extension.sendMessage({
            type: "color-divs"
        });
    }
}

Pop-up berisi satu tombol dan sekali pengguna mengkliknya, ia akan mengirim pesan ke background script.

DeveloperTools

window.onload = function() {
    var port = chrome.extension.connect({ name: "color-divs-port" });
    document.getElementById("button").onclick = function() {
        port.postMessage({ type: "color-divs"});
    }
}

Untuk DeveloperTools, kita melakukan hal yang hampir sama seperti yang kita lakukan di pop-up, satu-satunya perbedaan adalah bahwa saya menggunakan koneksi lama.

Content Script

chrome.extension.onMessage.addListener(function(message, sender, sendResponse) {
    switch(message.type) {
        case "colors-div":
            var divs = document.querySelectorAll("div");
            if(divs.length === 0) {
                alert("There are no any divs in the page.");
            } else {
                for(var i=0; i<divs.length; i++) {
                    divs[i].style.backgroundColor = message.color;
                }
            }
        break;
    }
});

Content script mendengarkan pesan, memilih semua div pada halaman ini, dan mengubah warna latar belakangnya. Perhatikan obyek yang saya lampirkan pada listener. Di content script chrome.extension.onMessage.

Menyesuaikan Halaman New Tab

Hal terakhir yang dilakukan ekstensi ini adalah menyesuaikan halaman new tab. Kita bisa melakukannya dengan mudah hanya dengan mengarahkan properti newtab ke berkas newtab/newtab.html:

"chrome_url_overrides" : {
    "newtab": "newtab/newtab.html"
}

Ingatlah bahwa Anda tidak dapat membuat replika halaman bawaan new tab. Gagasan tentang fitur ini adalah menambahkan fungsionalitas yang berbeda secara total. Inilah yang dikatakan Google:

Jangan mencoba meniru halaman bawaan New Tab. API yang diperlukan untuk membuat versi modifikasi dari halaman bawaan New Tab - dengan halaman teratas, halaman yang baru ditutup, tip, gambar latar belakang tema, dan sebagainya - belum ada. Sampai mereka melakukannya, Anda lebih baik mencoba membuat sesuatu yang sama sekali berbeda.

Debugging

Menulis ekstensi untuk Google Chrome tidak selalu merupakan tugas yang mudah dan kemungkinan Anda akan mengalami beberapa masalah. Hal yang baik adalah Anda masih dapat menggunakan konsol untuk menampilkan variabel Anda untuk membantu debugging. Jangan ragu untuk menambahkan console.log ke dalam background atau content script. Namun ini tidak akan berfungsi dalam skrip yang dijalankan dalam konteks developer tools, sehingga Anda dapat mempertimbangkan untuk menggunakan metode alert, karena berfungsi di mana-mana.

Kesimpulan

Menurut pendapat saya, Chrome adalah salah satu peramban terbaik yang tersedia. Pengembang di Google membuat ekstensi yang mudah dibuat dengan mudah memberi kita kemampuan untuk membuatnya dalam HTML, CSS, dan JavaScript.

Ya, ada beberapa bagian yang rumit, tapi umumnya kita bisa menghasilkan plugin yang bernilai. Ingatlah bahwa artikel ini tidak mencakup segala hal yang berkaitan dengan pengembangan ekstensi. Ada beberapa hal berguna lainnya seperti menu konteks, halaman pilihan, dan notifikasi. Untuk topik yang tidak saya sampaikan, lihat dokumentasi untuk mendapatkan informasi lebih rinci.