เห้ย! เขียน Chrome Extension ไม่ได้ยากอย่างที่คิด พร้อมวิธี Publish

หลายคนที่เข้ามาอ่านอาจจะรู้อยู่แล้วว่า Chrome Extension คืออะไร แต่สำหรับคนที่ไม่รู้ Chrome Extension มันคือ โปรแกรมเสริมบน google chrome นั่นเองเป็นเหมือนตัวช่วยที่จะทำให้เราใช้งาน Web browser ได้ดียิ่งขึ้น ยกตัวอย่างเช่น Grammarly ก็จะช่วยตรวจสอบ gramma ของภาษาอังกฤษที่เราพิมพิ์ลงบนเว็บ ถ้าเกิดเจอคำที่พิมพ์ผิดหรือผิด gramma มันก็จะแจ้งเตือนพร้อมคำที่ควรแก้เลยทีเดียว สะดวกสบายจริงๆ

มาเข้าเรื่องกันดีกว่า วันนี้เราจะมาลองเขียน Chrome Extension ง่ายๆกัน! โดยโปรเจคที่เราจะทำกันก็คือ Email Generator นั่นเอง ถามว่าทำไมต้องโปรเจคนี้ เพราะว่าเวลาที่เราจะสมัคร User ใหม่เพื่อเทสอะไรบางอย่างในระบบ เราต้องใส่ email เองทุกครั้ง เช่น support+123@spree.com พอจะนึกภาพออกไหมครับ ถ้าจะสมัคร User ใหม่ก็ต้องใส่ทุกครั้ง ใหนจะต้องคิดอีกว่าจะใส่เลขข้างหลังอะไรดีจึงเกิดโปรเจคนี้ขึ้น

โครงสร้าง

เรามาทำความรู้จักกับโครงสร้างกันก่อน โดยโครงสร้างในการทำ Chrome extension เป็นประมาณนี้

• manifest.json
• Background script
• UI Element
• Content script
• Option page

manifest.json คือ ไฟล์หลักในการทำ Chrome Extension เลย เป็นตัวกำหนดชื่อ Extension, เวอร์ชั่น, ไฟล์แต่ละไฟล์ที่เราเขียนไม่ว่าจะเป็น background, popup, option page ก็ต้องกำหนดในนี้ทั้งหมด

Background script คือ ไฟล์ที่จะทำงานอยู่เบื้องหลังตลอดเวลา ตั้งแต่เราเปิดหน้าเว็บขึ้นมา

UI Element คือ ตัว Icon เล็กๆตรงมุมขวาบนของ Browser นั่นแหละ พอกดแล้วมันจะมี popup ขึ้นมา ส่วน UI ก็แล้วแต่เลยว่า extension นั้นๆจะโชวอะไรออกมา

Content script จะเป็นตัวอ่านหรือเขียนข้อมูลลงบนตัวหน้าเว็บที่เราเปิดอยู่

Option page แน่นอนตามชื่อเลย เป็น web page อีกอันนึงเลยที่เอาไว้ให้ปรับ option ของ extension นั้นๆได้เลย

มาเริ่มโปรเจคกันเลย

ขั้นตอนแรกเราก็สร้าง folder สำหรับ project ของเราขึ้นมา จากนั้น สร้างไฟล์ minifest.json ขึ้นมา

manifest.json

permissions: คือตัวกำหนดการเข้าถึงต่างๆ ว่าเราต้องการจะขอ permission อะไรจาก user บ้าง
browser_action: คือตัว popup ที่อยู่ตรง tab ของ chrome และเมื่อกดมันจะขึ้น popup ขึ้นมา จะประกอบไปด้วย default_popup ที่มี popup.html อยู่ และ default_icon ก็คือ icon ที่จะขึ้นบน tab นั่นเอง
background: ไฟล์ js ที่จะ run อยู่เบื้องหลังตลอดเวลา
commands: ถ้าเราต้องการกำหนด shortcut key ต้องมาใส่ในนี้ ซึ่งในที่นี้เราต้องการให้กด cmd+shift+U ได้นั้นเอง

หลังจากสร้างไฟล์ minifest.json มาแล้ว เราก็ลองไปสร้างปุ่มที่อยู่บน tabbar ของ chrome นั่นก็คือการสร้าง popup.html ไว้สำหรับแสดงผล และ popup.js สำหรับเขียน javascript ควบคุม

popup.html

popup.js

ในส่วนของ popup.html เราก็เขียน html ขึ้นมาเพื่อเป็น UI ของ popup ที่มี input ในการกรอก prefix subfix และ password เพื่อประกอบร่างเป็น email ขึ้นมา เพื่อที่จะเอาไปใช้ในการ generate email ขึ้นมา พวก design ก็แล้วแต่เลยว่าจะออกแบบยังไง ส่วนของผมนั้น หน้าตาประมาณนี้

Email Generator

ต่อมา การทำงานของ popup.js นั้น คือเราจะทำการดึงค่าจาก input ใน popup.html มาไว้ใน chrome storage ซึ่งเป็น storage ที่ google chrome อนุญาตให้เราได้เข้าไปใช้ แต่เราต้องขอ permission จาก user ก่อน ซึ่งถ้าคุณสังเกตุ จะเห็นว่าในไฟล์ manifest.json จะมี permission ชื่อ storage อยู่

โดย chrome.storage.sync.get คือการ get ค่าออกมาจาก storage ซึ่งแสดงว่า เมื่อเราเปิดหน้า popup ขึ้นมา มันก็จะได้ get ค่าใน storage ใส่ไว้ใน input ก่อนเลยถ้าไม่มีก็ให้เป็น string ว่างไว้

โซนต่อมาคือ “On value some input Change” ก็คือการ set ค่าเข้าไปใน storage โดยดัก onchange ของ input เมื่อ input มีการเปลี่ยนแปลง ก็จะเข้า function นี้ และใช้ chrome.storage.sync.set เพื่อ set ข้อมูลเข้า storage นั่นเอง

ในส่วนของ “Re-Check storage change” แค่เช็คค่าใน storage อีกรอบว่า data เข้าไปเก็บใน storage แล้วจริงๆนะ

Background

ขั้นต่อมาเลยก็คือการใช้ Shortcut Key นั่นเอง! โดย Google chrome ได้มี method ที่ที่ว่า “chrome.commands.onCommand” มาให้เราได้ใช้กัน โดย onCommand จะเป็น method ที่ callback ตัวแปรที่เราตั้งไว้ใน manifest.json ซึ่งมันจะเข้า method นี้ก็ต่อเมื่อเราทำการกด shortcut key ตามที่เรากำหนดไว้

จากใน code นะครับเรารับ callback จาก method onCommand แล้วเช็คว่า ถ้า command เท่ากับ change_input ให้เข้าไปทำ function ข้างในต่อครับ เดี๋ยวผมจะอธิบายไปแต่ละบรรทัดกันเลย!

บรรทัดที่ 2 : modifyDOM เข้ามาถึงก็สร้าง function กันก่อนเลย แล้วทำไมถึงต้องสร้างล่ะ เพราะเราต้องเอามันไปใช้ยังไงล่ะ แต่จะเอาไปใช้ยังไง เดี๋ยวได้รู้ครับ!

var emailElements = document.querySelectorAll(‘input[type=email]’);
var passwordElements = document.querySelectorAll(‘input[type=password]’);

บรรทัดที่ 5 และ 6: คือการเลือกกล่อง input บนหน้าเว็บเป้าหมาย โดย input ต้องมี type เป็น email และ password

let prefixData
let subfixData
let passwordData
chrome.storage.sync.get("prefix", function(result) {
   prefixData = result.prefix || "support+"
})
   
chrome.storage.sync.get("subfix", function(result) { 
   subfixData = result.subfix || "company.com"
})
chrome.storage.sync.get("password", function(result) {    
   passwordData = result.password || "myPassword1"
})

บรรทัดที่ 7–19: เป็นการใช้ method chrome.storage.sync.get เพื่อดึงค่าจาก storage ที่เรากับมาจากหน้า popup ของเราเพื่อนำมาใช้ generate email ของเรา

const event = new Event("change",{bubbles: true, cancelable: true})

บรรทัดที่ 20: ประกาศ event เอาไว้ใช้ dispatch event ของ input ครับ ที่ต้องใช้เพราะว่าเมื่อเรา set value ให้ input แล้ว แต่ค่าจะยังไม่เปลี่ยนจึงต้องทำการ dispatch event บางอย่างเสียก่อน

const getTime = new Date().getTime()

บรรทัดที่ 21: ประกาศ getTime เพื่อนำไปใช้เป็นค่า unique โดยค่าที่ได้จะเป็น timestamp

บรรทัดที่ 22–50: หลักๆใน function นี้ก็คือการ set value ให้กับ input ที่เรา select มา และเรียก dispatchEvent เพื่อให้ value ใน input เปลี่ยนแปลง ซึ่งใน code ผมได้มีการเช็ค path ว่าเป็น login หรือ signup ด้วย นั่นคือ ผมต้องการให้หน้า signup เป็นการ generate email ใหม่ แต่ในหน้า login จะใช้ email ที่ generate ล่าสุดสุดครับ

autoField();

บรรทัดที่ 52: เรียกใช้ function autoField เพื่อให้ function ทำงาน

chrome.tabs.executeScript({
    code: '(' + modifyDOM + ')();'
});

บรรทัดที่ 54–57: chrome.tabs.executeScript คือ method ในการ override script เข้าไปในหน้าเป้าหมาย โดยมีการนำ modifyDOM function ไปใช้ ซึ่งเมื่อเรา override เข้าไปแล้ว function จะทำงานทันทีทำให้ code ที่เราเขียน เกิดการทำงานในหน้านั้นๆ นั่นเอง!

Publish your cool extension

เมื่อคุณสร้าง Chrome Extension สุดเท่ของคุณเสร็จแล้ว คุณสามารถนำมันขึ้นไป publish ได้ที่ https://chrome.google.com/u/0/webstore/devconsole โดยมีค่าใช้จ่ายอยู่ที่ 5 เหรียญเท่านั้น! จ่ายครั้งเดียวตลอดชีพเลยนะเออ…

เมื่อเสียตังเรียบร้อย คุณก็จะเจอกับหน้า dashboard

ให้กด NEW ITEM หลังจากนั้นคุณจะเจอกับหน้าให้อัพโหลด ZIP… อ้อลืมบอกไปว่าจะต้องทำการ compress folder project ของเราด้วยนะเผื่อใครที่ยังไม่ทราบว่า compress ยังไง ก็คือ คลิกขวาที่ folder project ของเราแล้วกด compress ได้เลย

เราก็จะได้ไฟล์ ZIP ออกมาแล้วก็นำไป Upload ได้เลยย

พออัพโหลดเสร็จแล้ว จะโดนพาไปยังหน้า Detail ของ extension และสามารถ setting ค่าต่างๆได้ หลักๆที่ต้องทำคือใส่ Screen short หรือวิดีโอโปรโมทซักหน่อย

เมื่อ setting ทุกอย่างเสร็จแล้วยัง publish ไม่ได้ ลองกดที่ปุ่ม “WHY CAN’T I PUBLISH” ซึ่งจะบอกรายละเอียดต่างๆว่าทำไมเรายังถึง publish ไม่ได้ ให้แก้ตามที่เค้าบอก เป็น case by case ไปครับผม เพียงเท่านี้ เราก็จะสามารถ publish chrome extension สุดเจ๋งของเราให้คนอื่นได้ใช้เพิ่มความสะดวกสบายได้แล้ว!

Conclusion

เป็นยังไงกันบ้างครับ สำหรับการทำ chrome extension ไม่ยากเลยใช่ไหม คุณสามารถหาความรู้เพิ่มเติมได้ที่ Developer guide ของ google ได้เลยที่ https://developer.chrome.com/extensions/devguide และหากผิดพลาดประการใดก็ขออภัยมา ณ ที่นี้ด้วย แล้วเจอกันกับบทความหน้า สวัสดีครับ