אין ספק שגוגל היא חממת הפיתוח המעניינת ביותר בתעשיה, אחד הפרוייקטים המרשימים ביותר שלה לטעמי הוא Chrome שהכניס בעיטה רצינית לתחום הדפדפנים שנשלט בעיקר ע"י Internet Explorer ו Firefox, אז חוץ מהעובדה שזו תוכנה נפלאה שתומכות ב HTML 5 בצורתו המלאה, ניתן להוסיף Extensions בצורה פשוטה שהופכת את הגלישה להרבה יותר מעניינת.
פיתוח Extension ב Chrome נעשה עם שפות לכתיבת אתרים כמו Html, JavaScript ו Css ולא נדרשת למידה של שפה חדשה בניגוד לשאר השחקנים שנעזרים בשפות כמו Bash ב Firefox או #C ב Internet Explorer, לא פחות חשוב שה Extension הוא Cross Platform כך שמערכת ההפעלה לא באמת לוקחת תפקיד, הפיתוח אפשרי בכל IDE לכתיבת אתרים וה Debug מתבצעת ע"ג הדפדפן עצמו.
Manifest File
בדומה לפיתוח ב Android גם פה יש קובץ הגדרות כללי שבו מצהירים על התוכן וההרשאות, המבנה בצורת JSON והוא הקובץ הראשון שנטען ע"י הדפדפן.
manifest.json
{
"name": "Extenstion Example",
"description": "Chrome Extenstion Example",
"manifest_version": 2,
"version": "1.0",
"permissions": [...],
"browser_action": {...},
"background": {...},
"content_scripts": [{...}]
}
Page Action\Browser Action
ניתן להגדיר את ה Extension ברמת דף ספציפי כלומר כאשר הדפדפן יכנס לאתר מסויים רק אז יטען ויופיע כחלק מה ה Address Bar או כאשר הדפדפן עצמו יטען ה Extension יעלה אוטומטית ויופעל על כל האתרים, לא ניתן לשלב בין 2 המצבים ולכן כדי להחליט כבר בהתחלה מה המצב המתאים ביותר ל Extension.
Page Action
manifest.json
{
"name": "Extenstion Example",
"description": "Chrome Extenstion Example",
"manifest_version": 2,
"version": "1.0",
"permissions": [
"tabs"
],
"page_action":{
"default_title": "This is Proxytype Blog!",
"default_icon": "fishluck.png"
},
"background":{"scripts":["background.js"]},
"icons":{
"48":"fishluck.png",
"128":"fishluck.png"
}
}
background.js
chrome.tabs.onUpdated.addListener(function (tabid, data, tab) {
if (tab.url.indexOf('proxytype.blogspot') > -1) {
chrome.pageAction.show(tabid);
}
});
ה Extension יופיע כחלק מה Address Bar.
Browser Action
manifest.json
"name": "Extenstion Example",
"description": "Chrome Extenstion Example",
"manifest_version": 2,
"version": "1.0",
"permissions": [
"tabs"
],
"browser_action":{
"default_title": "This is Proxytype Blog!",
"default_icon": "fishluck.png"
},
"icons":{
"48":"fishluck.png",
"128":"fishluck.png"
}
}
ה Extension יופיע מימין ל Address Bar ויהיה תקף לכל האתרים.
Popup
דף להצגת תוכן כאשר לוחצים על ה Extension.
manifest.json
"name": "Extenstion Example",
"description": "Chrome Extenstion Example",
"manifest_version": 2,
"version": "1.0",
"permissions": [
"tabs"
],
"browser_action":{
"default_title": "This is Proxytype Blog!",
"default_icon": "fishluck.png",
"default_popup": "popup.html"
},
"icons":{
"48":"fishluck.png",
"128":"fishluck.png"
}
}
popup.html
<html>
<head></head>
<body>
<div style="width:300px;height:200px;background-color:black">
<p style="font-family:Arial; font-size:14px; font-weight:bold;color:White;padding-top:10px; padding-left:10px">This is Example Popup</p>
<div style="text-align:center">
<img src="fishluck.png" width="100" height="100"/>
</div>
</div>
</body>
</html>
Options
דף שמכיל את האפשרויות של ה Extension.
manifest.json
"name": "Extenstion Example",
"description": "Chrome Extenstion Example",
"manifest_version": 2,
"version": "1.0",
"permissions": [
"tabs"
],
"options_page": "options.html",
"browser_action":{
"default_title": "This is Proxytype Blog!",
"default_icon": "fishluck.png",
"default_popup": "popup.html"
},
"icons":{
"48":"fishluck.png",
"128":"fishluck.png"
}
}
Background Script/Content Script
אפשר להגיד שהגענו לדבר האמיתי, הקוד של ה Javascript עושה את כל הקסם, וגם בו יש 2 מצבים אבל הפעם ניתן לשלב בניהם, Background Script נטען ללא דף Html ורץ ברקע של ה Extension ו Content Script רץ במקביל לדף ומאפשר לשנות את התוכן לאחר טעינה.
Background Script
manifest.json
"name": "Extenstion Example",
"description": "Chrome Extenstion Example",
"manifest_version": 2,
"version": "1.0",
"permissions": [
"tabs"
],
"options_page": "options.html",
"browser_action":{
"default_title": "This is Proxytype Blog!",
"default_icon": "fishluck.png",
"default_popup": "popup.html"
},
"background": {
"scripts": ["jquery.js","json.js","background.js"]
},
"icons":{
"48":"fishluck.png",
"128":"fishluck.png"
}
}
background.js
chrome.tabs.onUpdated.addListener(function (tabid, data, tab) {
console.log("this is a background script");
});
Content Script
mainfest.json
{
"name": "Extenstion Example",
"description": "Chrome Extenstion Example",
"manifest_version": 2,
"version": "1.0",
"permissions": [
"tabs",
"activeTab",
"http://*/*",
"https://*/*"
],
"options_page": "options.html",
"browser_action":{
"default_title": "This is Proxytype Blog!",
"default_icon": "fishluck.png",
"default_popup": "popup.html"
},
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["jquery.js","json.js","script.js"]
}],
"icons":{
"48":"fishluck.png",
"128":"fishluck.png"
}
}
script.js
$(document).ready(function () {
document.title = "Proxytype Take Over!";
document.body.innerHTML = "<html><head></head><body>Extension Denial Of Service For Fun!</body>";
});
Messages
קיימת חלוקה ברורה בין הקוד שמריץ הדף בדפדפן לבין הקוד שרץ לצורך הדוגמה ב Popup, ניתן להעביר מידע מתוכן הדף ל Extension בעזרת Messages, לדוגמה כל עוד ה Popup פתוח ישלח אליו כותרת העמוד.
manifest.json
"name": "Extenstion Example",
"description": "Chrome Extenstion Example",
"manifest_version": 2,
"version": "1.0",
"permissions": [
"tabs",
"activeTab",
"storage"
],
"options_page": "options.html",
"browser_action":{
"default_title": "This is Proxytype Blog!",
"default_icon": "fishluck.png",
"default_popup": "popup.html"
},
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["jquery.js","json.js","script.js"]
}],
"icons":{
"48":"fishluck.png",
"128":"fishluck.png"
}
}
popup.js
$(document).ready(function () {
var message = document.querySelector('#message');
chrome.runtime.onMessage.addListener(function (request, sender) {
if (request.action == "sendMessage") {
message.innerHTML = request.source;
}
});
});
script.js
function sendMessage() {
return document.title;
}
chrome.runtime.sendMessage({
action: "sendMessage",
source: sendMessage()
});
ניתן לחסוך המון כאבי ראש אם פשוט משתמשים ב Local Storage כ Shared Memory וכך ניתן לגשת ישירות למידע.
try {
list = JSON.parse(result.sharedMemory);
} catch (e) {
console.log(e);
}
});
chrome.storage.local.set({ 'sharedMemory': json_data });
Packaging
על מנת להתחיל פרויקט יש ליצור תיקייה ולהכניס לתוכה את הקבצים הדרושים, ללחוץ על תגית Extension ב Tools ולעבור למצב Developer, לצורך בדיקות ניתן לטעון את התיקייה ישירות:
בסיום הפיתוח ניתן לייצר חבילה שהיא קובץ Zip שמכיל את כל הקבצים בסיומת Crx, וקובץ Pem שהוא המפתח של Extension ששומרים בצד לצורך עדכונים עתידיים.
סיכום
עם היכולות של Html 5 אפשר לבצע כמעט כל פעולה במקרים נדירים נרצה להוסיף קבצי Native Code על מנת לקחת את ה Extension לקצה אבל את זה אני אשמור למאמר אחר בנושא, אין ספק ש Chrome הוא הדפדפן המתקדם ביותר כרגע בשוק, פשוט תענוג לעבוד איתו.
למידע נוסף:
תוספת משהו?...
