יום שבת, 29 במרץ 2014

Chrome Extensions Guide




אין ספק שגוגל היא חממת הפיתוח המעניינת ביותר בתעשיה, אחד הפרוייקטים המרשימים ביותר שלה לטעמי הוא 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 וכך ניתן לגשת ישירות למידע.

   chrome.storage.local.get('sharedMemory', function (result) {
        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 הוא הדפדפן המתקדם ביותר כרגע בשוק, פשוט תענוג לעבוד איתו.

למידע נוסף:


תוספת משהו?...

יום שבת, 8 במרץ 2014

Tamiya GearBox Kit




רובטיקה תמיד סקרנה אותי, אז אחרי הדרך הארוכה שעברתי עם Arduino החלטתי שהגיע הזמן לבנות את הרובוט הראשון של הבלוג, הנקודה הראשונה שהתרכזתי בה היא מערכת ההנעה והתחלתי לחפש באינטרנט, רציתי משהו זול שאפשר ללמוד ממנו ונזכרתי בחברת Tamiya היפנית שמאוד ותיקה בתחום המודלים ומכוניות על שלט רחוק האמת שבהתחלה לא חשבתי שאמצא אבל לאחר שוטטות בקטלוג שלהם הופתעתי לגלות מגוון רחב של ערכות שמתאימות לכל משימה.


לכל משימה!



Twin Motor GearBox

הערכה הפופלרית ביותר, עם 2 מנועים ומערכות גירים נפרדות, היא מאוד אוניברסלית וקיימים בה מספר מצבים לסוגי הנעה שונים, המערכת מורכבת מ 2 סטים של גלגלי שיניים שמגבירים את הכוח והמהירות לפלטפורמה וניתן להפעיל אותה עם בטריה 9 V.

בסביבות 10$ לערכה

קיימים 2 מצבים דומים כאשר ההבדל בניהם זה המיקום של הצירים, המצבים האלה מתאימים בעיקר להנעה קדמית \ אחורית במהירות גבוהה.




מצב מיוחד שמאפשר לשלוט על כל מערכת גירים בנפרד מוסיף כוח אבל פוגע במהירות.




סיכום

הערכות מאוד שימושיות וניתן ללמוד מהן המון, אני ממליץ לכל מי שרוצה לקופץ למים בעולם הרובוטיקה לרכוש ערכה כזאת ולהתחיל לשחק איתה, במהלך המאמרים הבאים נוסיף את הפלטפורמה, נבנה לוח שליטה יחד עם Arduino ,נשלב חיישנים ותקשורות ונצא לטייל במרחב.

בהצלחה...

יום שבת, 1 במרץ 2014

Merge Power Supplies




במקרה שרוצים לבנות מחשב מעבר לשימוש הסטנדרטי לדוגמא מחשב של גיימרים עם מספר כרטיסי מסך צריכים למצוא ספק מספיק חזק שיספק זרם עבור כל הכרטיסים וכאן המחיר מטפס (גם חשבון החשמל),ניתן לחבר מספר ספקים ביחד ולפצל אותם בין הרכיבים השונים כפי שנראה בהמשך,יש פה עניין חשוב של כסף, ספק 1000 W עולה מעל 1000 ש"ח בעוד שספק 600 W עולה בין 250 ל 450 ש"ח תלוי ביצרן.

ATX Power Supply Pinouts

שימו לב!

אזהרת התחשמלות - העבודה עם ספק כוח מסוכנת ועלולה לגרום להתחשמלות אני לא אחראי על כל נזק לרכוש או לנפש ראו הוזהרתם!

אז אחרי ההזהרות אפשר להתחיל, קודם חשוב להכיר את הספק כוח יש המון סוגים אבל הם מגיעים בסטנדרט אחד שנקרא (ATX (Advanced Technology eXtended שהומצא בשנת 1995 ע"י אינטל אבל גם זה כנראה הולך לעבור שינוי בקרוב, בספק יש מספר יציאות חשמל בעוצמות זרם שונות שהן חלק מהתקן ונקראות Molex, היציאה הראשונה היא ATX Connector שמתחברת ללוח אם וגורמת לעסק לעבוד, אפשר להשוות אותה בחשיבותה לאבי העורקים שבגופנו, החיבור עצמו מורכב מ 24 פינים כפי שניתן לראות בתמונה:



כאשר נחבר בין החיבור PS_ON לאחד ה (COM (GND נוצר קצר שמפעיל את הספק כוח, נוכל לדמות את זה בעזרת כבל נוסף או Relay.

זה מסוכן, אמרתי כבר?!

עוצמות הזרם בספק מאוד סטנדרטיות והם מחולקות לצבעים:

  • אדום - 5V
  • סגול - 5V STAND BY
  • צהוב - 12V
  • שחור - GND
  • ירוק - PS ON
  • כתום - 3.3V
  • אפור - POWER GOOD
  • כחול - 12V-
  • חום - 3.3V Sensing

Molex 4 pin connector הוא חיבור נפוץ ביותר הוא מורכב מ 4 חוטים:

  • אדום - 5V
  • צהוב - 12V
  • שחור - GND

זכר
הדרך הפשוטה ביותר להפעיל ספק כוח בעזרת ספק אחר היא לחתוך את הכבל הירוק וכבל שחור מה Atx Connector ולחבר חיבור Molex עם 4 פינים שמחברים לספק אחר.




Relay

ממסר זה מתג אנלוגי שבתוכו יושב סליל כשעובר בו זרם נוצר שדה מגנטי שמושך את המתג ומשנה את זרימת החשמל, מאוד דומה למתג של האור בבית רק אוטומטי, זה מנגנון יחסית פרמיטיבי אבל הוא אמין מאוד ושימושי במיוחד, דיברתי עליו בעבר במאמר Arduino Relay Shield.

2 $ ליחידה


מחברים את הספק כוח הראשון לרגליים של ה 5 V ו ה GND ב Relay ומחברים DIODE בניהם, בספק השני מחברים את הרגל PS_ON לרגל NO ורגל GND ל GND, ברגע שנפעיל את הספק הראשון אוטומטי הספק השני ידלק.



במקרה שיש לכם לוח ישן שאין בו שימוש אפשר למחזר את ה Atx Connector:

למחזר זה חשוב!
סיכום

הדגמתי 2 דרכים כיצד להפעיל ספק כוח ע"י ספק כוח אחר וכיצד לחסוך כסף במקרה שבונים מחשב מפלצתי שלא ניתן למצוא ספק מתאים שיזרים מתח לכל הרכיבים, ספקי כוח שימושים מעבר לעבודתם הטבעית במחשב וניתן להשתמש בהם גם בפרויקטים אחרים עם Arduino ו BeagleBone.

טובים השניים מהאחד...