คู่มือ: การสร้างส่วนขยายเบราว์เซอร์

Priya — คุณถามผมเมื่อสัปดาห์ที่แล้วว่าตัวติดตามราคาสินค้าที่คุณกำลังสร้างควรจะดึงข้อมูลจากหน้าสินค้าทุกนาที "เพื่อความปลอดภัย" หรือเปล่า ก่อนที่คุณจะสร้างแบบนั้น ให้ผมพาคุณไปดูภาพรวมทั้งหมดก่อน เพราะช่วงเวลาการดึงข้อมูลจริงๆ แล้วเป็นการตัดสินใจที่เล็กที่สุดในเรื่องนี้ และการทำให้โครงสร้างถูกต้องตั้งแต่แรกจะช่วยประหยัดรอบการรีวิวไปได้หนึ่งหรือสองรอบก่อนที่คุณจะเปิดตัว

เริ่มจากพรอมต์เอง คุณบอกผมว่า "ส่วนขยายที่คอยดูหน้านี้และบอกผมเมื่อราคาลดลง" ซึ่งเป็นไอเดียที่ดี แต่ยังไม่ใช่สเปก — ตัวสร้างต้องรู้ว่ามันทำงานเมื่อไหร่ ไม่ใช่แค่ทำอะไร ตัวติดตามของคุณเป็นรูปแบบทริกเกอร์ที่สามจากสามแบบ และควรรู้จักอีกสองแบบที่เหลือแม้คุณจะไม่ต้องใช้ก็ตาม เพราะรูปแบบนี้เองที่กำหนดสิทธิ์ที่ต้องใช้ และสิทธิ์นั้นก็กำหนดระยะเวลาการรีวิวของคุณ

• คลิกเพื่อทำงาน (Click-to-act) เป็นแบบที่ต้นทุนต่ำที่สุด: ป๊อปอัปที่ทำงานครั้งเดียวกับหน้าปัจจุบันเมื่อมีคนกดไอคอนบนทูลบาร์ — ลองนึกถึงแบบ "ดึงราคาทุกรายการบนหน้านี้มาทำเป็นลิสต์"
• สคริปต์เนื้อหาที่ทำงานตลอดเวลา (Always-on content script) ทำงานอัตโนมัติบนรูปแบบ URL ที่คุณกำหนด — เหมาะกับอะไรอย่างการไฮไลต์ชื่อคู่แข่งบนทุกหน้าภายใต้โดเมนหนึ่ง แต่คุณต้องระบุรูปแบบอย่างชัดเจน เพราะ "บนเว็บไซต์ภายในของเรา" มักจะถูกตีความให้แคบกว่าที่คุณตั้งใจไว้
• กรณีของคุณคือแบบที่สาม: ตัวเฝ้าดูที่ทำงานเบื้องหลัง (background watcher) ซึ่งสถานะจะคงอยู่ไม่ว่าแท็บจะเปิดอยู่หรือไม่ ทำงานบน service worker ภายใต้ MV3 และแสดงแบดจ์บนไอคอนเมื่อมีการเปลี่ยนแปลง

นี่คือรูปแบบเดียวที่ตัวสร้างควรถามคำถามกลับมาให้คุณ และมันจะทำแบบนั้น — เพราะตัวเลขการดึงข้อมูล (polling) เป็นการแลกเปลี่ยนที่มีความหมายจริง ไม่ใช่แค่พิธีการ

ซึ่งนำผมกลับมาที่สัญชาตญาณ "ทุกนาที" ของคุณ ผมเคยขอสร้างงานที่เกือบจะเหมือนของคุณเป๊ะเมื่อไม่นานมานี้ — เฝ้าดูหน้าเว็บ แสดงแบดจ์เมื่อราคาเปลี่ยน — และรอบแรกดึงข้อมูลทุก 60 วินาที ใช้งานได้ดีสำหรับคนเดียวที่ทดสอบในเครื่อง แต่พอคูณด้วยจำนวนคนที่ติดตั้งส่วนขยายนี้จริงๆ คุณก็กำลังยิงคำขอไปที่หน้าสินค้าของใครสักคนโดยไม่จำเป็น เพราะราคาบนรายการค้าปลีกทั่วไปไม่ได้เปลี่ยนบ่อยเกินกว่าไม่กี่ครั้งต่อวัน บอกตัวสร้างว่า "ตรวจสอบทุก 30 นาที" ในพรอมต์ นี่ไม่ใช่การประนีประนอม แต่เป็นคำขอที่ตรงไปตรงมากว่า — ไม่มีใครต้องการการแจ้งเตือนระดับต่ำกว่านาทีจากส่วนขยายเบราว์เซอร์ และคุณจะขอบคุณตัวเองในภายหลังที่ไม่ต้องอธิบายให้ผู้ตรวจสอบฟังว่าทำไมส่วนขยายของคุณถึงติดต่อกลับบ้าน 1,440 ครั้งต่อวัน

ส่วนที่คุณไม่ต้องคิดเลย

คุณเคยบอกว่ากังวลเรื่อง manifest — ไม่ต้องกังวลไปเลย นั่นคือสิ่งเดียวที่คุณไม่จำเป็นต้องแตะต้องจริงๆ ทั้งสองร้านค้าตอนนี้กำหนดให้ใช้ Manifest V3 แล้ว MV2 หยุดรับสำหรับรายการใหม่ และ Chrome กำลังทยอยปิดการใช้งานส่วนขยาย MV2 ที่ยังใช้งานอยู่อย่างต่อเนื่อง การเปลี่ยนแปลงหลักภายใต้ MV3 คือตรรกะเบื้องหลังของคุณจะทำงานเป็น service worker แทนที่จะเป็นหน้าเบื้องหลังที่คงอยู่ตลอด — มันจะเริ่มทำงานเมื่อมีอีเวนต์ เบราว์เซอร์สามารถหยุดมันระหว่างอีเวนต์ได้ และสถานะต้องผ่าน chrome.storage แทนที่จะแค่เก็บอยู่ในตัวแปร นี่คือรายละเอียดวงจรชีวิตที่ตัวสร้างเขียนได้ถูกต้องตามค่าเริ่มต้นอยู่แล้วพอดี คุณจะไม่มีวันได้เห็นไฟล์ manifest เลย เว้นแต่คุณจะไปหามันเอง

สิ่งที่คุณควรให้ความสนใจจริงๆ คือสิทธิ์ (permissions) เพราะนั่นคือสิ่งที่กำหนดว่าการรีวิวของคุณจะเร็วแค่ไหน ไม่ใช่ตัวโค้ด ตัวเฝ้าดูของคุณต้องการ alarms สำหรับการดึงข้อมูล และอาจจะต้องการ storage สำหรับการจำราคาล่าสุด — มันไม่จำเป็นต้องมี tabs หรือ <all_urls> และถ้าคุณขอ "ความสามารถในการใช้งานกับทุกไซต์ในอนาคต" เพราะอาจจะขยายฟีเจอร์ทีหลัง ตัวสร้างก็จะสร้างมาเพื่อรองรับสิ่งนั้น และคุณจะกลายเป็นคนที่ขอสิทธิ์เข้าถึงโฮสต์แบบกว้างสำหรับฟีเจอร์ที่ยังไม่มีอยู่จริง นั่นคือบรรทัดที่น่ากลัวที่สุดในกล่องโต้ตอบการติดตั้ง — "อ่านและเปลี่ยนแปลงข้อมูลในทุกเว็บไซต์ที่คุณเข้าชม" — และยังเป็นสิ่งที่ทำให้การตรวจสอบอัตโนมัติกลายเป็นการตรวจสอบด้วยตนเอง อธิบายสิ่งที่มันทำในวันนี้ ค่อยขยายทีหลังเมื่อคุณต้องการจริงๆ

มีอีกสองเรื่องที่ควรใช้เวลาสามสิบวินาทีพิจารณาก่อนที่จะบอกว่าเสร็จแล้ว: UI ของป๊อปอัปและไอคอน

• UI ของป๊อปอัป — หน้าตัวเลือกแบบดีฟอลต์ที่มีแต่ช่องติ๊กโล่งๆ ไม่มีลำดับชั้น เป็นสาเหตุจริงของรีวิวหนึ่งดาวที่ไม่เกี่ยวกับว่าส่วนขยายทำงานได้หรือไม่เลย ของคุณมีการตั้งค่าแค่ไม่กี่อย่าง (URL บางทีก็ช่วงเวลา) แต่ก็ควรดูเหมือนเป็นส่วนหนึ่งของผลิตภัณฑ์ ไม่ใช่แค่ฟอร์มที่ทิ้งไว้เฉยๆ
• ไอคอน — ตรวจสอบไอคอนให้ครบทั้งสี่ขนาดของ Chrome (16, 32, 48, 128 พิกเซล โดยมีชุดขนาดที่ต่างออกไปเล็กน้อยสำหรับ Firefox) เพราะโลโก้ที่คมชัดที่ 128 พิกเซลจะกลายเป็นภาพเบลอที่ 16 พิกเซล ซึ่งเป็นขนาดที่มันปรากฏอยู่ในทูลบาร์ที่แน่นไปด้วยไอคอนอื่นๆ ตลอดทั้งวัน

ก่อนที่คุณจะแตะต้องร้านค้าใดร้านค้าหนึ่ง

ทดสอบสิ่งนี้ของจริง ไม่ใช่แค่ในตัวอย่างของแชท สิ่งที่คุณได้จากการสร้างคือส่วนขยายที่โหลดใช้งานได้จริง ดังนั้นให้ไปที่ chrome://extensions เปิดโหมดนักพัฒนา เลือก "load unpacked" แล้วรันกับหน้าเว็บผลิตภัณฑ์จริงที่คุณสนใจ — ไม่ใช่เวอร์ชันจำลอง ผมจะตรวจสอบด้วยมือสองอย่างนี้โดยเฉพาะ: ข้อความขอสิทธิ์การติดตั้งตรงกับสิ่งที่คุณคาดหวังตามที่ขอไปหรือไม่ และจะเกิดอะไรขึ้นถ้า content script เจอหน้าที่ไม่ได้ถูกออกแบบมารองรับ — มันล้มเหลวอย่างเงียบๆ หรือแสดงข้อผิดพลาดที่มองเห็นได้ ทั้งสองอย่างใช้เวลาไม่ถึงนาที และเป็นบั๊กประเภทที่ชัดเจนทันทีที่มอง แต่มองไม่เห็นเลยถ้าไม่ตรวจ

เมื่อคุณพร้อมที่จะเปิดตัวจริงๆ คุณจะต้องใช้บัญชีนักพัฒนาของคุณเองบนทั้งสองร้านค้า — คุณเป็นเจ้าของรายการนั้น แพลตฟอร์มนี้ไม่ได้จัดการให้คุณ และผมอยากเตือนไว้ว่าทั้งสองร้านค้าไม่ได้มีความสมมาตรกันเลย เพราะผมไม่อยากให้คุณวางแผนวันเปิดตัวโดยคิดว่าทั้งสองจะเหมือนกัน

ชุดเครื่องมือสำหรับรายการที่สร้างขึ้นหลังจากการสร้างของคุณเสร็จสิ้นจะสร้างภาพหน้าจอที่ถ่ายจากส่วนขยายของคุณที่กำลังทำงานจริง (ไม่ใช่ภาพจำลอง) ข้อความรายละเอียด และคำตอบเรื่องแนวปฏิบัติด้านความเป็นส่วนตัวที่ตรวจสอบกับโค้ดจริงแทนที่จะกรอกจากความจำ ส่วนหลังนี้สำคัญกว่าที่ฟังดู สำหรับอะไรที่สื่อสารกับหน้าเว็บภายนอก: แบบสอบถามความเป็นส่วนตัวของ Chrome ถามคำถามใช่/ไม่ใช่แบบตรงไปตรงมาเกี่ยวกับการจัดการข้อมูล และการตอบ "ไม่" ต่อคำถาม "สิ่งนี้เก็บข้อมูลหรือไม่" ทั้งที่ตัวติดตามของคุณกำลังดึงข้อมูลและเก็บราคาอยู่ เป็นความไม่ซื่อสัตย์เล็กๆ ที่จะทำให้ส่วนขยายถูกถอดหลังเปิดตัว ไม่ใช่แค่ถูกปฏิเสธก่อนเปิดตัว การให้คำตอบถูกตรวจสอบกับสิ่งที่โค้ดทำจริงจะปิดช่องว่างนี้ให้คุณโดยอัตโนมัติ

เรื่องสุดท้าย เพราะผมรู้จักคุณดี — คุณคงกำลังคิดถึงการเพิ่ม "ซิงค์รายการเฝ้าดูของฉันข้ามอุปกรณ์" และ "ติดตามประวัติราคาตามช่วงเวลา" หลังจากเปิดตัวแล้ว นั่นก็ไม่เป็นไร แต่ควรรู้ไว้ว่าแต่ละอย่างนั้นคือสิทธิ์ใหม่ และสิทธิ์ใหม่อาจหมายถึงการรีวิวที่ช้ากว่าที่คุณเพิ่งผ่านมา ถ้าคุณมั่นใจว่าต้องการเวอร์ชันที่ใหญ่กว่านี้ การพรอมต์ขอมันตั้งแต่ตอนนี้แล้วรับการรีวิวที่ช้าครั้งเดียวจะดีกว่าจริงๆ มากกว่าค่อยๆ เพิ่มสิทธิ์ทีละอย่าง ถ้ายังไม่แน่ใจ ให้เปิดตัวสิ่งที่คุณมีอยู่ตอนนี้ — ตัวเฝ้าดูที่มีขอบเขตแคบชัดเจนจะผ่านเร็ว ทำให้คุณได้ผู้ใช้งานจริง และการใช้งานจริงมีค่ามากกว่ารายการฟีเจอร์ที่ยาวกว่าซึ่งค้างอยู่ในคิวของ Chrome ในตอนนี้ คุณสามารถขอเพิ่มทีหลังได้เสมอ แต่คุณเอาการเปิดตัวครั้งนี้กลับคืนมาไม่ได้ ถ้ามันติดอยู่ในการรีวิวแบบแมนนวลเพราะสิ่งที่คุณยังไม่จำเป็นต้องใช้