มาทำ Chrome Extension กันดีกว่า

วันนี้เรามาเริ่ม การทำอะไรๆ สนุกด้วยการทำ Chorme Extension เผื่อจะทำให้มีไอเดียเพิ่มมากขึ้น

ขั้นเเรกนะครับเราต้องทำการศึกษาจากนี้เลย จาก google เลยนะครับ

สำคัญเลยนะเนี่ย จากพนั้นเราจะได้เรียนรู้เกี่ยวกับไฟล์ๆ หนึ่งครับ นั้นก็คือไฟล์

“ manifest.json “

ไอ้นี้มันสำคัญขนาดนั้นเลยหรออออออ

เราต้องเรียนรู้ Structure กันก่อนนะครับ

ทำไมมันเยอะขนาดนี้ล่ะ ฮ่าๆๆ

เเต่วันนี้ผมจะใช้เเค่นิดเดียวเเล้วกันนะครับ

โดยถ้าได้อ่านเเล้วน่าจะทำได้ วันนี้ลอง Hello World กันก่อนนะครับ

ลองมาสร้าง popup กันก่อนนะครับ โดยเริ่มจากการสร้างไฟล์ manifest.json

บรรทัดที่ 8 ถึง 10 นี่ถือว่าสำคัญมากนะครับ มันคือการทำ popup มาโชว์อยู่ตรงไปขวาบนของ chorme ครับ

อะๆๆๆ พอสร้างเสร็จเเล้ว

ให้ไปสร้างไฟล์ที่ชื่อ popup.html เเล้วลองพิมพ์ hello world . ดูนะครับ ง่ายๆ

เกือบลืมนะ “default_icon”: “logo.png” ให้ใช้งานเป็นไฟล์ png ครับ ผมลองใช้ .ico ใช้ไม่ได้ ฮ่าๆๆ

เราต้องไปทำการเปิด Extenstion เป็นโหมด DEV ก่อนนะครับ

เปิดโหมด Developer Mode เเล้วเลือก Load unpacked extensions

มาลองดูผลครับ

อ้าวววว เสร็จเเล้ว ถุยๆ ฮ่าๆๆ

จากนั้นผมจะโมไฟล์ manifest.json

ตามหลักไอ้เจ้านี่เลย

For pageToOverride, substitute one of the following:

  • bookmarks
  • history
  • newtab

ในบรรทัดที่เขียนว่า chorme_url_overrides ก็เดี๋ยวผมจะลอง “New tab ” ครับ

ยังมีเรื่องที่เราต้องรู้อีกนิดนึ่ง

ถือว่าเป็นการอนุญาตให้สามารถใช้งานอย่างเช่น CDNjs (เรื่องนี้ถือว่ายากพอสมควร อันนี้ผมไม่รู้นะครับ ขอศึกษาก่อน)

เมื่อผมเพิ่มไฟล์ผมก็จะลองโม code อีกนิดนึ่ง

ดังนี้ครับ


|-- Mypage.html
|-- css.css
|-- todo.js

จากนั้นเราทำการสร้างไฟล์เลยนะครับ ตามนี้เลย

ผมจะใช้ Angular เพื่อเป็น Framework หลักไปก่อนนะครับ (จริงๆ มี methods ของ google อารมณ์จะเป็น javascript เพียวๆ ครับ)

เดี๋ยวผมจะลองโม code ง่ายๆ ก่อนเลยนะครับ จากการเอา codepen.io มาโมจ้า

จากนั้นเอามาโมกับ Angular จ้า

จากนั้นมาดูผลกันนะครับ

ว้าววววว

เเค่เท่านี้เราก็สามารถสร้าง Chrome Extension ไว้ได้เเล้วครับ

ครั้งหน้าว่างๆๆ จะลองมาเเชร์ Chrome Extension ฝีมือเราเองได้นะครับบบบบบ

วันนี้มาเเค่นี้ละ บายยย เเจกัน