Pag-develop ng Google Chrome Extensions 

Hindi lingid na ang paborito kong browser ay ang Google Chrome. Ito ay gusto ko dahil ito’y mabilis, maasahan, hindi ito nagka-crash (madalas), at maganda ang itsura. Mayroon din iba pang bagay kung saan ay aking natuklasan na mas mahalaga. Sa katunayan ay maari kang bumuo ng extension para dito gamit lamang ang HTML, CSS, at JavaScript. Palagi akong sumusuporta sa ganyang mga produkto, produkto na bukas para sa komunidad at nagkataon na ang Chrome ay isa sa mga produkto. Kung may kailangan ka at hindi pa ito naipatutupad, Malaya mo itong malilinang.

Kung kaya’t sa pagtatapos ng artikulong ito makikita mo ang gumaganang Chrome extension na ginagamit ang karamihan sa mga pamamaraan na ipinaliwanag sa ibaba. Maari mong i-download ang pinaka-huling halimbawa gamit ang download source code button sa pinaka-ibabaw ng pahinang ito.

Bakit Dapat Kang Magsulat ng Pansariling Extension

Palagi kong hinihimok ang mga tao na gumamit ng mas mahusay na mga tools para mapabilis ang kanilang daloy ng trabaho. Ang software na ating ginagamit ay dapat na makatulong sa atin, hindi dapat tayo makipagtalo rito. Paglilinang ng mga extensions/plugins para sa iyong paboritong editor o browser ay nakakatulong hindi lamang sa iyo, kundi pati na rin sa iba pang mga programmer, kung saan mapaagap o kinamamayaan ay makakadanas ng kaparehas na sitwasyon. Kung mayroon kulang, maari kang bumuo nito sa pamamagitan ng Chrome at ito ay talagang napakadali. Ang pagmolde sa iyong kapaligiran na humigit-kumulang sa iyong pangangailangan ay susi para maging mas produktibo.

Paglinang at Pagsubok ng Iyong Extensions

Laking pasasalamat at mayroon paraan upang masubukan ang iyong extension na hindi na kinakailangang i-upload ito sa Chrome’s web store. Sa iyong browser’s address bar, isulat lamang ang:

chrome://extensions

Siguruhing na-tsek mo ang Developer mode at i-click ang Load unpacked extension… button. Pagkatapos ay piliin lamang ang folder mula sa iyong hard disk na naglalaman ng extension’s files.

Arkitektura

Narito ang banghay ng arkitektura para sa Chrome extension:

At ngayon ay ating tignan mabuti ang bawat elemento na napapaloob sa akitektura.

Manifest

Ang entry point ng iyong extension ay ang manifest.json file. Ito ay dapat naglalaman ng wastong JSON object.  Halimbawa:

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

Ang kailangan mga properties ay name, version, at manifest_version. Ang version ay maaring kahit saanman mula isa hanggang apat, na integers na pinaghihiwalay ng tuldok. Ito ay isang bagay na ginagamit ng Google’s autoupdate system. Diyan nito nalalaman kung kailan i-uupdate ang iyong extension. Ang halaga ng manifest_version dapat ay ang integer na 2. 

Ang manipesto ay maaring maglaman ng iba pang mga properties depende sa kung anong klaseng extension ang iyong kailangan, ngunit ang aking tanging ilalarawan lamang ay ang mga nakikita kong mas interesante. 

Mga Pahina ng Background

Bawat extension ay may hindi nakikitang background na pahina kung saan ito ay pinapalabas ng browser. Mayroon itong dalawang klase – persistent background pages at event pages. Ang una ay aktibo, sa lahat ng oras. Ang ikalawa ay aktibo lamang kung kakailanganin. Hinihikayat ng mga developer ng Google na gamitin ang event pages, dahil sine-save nito ang memorya at pinapabuti ang kabuuang pagsasagawa ng browser. Gayunman, maganda rin naman na nalaman na dito rin ilalagay ang iyong pangunahing lohika at pagsisimula. Karaniwan ang background page/script ay gumaganap bilang tulay sa pagitan ng ibang mga parte ng extension.

Narito kung papaano mo dapat ilarawan ito sa manipesto:

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

Maaring gaya ng hula mo, Kung ang persistent property ay huwad samakatwid ang iyong ginagamit ay ang event pages. Kung hindi man, ikaw ay nagtatrabaho sa may persistent background page.

Content Script

Kung kailangan mo ng daan para makapunta sa kasalukuyang pahina ng DOM, kung gayon ay kailangan mong gumamit ng content script. Ang code ay pinatatakbo sa loob ng konteksto ng kasalukuyang web page, kung saan ang ibig sabihin ito ay maisasagawa sa bawat pag-refresh. Upang idagdag ang ganyan script, gamitin ang mga sumusunod na syntax.

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

Tandaan na ang halaga ng pagkakatugm ay tutukoy sa kung saan pahina ang iyong script ay gagamitin. Magbasa pa ng iba tungkol sa mga tugma na partisan dito.

User Interface 

Mayroon mga ilan paraan upang bumuo ng UI ng iyong extension. Narito ang mga apat na pinaka-tanyag.

Aksyon ng Browser

Karamihan sa mga developer ay gumagamit ng browser_action property upang bumuo ng kanilang plugins. Kapag nai-takda mo na, isang icon na kumakatawan ng iyong extension ang ilalagay sa kanan bahagi ng address bar. Ang mga Users ay maari nang i-click ang icon at buksan ang isang pop-up kung saan ito talaga ang HTML content na kontrolado mo.

Ang mga files ng manipesto ay dapat naglalaman ng mga sumusunod na datos:

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

Ang default_title ay isang maliit na tool tip kung saan nakikita ito kapag ang gumagamit ay itinatapat ang mouse sa ibabaw ng iyong icon. Ang default_popup ay ang tunay na HTML file kung saan ito ay naka-karga sa loob ng pop-up. Mayroon din isang badge kung saan ay maari mong ipaibabaw sa iyong icon. Maari mo itong gawin sa loob ng iyong background script.  Halimbawa:

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

Ito ang code na aking ginamit para magawa ang imahe sa itaas.

Aksyon ng Pahina

Ang page_action property ay katulad sa browser action, ngunit ang icon ay ipinakikita sa loob ng address bar:

Ang isang ineteresanteng bagay dito na ang iyong icon ay nakatago sa simula, kaya dapat kang magdesisyon kung kailan ito ipapakita.  Halimbawa, sa imahe na nasa ibabaw, ang RSS icon ay ipakikita lamang kung ang kasalukuyang pahina ay naglalaman ng link sa RSS feed. Kung kailangan mong makita ang iyong icon palagi, mas maganda kung gagamitin ng diretso ang browser_action.

Upang idagdag ang aksyon ng pahina, i-type ang mga sumususnod na code sa loob ng iyong manipesto:

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

Di gaya ng browser action’s icon, ang icon ng page action ay walang badges.

Ang DeveloperTools

Ginagamit ko ang DeveloperTools madalas at maganda na ang Chrome ay may alok na pamamaraan para magdagdag ng bagong tabs para sa mga tools na ito. Ang unang bagay na dapat gawin ay magdagdag ng HTML page kung saan ito ay pupunan kapag ang panel ay nagbukas na:

"devtools_page": "devtools.html"

Hindi na kailangan pang lagyan ng kahit anong HTML sa loob ng pahina, maliban lang para sa pag-link ng JavaScript file, kung saan ay lilikha ng tab:

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

At pagkatapos ay isama ang sumusunod na code sa loob ng devtools.js file:

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

    }
);

Ngayon ang nasa ibabaw na code ay magdadagdag ng bagong tab na may pangalan na TheNameOfYourExtension at kapag na-click mo ito ang browser ay mag-load ng index.html sa loob ng DeveloperTools.

Omnibox

Ang omnibox ay ang keyword kung saan ipinapakita sa loob ng Chrome's address bar. Halimbawa, kung magdagdag ka ng mga sumusunod na property sa iyong manipesto:

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

At pagkatapos ay idagdag ang code na nasa ilalim, sa loob ng iyong background script:

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 + '"');
});

Dapat magawa mong mag-type ng yeah sa loob ng address bar. Pagkatapos ay dapat may makita kang katulad nito:

Pagpindot sa tab ay magdudulot ng mga sumusunod na screen:

Siyempre gamit ang chrome.omnibox API, maari mong makuha ang user’s input at tumugon sa input na iyon.

APIs

Mayroon mga pangkat ng iba’t-ibang bagay na maari mong magawa sa iyong extension. Halimbawa, maari kang makakuha ng daan sa user’s bookmarks o kasaysayan. Maari mong igalaw, lumikha ng tabs o baguhin man ang sukat ng pangunahing window. Masidhi kong inirerekomenda na suriin ang dokumentasyon para makakuha ng mas mabuting ideya kung paano tapusin ang mga gawain na ito.

Ang dapat mong malaman ay hindi lahat ng APIs ay mayroon sa bawat parte ng iyong extension. Halimbawa, ang iyong content script ay hindi maaring mabuksan ang chrome.devtools.panels o ang script sa iyong DeveloperTools tab ay hindi mababasa ang pahinang DOM. Kaya, kung ikaw ay nagtataka kung bakit mayroon hindi gumagana, ito marahil ang dahilan.

Pag-mensahe

Gaya ng nabanggit ko sa itaas, wala ka palaging daan sa API na nais mong gamitin. Kung iyan ang kaso, dapat gamitin mo ay ang pagpasa ng mensahe. Mayroon dalawang klase ng pag-mensahe - one-time requests at long-lived connections.

One-Time Requests

Ang klase ng komunikasyon ay nagaganap isang beses lamang. Halimbawa iyan ay nagpadala ka ng mensahe at naghihintay ng sagot. Halimbawa, maari mong ilagay ang mga sumusunod na code sa iyong background script:

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

Pagkatapos ay gamitin ang code mula sa ilalim sa iyong content script:

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

At yan ay kung papaano ka makakakuha ng impormasyon tungkol sa kasalukuyang pahina ng DOM at gamitin ito sa loob ng iyong background script, kung saan karaniwan ay walang daan sa datos na ito.

Long-Lived Connections

Gamitin ang klaseng ito ng pag-mensahe kung kailangan mo ng walang puknat na tsanel ng komunikasyon. Sa loob ng iyong content script ilagay ang mga sumusunod na code:

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

At pagkatapos sa background script, gamitin ito:

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

Override Pages

Ang pag-override ng pahina ay isang mabuting paraan upang i-customize ang iyong browser. Maari mo rin palitan ang ibang default pages na nasa Chrome. Halimbawa maari kang lumikha ng sarili mong pahina ng kasaysayan. Para gawin iyon, idagdag ang mga sumusunod na code snippet:

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

Ang posibleng halaga ng <page to override> ay bookmarks, history, at newtab. Medyo napaka-cool ng dating na magkaroon ng new tab page.

Isang Halimbawa ng Extension

Sa pagtatapos ng artikulong ito napagdesisyunan ko na isama ang isang simpleng halimbawa, para makakuha ka ng mas mabuting kaalaman ng kabuuan. Itong halimbawa ng extension ay gumagamit ng karamihan ng mga bagay na aking nailarawan sa itaas na i-set lamang ang #F00 background color para sa lahat ng divs sa kasalukuyang pahina. Malaya mong mai-download ang source code gamit ang button sa pinakataas ng artikulong ito.

Ang File ng Manipesto

Syempre nagsimula ako sa file ng manipesto:

{
    "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"
}

Tandaan na maari mong ayusin ang iyong mga files sa folders. At saka, bigyang-pansin ang version property.  Dapat mong i-update ang property na ito sa tuwing gusto mong mag-upload ng iyong extension sa web store.

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!"});
    });
}

Ang naunang ilan mga linya ay nakuha ang user’s action mula sa omnibox. Pagkatapos yaon, nag-set ako ng one-time request na tagapakinig, kung saan ay tatanggap ng mensahe mula sa browser action icon.

Ang susunod na snippet ay ang long-lived connection na may devtools tab (hindi kinakailangan na gumamit ng long-lived connection para dito, ginawa ko lamang ito para sa pang-edukasyon na kadahilanan lamang). Gamit ang mga tagapakinig, nagawa kong makuha ang input mula sa user at ipadala ito sa content script, kung saan ay may daan sa mga elemento ng DOM. Ang pinaka punto dito ay piliin muna ang tab kung saan ay nais kong manipulahin at pagkatapos ay magpadala ng mensahe rito. Panghuli, naglagay ako ng badge sa extensions icon.

Browser Action

Nagsimula kami sa aming popup.html file:

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

Pagkatapos ay lumikha ng popup.js file:

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

Ang pop-up ay naglalaman ng isang button at kapag ang user ay nag-click rito, ito ay magpapadala ng mensahe sa 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"});
    }
}

Para sa DeveloperTools, tayo ay gumagawa ng halos kaparehas lamang gaya ng ginawa sa pop-up, ang pagkakaiba lamang ay gumamit ako ng long-lived connection.

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

Ang content script ay nakikinig para sa mensahe, pinili ang lahat ng mga divs sa kasalukuyang pahina, at pinalitan ang kanilang background color. Bigyang-pansin ang bagay kung saan ay inilakip ko ang tagapakinig. Sa content script iyan ay chrome.extension.onMessage.

Pag-customize ng New Tab Page

Ang huling bagay na maaring gawin ng extension na ito ay i-customize ang new tab page. Madali natin itong magagawa basta lang ituro ang newtab property sa newtab/newtab.html file:

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

Tandaan na hindi ka makakalikha ng kopya ng default new tab page. Ang ideya ng katangian na ito ay ang magdagdag ng lubos na kakaibang tungkulin.  Ito ang kung anong sinabi ng Google:

Huwag subukan tularan ang default New Tab page. Ang APIs ay kinakailangan lumikha ng bahagyang binagong bersyon ng default New Tab page —  na may Top pages, mga kamakailan lamang na sinaradong pahina, tips, isang tema na imahe sa background, at iba pa —  na hindi pa umiral. Hanggang sa nagawa nila, mas mabuting subukan mong gumawa ng anuman na ganap na kakaiba.

Debugging

Pagsulat ng extension para sa Google Chrome sa kadalasan ay hindi madaling gawain at marahil ay may mga pagdadaaanan kang mga problema. Ang kagandahan rito ay maari mo pa rin gamitin ang console para ilabas ang iyong variables para makatulong sa debugging. Malaya kang makapagdagdag ng console.log sa iyong background o content scripts. Gayunpaman ito ay hindi gagana sa scripts kung saan ay pinatatakbo ng context ng developer tools, sa kasong iyan maari mong ituring gamitin ang alert method, sapagkat ito ay gumagana kahit saan.

Konklusyon

Sa aking opinion, Ang Chrome ang isa sa pinakamagaling na browsers na magagamit. Ang mga developers sa Google ay nagagawang lumikha ng extensions na medyo madali sa pamamagitan ng pagbigay sa atin ng kakayahang likhain sila sa HTML, CSS, at JavaScript.

Oo, mayroon mga medyo nakakalitong mga parte, ngunit sa pangkaraniwan ay nagawa natin gumawa ng mahahalagang plugins. Tandaan na ang artikulong ito ay hindi tinatalakay ang lahat na may kaugnayan sa pag-develop ng Chrome extensions. Mayroon pang ibang kapaki-pakinabang na mga bagay gaya ng context menus, option pages, at notifications. Para sa mga paksa na hindi ko natalakay, Maari sanang sumangguni sa dokumentasyon para sa iba pang detalyadong impormasyon.