วิธีทำ Chrome Extension และอัพโหลดขึ้น Chrome Web Store

<h2>วิธีทำ Chrome Extension และอัพโหลดขึ้น Chrome Web Store<&sol;h2>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>วิธีทำ Chrome Extension และอัพโหลดขึ้น Chrome Web Store<&sol;strong><br &sol;>&NewLine;Google Chrome Extension คือส่วนเสริมเพิ่มความสามารถที่เฉพาะเจาะจงสำหรับโปรแกรมเว็บเบราว์เซอร์ยอดนิยมของ Google อย่าง Chrome เราสามารถพัฒนา extension หรือส่วนเสริมนี้สำหรับใช้งานเอง หรืออัพโหลดขึ้น Chrome web store สำหรับจำหน่ายหรือแจกจ่ายฟรี<&excl;--more--><&sol;p>&NewLine;<p><&sol;br><br &sol;>&NewLine;ในขั้นตอนของการพัฒนา chrome extension นั้น จะแยกเป็น 2 ส่วนหลัก ๆ คือ <&sol;p>&NewLine;<ul>&NewLine;<li><strong>1&period; Unpack Extension<&sol;strong> จะเป็นส่วนเสริมที่เราซึ่งเป็นผู้พัฒนาจะสามารถเปิดใช้งานได้บนเครื่องได้ทันที โดยไม่ได้อัพโหลดขึ้นไปเผยแพร่ใน Chrome web store<&sol;li>&NewLine;<li><strong>2&period; Pack Extension<&sol;strong> จะเป็นส่วนเสริมที่อัพโหลดขึ้นไปเผยแพร่บน Chrome web store และคนอื่นสามารถติดตั้งใช้งาน extension ที่เราพัฒนาได้ในทุก ๆ เครื่องคอมพิวเตอร์ที่ใช้ Chrome browser<&sol;li>&NewLine;<&sol;ul>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>เริ่มต้นสร้าง Google Chrome Extension<&sol;h4>&NewLine;<ul>&NewLine;<li><strong>1&period; สร้างโฟลเด้อ chrome&lowbar;hello&lowbar;extension<&sol;strong><br &sol;>&NewLine;จะเป็นโฟลเด้อสำหรับเก็บข้อมูลทั้งหมดของ extension ตัวอย่างเช่น ไฟล์ &period;json&comma; javascript และไฟล์รูปภาพ เป็นต้น<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<strong>โครงสร้างภายในโฟลเด้อจะประกอบไปด้วยไฟล์ &period;json &period;js และ icon รูปภาพ<&sol;strong><br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;วิธีทำ-chrome-extension-1&period;png" alt&equals;"วิธีทำ-chrome-extension" &sol;><br &sol;>&NewLine;<&sol;br>&NewLine;<&sol;li>&NewLine;<p> <&sol;br><&sol;p>&NewLine;<li>2&period; <strong>สร้างไฟล์ manifest&period;json<&sol;strong><br &sol;>&NewLine;manifest&period;json จะทำหน้าที่ในการกำหนดค่าพื้นฐาน ร้องขอ permission ตำแหน่งของไอคอนที่จะให้แสดง เรียกได้ว่าเป็นการกำหนดรายละเอียดต่าง ๆ ของส่วนเสริมที่เราจะพัฒนา<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<strong>ตัวอย่างไฟล์ manifest&period;json<&sol;strong><&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lbrace; &NewLine; "name"&colon; "Hello World&excl;"&comma; &NewLine; "description"&colon; "ทดสอบการสร้าง google chrome extension&period;"&comma; &NewLine; "version"&colon; "0&period;1"&comma; &NewLine; "manifest&lowbar;version"&colon; 2&comma; &NewLine; "app"&colon; &lbrace; &NewLine; "background"&colon; &lbrace; &NewLine; "scripts"&colon; &lbrack;"background&period;js"&rsqb; &NewLine; &rcub; &NewLine; &rcub;&comma; &NewLine; "icons"&colon; &lbrace; "16"&colon; "codebee-16x16&period;png"&comma; "128"&colon; "codebee-128x128&period;png" &rcub; &NewLine;&rcub;<&sol;pre>&NewLine;<&sol;li>&NewLine;<p><&sol;br><&sol;p>&NewLine;<li><strong>3&period; สร้างไฟล์ background&period;js<&sol;strong><br &sol;>&NewLine;จะเห็นว่าในไฟล์ manifest&period;json เราได้กำหนดให้มีการเรียกใช้งานไฟล์ background&period;js เพราะฉะนั้นเราจำเป็นจะต้องสร้างไฟล์ javascript เพื่อมารองรับการเขียนโค๊ดการทำงานหลักของ extension<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<strong>ตัวอย่างไฟล์ baackground&period;js<&sol;strong><&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " > &NewLine;chrome&period;app&period;runtime&period;onLaunched&period;addListener&lpar;function&lpar;&rpar; &lbrace; &NewLine; chrome&period;app&period;window&period;create&lpar;'window&period;html'&comma; &lbrace; &NewLine; 'outerBounds'&colon; &lbrace; &NewLine; 'width'&colon; 400&comma; &NewLine; 'height'&colon; 500 &NewLine; &rcub; &NewLine; &rcub;&rpar;&semi; &NewLine;&rcub;&rpar;&semi; &NewLine;<&sol;pre>&NewLine;<p>จากโค๊ดตัวอย่างด้านบนจะเป็นการกำหนดให้เปิดหน้าต่างเบราว์เซอร์ขนาด 400x600px ทันทีเมื่อมีการเปิดใช้งาน extension&NewLine;<&sol;li>&NewLine;<p><&sol;br><&sol;p>&NewLine;<li>4&period; <strong>สร้างรูปไอคอนสำหรับ Extension<&sol;strong><br &sol;>&NewLine;จะสังเกตุว่าในไฟล์ manifest&period;json เราได้กำหนดไอคอนไว้ 2 ขนาดคือ 16&&num;215&semi;16 และ 128&&num;215&semi;128<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >"icons"&colon; &lbrace; "16"&colon; "codebee-16x16&period;png"&comma; "128"&colon; "codebee-128x128&period;png" &rcub;<&sol;pre>&NewLine;<p>ให้สร้างไฟล์ &period;png ทั้ง 2 ขนาดและวางไฟล์ในโฟลเด้อ chrome&lowbar;hello&lowbar;extension เพียงเท่านี้ส่วนเสริมของเราก็พร้อมติดตั้งและใช้งานใน Google Chrome Browser แล้วครับ&NewLine;<&sol;li>&NewLine;<&sol;ul>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>การติดตั้งและใช้งาน<&sol;h4>&NewLine;<ul>&NewLine;<li><strong>ติดตั้งแบบ Unpacked Extension &lpar; ใช้งานบนเครื่อง &rpar;<&sol;strong><br &sol;>&NewLine;เปิด Google Chrome Browser และพิมพ์ <a href&equals;"chrome&colon;&sol;&sol;extensions&sol;" target&equals;"&lowbar;blank">chrome&colon;&sol;&sol;extensions&sol;<&sol;a> มองหาคำว่า <strong>Developer Mode<&sol;strong> ให้ติ๊กถูก จะปรากฏปุ่มเมนูชื่อว่า <strong>Load Unpacked Extension<&sol;strong> ให้คลิกและเลือกไปที่โฟลเด้อ chrome&lowbar;hello&lowbar;extension ที่เราได้สร้างไว้ในขั้นตอนก่อนหน้านี้ ถ้าไม่มีอะไรผิดพลาดส่วนเสริมของเราก็จะถูกติดตั้งเรียบร้อยแล้วให้รองทดสอบโดยการกดปุ่ม Launch<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;วิธีทำ-chrome-extension-5&period;png" alt&equals;"วิธีทำ-chrome-extension" &sol;><br &sol;>&NewLine;<&sol;br>&NewLine;<&sol;li>&NewLine;<li><strong>ติดตั้งแบบ Pack Extension &lpar; อัพโหลดขึ้น Chrome web store &rpar;<&sol;strong><br &sol;>&NewLine;เหมือนกันครับไปที่ <a href&equals;"chrome&colon;&sol;&sol;extensions&sol;" target&equals;"&lowbar;blank">chrome&colon;&sol;&sol;extensions&sol;<&sol;a> มองหาคำว่า <strong>Developer Mode<&sol;strong> ติ๊กถูก แต่คราวนี้ให้เลือกไปที่ Pack Extension จะปรากฏ popup ขึ้นมาให้เราใส่ข้อมูล 2 ช่อง คือ<br &sol;>&NewLine;<strong>Extension Root Directory<&sol;strong> ให้เราเลือกไปที่โฟลเด้อส่วนเสริมที่เราสร้างไว้คือ chrome&lowbar;hello&lowbar;extension<br &sol;>&NewLine;<strong>Private Key File<&sol;strong> สำหรับการสร้างส่วนเสริมครั้งแรกให้เราละไว้ ไม่ต้องเลือกอะไร<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;วิธีทำ-chrome-extension-6&period;png" alt&equals;"วิธีทำ-chrome-extension" &sol;><br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;หลังจากที่เราเลือกโฟลเด้อของส่วนเสริมเรียบร้อยแล้วให้กดปุ่ม Pack Extension ถ้าไม่มีอะไรผิดพลาด โปรแกรม chrome จะทำการ generate ไฟล์ 2 ไฟล์ให้เราคือ <strong>chrome&lowbar;hello&lowbar;extension&period;pem และ chrome&lowbar;hello&lowbar;extension&period;crx<&sol;strong> เพียงเท่านี้ extension ของเราก็พร้อมที่จะอัพโหลดขึ้น chrome web store แล้ว&NewLine;<&sol;li>&NewLine;<&sol;ul>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>การอัพโหลดขึ้น Chrome web store<&sol;h4>&NewLine;<p>วิธีการอัพโหลดขึ้น chrome web store ก็ไม่มีอะไรยุ่งยากครับ ให้เราทำการ rename ไฟล์ <strong>chrome&lowbar;hello&lowbar;extension&period;pem<&sol;strong> เปลี่ยนชื่อเป็น <strong>key&period;pem<&sol;strong> และนำไปวางไว้ในโฟลเด้อหลักชั้นแรกของส่วนเสริม จากนั้นให้ทำการ zip โฟลเด้อ และไปที่หน้าเว็บไซต์สำหรับอัพโหลดคือ <a href&equals;"https&colon;&sol;&sol;chrome&period;google&period;com&sol;webstore&sol;developer&sol;dashboard" target&equals;"&lowbar;blank">https&colon;&sol;&sol;chrome&period;google&period;com&sol;webstore&sol;developer&sol;dashboard<&sol;a><br &sol;>&NewLine;<strong>ส่วนไฟล์ &period;crx ไม่ต้องอัพโหลดขึ้นไปนะครับ<&sol;strong><br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2017&sol;03&sol;วิธีทำ-chrome-extension-8&period;png" alt&equals;"วิธีทำ-chrome-extension" &sol;><br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;หลังจากอัพโหลดเสร็จแล้ว จำเป็นจะต้องกรอกข้อมูลต่าง ๆ เช่น รายละเอียดคุณสมบัติของแอพ รูปภาพประกอบ ไอคอน ลิงค์วิธีการใช้งานใน youtube เป็นแอพฟรีหรือไม่ อนุญาติในประเทศอะไรบ้าง หลักการเดียวกันกับการอัพโหลดแอพพลิเคชั่นขึ้นไปบน Google Play Store ไม่ได้มีขั้นตอนยุ่งยากอะไร เพียงแต่ต้องกรอกข้อมูลเยอะพอสมควร หาก extension ผ่านการตรวจสอบเรียบร้อยแล้ว ก็จะสามารถใช้งานได้ทันที ใช้ระยะเวลาในการตรวจสอบประมาณ 24 ชั่วโมง<&sol;p>&NewLine;