ඔබේ ම Chrome Extension එකක් හදාගන්නා හැටි

මේ වෙනකොට ලංකාවෙ බොහොම දෙනෙක් Android Apps හදන්න පෙළඹිලා තියෙන බව Play Store එකට ගියා ම පේනවා. ඕන එකයි එපා එකයි ඇති එකයි නැති එකයි අනේ ඉතින් මොකට කියනවද! කෝමහරි ඒකට සමාව දීලා Browser Extension හදන්නත් අපේ අය පොළඹවා ගත්තොත් හොඳයි කියලා හිතුනා. ළඟදි අපේ ඔපීසියට ආපු Project එකක අනු-කොටසක් විධියට Chrome Extension එකක් හදන්න තිබුණා. ඒකටත් එක්ක ම ඉතින් සිකුරාදා නිවාඩුත් තිබුණ එකේ මගේ පර්යේෂණාගාරෙට දාගෙන වැඩේ අධ්‍යයනේ කරා. ඒකෙන් තමයි මාත් වැඩේට බැස්සෙ.

HTML සහ JavaScript පිළිබඳ දැනීම අනුව ඔබට යා හැකි දුර / කළ හැකි උපරිම දේ තීරණය වෙනවා. හැබැයි අත්හදා බලන්න නම් ඕන කෙනෙකුට පුළුවන් වෙන විධියටත් ක්‍රමයක් කියන්නම්, පස්සෙ.

වැඩේ Rocket Science නම් නෙවෙයි. අවම වශයෙන් ඕන වෙන්නෙ, මුහුදෙ වැලියි, අහසෙ තරුයි, ඉබ්බෙක්ගෙන් පිහාටුයි, සුදු ඇපලුයි, වැරදි නොකළ අමාත්‍යවරයෙකුගෙ ෆයිල් එකකුයි, JSON file එකකුයි, ක්‍රියාත්මක කරන්න තව කාව්‍යාත්මක JS එකකුයි, විතරයි. සාර්ථක වෙන්න ඕනෙනම් (optional) ගෝලාකාර ග්‍රහලෝකෙක එහා කෙළවරේ ඉන්න පරිපූර්ණ යුවතියත් පිටිපස්සෙන් තියාගන්න හිටං. 😀

Android Appවල config.xml එක වගේ Extensionවල උප්පැන්නෙ තමයි manifest.json ගොනුව. ඒකෙ තමයි නම ගම ආගම තියෙන්නෙ. හැඳුනුම්පත කියන්න නම් බැහැ, ඒක වෙන ම කතාවක්.

කරන දේ පිළිවලකට ම කරමුකො නෙ? මුලින් ම හොඳ නමක් එක්ක Folder එකක් හදන්න. ඊට පස්සෙ ඒක ඇතුලෙ මෙන්න මේ විධියට manifest.json එකක් හදාගන්න:

{
  "name": "ඔන්න Chrome මම එනවා",
  "version": "1.0",
  "description": "හා පුරා කියලා හදන Extension එක",
  "browser_action": {
    "default_icon": "icon.png"
  }
}

මේක “manifest.json” කියලා ම යි save කරගන්න ඕනෙ. සුද්ද ඉංගිරීසියෙන් තියෙන නිසා name, version ටික තේරෙනවනෙ. ඔතන browser_action එක යටතෙ තියෙන default_icon එක තමයි දකුණු පැත්තෙ උඩ කෙළවරට ගොඩක් Extensionවල එන්නෙ. ඕක නොදැම්මොත් එතන පෙන්නන්නෙ නැහැ, ඒ කියන්නෙ background run වෙන user interactions නැති එකකදි ඒක වැදගත් වෙනවා නොදා ඉන්න එක. ඔතනට දාන icon එක විවිධ ප්‍රමාණවලට හරියන්න හදලා දාගන්නත් පුළුවන්. ටිකක් ගැඹුරට ගියොත්:

ඒකට මේ පෙනෙන විධියට වෙන ම icons කියලා ප්‍රමාණ දක්වන්න පුළුවන්. ඒ වගේ ම මෙතන browser_action එක යටතේ තියෙන default_title එකෙන් ToolTip එකට එන නමත්, default_popup එකෙන් icon එක click කළා ම එන pop-up එකත් හදා ගන්න පුළුවන්. ඔන්න එතෙන්දි HTML file එකකුත් අපේ වැඩේට එකතු වෙනවා. හැබැයි ඒක ඉතින් ඔබ කරන්න යන වැඩේට අනුව අවශ්‍යතාව තීරණය කරන්න. 🙂

ඒවත් එක්ක නැවතත් කෙටියෙන්:

{
  "name": "ඔන්න Chrome මම එනවා",
  "version": "1.0",
  "description": "හා පුරා කියලා හදන Extension එක",
  "browser_action": {
    "default_icon": "icon.png",
    "popup": "popup.html"
  }
}

එක සැරේට ම කියවපු ගමන් ටිකක් මඤ්ඤං වගේ වෙයි, සමහරවිට. ටිකක් නැවතිල්ලේ උඩ පින්තූරෙ JSON එක කියවන්න. එතකොට පොඩි වැටහීමක් ඇතිවෙයි, දවසක නිර්මාණයක් කරද්දි හොඳට ම වැටහේවි; ඕන්නම් ආයෙ මේ පැත්තෙ ඇවිත් මටත් බනීවි. 🙂

default_popup එකට දෙන path එකේ HTML එකත් හැදුවා ම මූලික වශයෙන් දැන් වැඩේ අවසන්. ඒ කිව්වෙ, Browser එකේ මුල්ලෙ ඉඳගෙන, ඒක ක්ලික් කළා ම popup එකකින් පණිවිඩයක් දෙන්න දැන් අපේ බබාට පුළුවන්. 😛

හැදුවට වැඩක් තියෙනවයි, මේක Install කරගන්න හැටි නොකියා?

Settingsවල වම් පැත්තෙ Extensions හෝ Navigation Bar එකේ chrome://extensions/ කියලා ගියාම Extensions ලැයිස්තුව එ්වි. එතන Developer Mode එකට හරි ලකුණ යෙදුවාම, Load unpacked extension… කියලා button එක පෙනෙයි. එතනින් browse කරන්න හෝ අපේ Folder එක Drag n’ Drop කරන්න.

එතකොට මේ විධියට අපි හදාගත්තු හැටියට Extension එක පෙන්නාවි.

කොහොමද නේ? 😀 මෙතනින් පස්සෙ JS/JSON file edit කරද්දි මතකැතුව Reload (Ctrl+R) කියන එක Click කරන්න. HTML වලට නම් ඕන නැහැ.

අර popup HTML එක ඇතුලෙ ඕනෑ ම විධියකට CSS import කරන්න, JS/jQuery දාගන්න ඔබට පුළුවන්. හැබැයි inline javascript ඒ කිව්වෙ <element onClick=”runFunction()” /> විධියට JS ලියන්න extensionවලදි අවසර නැහැ.

ඒ වගේ ම මේකට වැඩි වැඩ කෑලි දාද්දි Permissions ගන්න වෙනවා. මං කිව්වෙ, Androidවල වගේ ම යි.

"permissions": [
    "tabs",
    "http://*/*",
    "https://*/*"
  ]

ඔය “tabs” කියලා තියෙන්නෙ Tabs වලට වෙනස්කම් කරද්දි අවසර ගන්න විධිය. මම කරපු project එකේ එහෙමයි ඕනෙවුනේ, අළුත් Tab එකකදි එතන content එකක් පෙන්නන්නයි ඕන කළේ. ඒ වගේ ම තමන් access කරන URL type එක තමයි යටින් තියෙන්නෙ. ඒ පේළි දෙකෙන් ඕනෑ ම වෙබ් අඩවියක් සමග ගනුදෙනු කළ හැකියි. CDN වලින් jQuery එහෙම ගන්නවා නම් මතක ඇතුව එහෙම දාගන්න. හැබැයි ඔබ වැඩ කරන්නෙ ඔබේම එකක් සමග විතර නම්

"http://thambaru.com/*",

විධියට අවශ්‍ය domain එක විතරක් දාගන්නත් පුළුවන්. ඒ වගේ ම තමන් කරන දේ අනුව Clipboard R/W, Content Settings, Geo Location, History, Idle ආදී වශයෙන් වැඩේ හැටියට අවසර ඉල්ල ගන්න වෙනවා. මොකද Browser Security තියාගන්න නම් ඕන ඕන විධියට හඳපානෙ යන්න දීලා බෑනෙ 😛

"content_scripts": [
    {
      "js": [
        "src/inject/inject.js"
      ]
    }
  ]

ඉහත විධියට JS එකක් විතරක් අවශ්‍ය නම් දාගන්න. Chrome බ්‍රවුසරෙත් සිංහලෙන් ආපු කාලෙක:

  "default_locale": "si_LK",

වගේ දාගන්න ඕන වෙන්නත් ඉඩකඩ තියෙනවා. දැනට en කියලා යන්න.

ඔක්කො ම ඉවර වෙලා මේක Binary කරන්න ඕන. ඒ කියන්නෙ .crx විධියට save කරන්න ඕන. එතකොටයි Source එක close වෙලා ඕන කෙනෙකුට පාවිච්චර කරන්න පුළුවන් විධියට ready වෙන්නෙ. නැත්නම් හැමෝටම කියන්න එපැයි Developer mode On කරන්න කියලා. Extension List එකේ උඩ තිබුණ Pack Extension button එක මතකනෙ? අන්න එතෙන්ට අපේ Folder එක Browse කරලා දුන්නා ම *.crx විධියට compile වෙනවා. ආයි ඒක edit කරන්න permission File එකකුත් ලැබෙනවා. අන්න ඒ Crx එක තමයි ඔබ යාළුවන් එක්ක බෙදාගන්න ඕනෙ.

හරි එහෙනම්, කතාව ඔච්චරයි. 🙂

ඕවා හද හද ඉන්න කම්මැලි නම්, ඒ කිව්වෙ ඔයි ටික ගැන අවබෝධයක් ගත්තායින් පස්සෙ ඔය ජරමර කරන්න ඕන නැහැනෙ. අනික ලොකු අවබෝධයක් නැති කෙනෙක්ට වුණත් කරන හැටි කියන්න මම පොරොන්දු වුණානෙ. Wijesekaras pay debts වගේ කිව්වොත් කරනවා 😀 (Game Of Thrones)

ඉතින් ඔය ටික පහසුවෙන් කරගන්න Alex Wolkov අයියා පොඩි සුකුරුත්තමක් හදලා තියෙනවා.

http://extensionizr.com/ එකට ගිහින් තමන්ට ඕන විධියට වර්ගෙ තෝරලා, Background, Options page, Content Scripts, jQuery, Angular ඔක්කොමත් එක්ක Permissionනුත් තෝරලා ZIP එකක් බාගන්න පුළුවන් මූලික කොටස් එක්ක ම. කොහොමද වැඩේ! මේකත් Boiler Plate එකක්. ඉතින් අපිට තියෙන්නෙ බිත්තරේ කඩලා දාලා හදාගන්න විතරයි 🙂

කට්ටිය ම එහෙනං හොඳ හොඳ බිත්තර දාලා Chrome Web Store එකටත් දාලා මටත් Link එක එවන්න. 🙂 ලංකාවෙන් හොඳ දෙයක් බිහිවෙනවට මම බොහොම කැමතියි. හැබැයි පුතේ ඊට කලින් Readme.LK එකේ මම ළඟදි translate කරපු ලාකීය Apps මෙතරම් අවුල් සහගත ඇයි? කියවලා ඉන්න. කොච්චර වැඩ දන්නවා වුනත් වැඩකට නැති දේවල් කරන්න එපා. 😉

ප්‍රශ්ණ මොනවත් තිබුනොත් අහන්නත් පසුබට වෙන්න එපා.