มาลองเขียน Chrome Extension ด้วย React กันเถอะ

วันนี้ก่อนนอนเปิด Chrome Browser คู่ใจขึ้นมา และทำเรื่องที่ทำประจำคือเปิด Chrome Extension ลูกรัก “EditThisCookie” มาเคลียร์ Cookie ก่อนใช้งาน

1_0hwLwa_3aG5is142fY1WQg

มีความรู้สึกว่าอยากลองทำ Extension ใช้เองบ้าง เลยลองหาข้อมูลดูว่าทำยังไงบ้าง สมัยก่อนเขียน Firefox Extension มันก็ยุ่งยากพอสมควร (หรืออาจจะเพราะตอนนั้นยังนูปอยู่) เพื่อให้สบายใจก็ดูจากของ Google เลย จาก Getting Started: Building a Chrome Extension อ่านเจอใน Paragraph แรกก็หยุดคิดทันที

Extensions allow you to add functionality to Chrome without diving deeply into native code. You can create new extensions for Chrome with those core technologies that you’re already familiar with from web development: HTML, CSS, and JavaScript. If you’ve ever built a web page, you should feel right at home with extensions pretty quickly; we’ll put that to the test right now by walking through the construction of a simple extension that will allow the user to change the background color of the current webpage.

ในเมื่อมันเป็น HTML/CSS/Js Stack งั้นก็เข้าทาง ลองยัดเอา React ที่เราใช้อยู่บ่อยๆ(เพราะโดนบังคับให้ใช้อยู่ตัวเดียวตอนนี้) มาทำ Chrome Extension เลยไหมล่า ว่าแล้วก็จัดการสร้าง React application ด้วย create-react-app chrome-extension-react โดยพลัน

เราก็จะได้ของที่จำเป็นทันทีภายใต้ Folder หน้าตาประมาณนี้

1_MvgVhWNP0mnqd55MfLTQKw

ทีนี้ของจำเป็นอย่างนึงสำหรับการที่ Chrome จะรู้จักกับ Chrome Extension ที่เราสร้างขึ้นมานี้ก็คือ Manaifest โดย Manifest ที่เราพูดถึงนี้จะอยู่ใน folder public ของ React App ที่เราสร้างมานี่เอง โดยปกติ manifest file ของ React ที่เราสร้างมานั้นก็จะหน้าตาประมาณนี้

1_X-32ly1rTiwgdD7tlnU7vg

แต่ว่าสำหรับ Chrome Extension แล้วต้องการ manifest file ที่แตกต่างกันออกไปนั้นก็คือ

1_NQ-M3l-ZUzNRKh-z2OaOGQ

สิ่งสำคัญที่จำเป็นต้องระบุก็คือ browser action ซึ่งจะบอกว่า icon ที่เราจะแสดงบน browser toolbar คืออันไหน และไฟล์ไหนคือไฟล์ที่จะแสดงผลเมื่อเรียกให้ Extension เปิดขึ้นทำงาน

อีกอันคือ permission ในตัวอย่างนี้เราจะขอ permission activeTab คือ แท็บของ Browser ที่ทำงานอยู่และ Storage นะครับ

สำหรับ attribute อื่นๆของ manifest นั้นอ่านเพิ่มเติมได้จากที่นี่ครับ -> https://developer.chrome.com/extensions/manifest

1_a2wCgMHbcIUGN_odGXqu9w

ทีนี้ เราก็น่าจะได้ manifest หน้าตาประมาณข้างบนนี้ เสร็จแล้วเราจะรอช้าอยู่ใย สั่ง build ด้วย default app หน้าตาบ้านๆนี่แหละนะครับ

yarn build

หลังจากนี้แล้ว เราก็สามารถเอา Extension ที่สร้างนี้มาติดตั้งบน Chrome ได้เลย โดยการนำไปติดตั้งแบบ Developer Mode ก็ทำได้ตามนี้เลยนะครับ อันดับแรกก็ต้องเปิดหน้าจอจัดการ Extension ก่อน

1_KgVcZ_LSzMey4-UlOmznJw

และอย่าลืมเลือก Developer Mode กันด้วยนะครับ

1_WNSppwcZYyQ7rQDL8-wsEg

จากนั้นเราก็ Install ได้ด้วย Load Unpacked extension โดยเลือก folder ของ output จาก build ของ React App นะครับ

1_O0I_66sZM0OyvjutamvC0g

เมื่อเราลองเปิด Toolbar ดูเราก็จะพบ Chrome Extension ที่เราสร้างด้วย React อยู่ตรงนั้น มันใช้ได้ด้วยแฮะ(คิดในใจ)

1_XsoKYxujfjLm_LQ-jL4cIg

ทีนี้ผมก็หายคาใจละ ไปนอนต่อได้อย่างสบายใจ สำหรับใครที่ค้างคา อยากจะ publish ต่อก็เชิญ consult this link ครับ => https://developer.chrome.com/webstore/publish

Happy Coding !!!