Pag-develop ng Google Chrome Extensions
Tagalog (Wikang Tagalog) translation by Anna Nelson (you can also view the original English article)
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_actio
n.
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.htm
l 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.