สร้างส่วนขยายเบราว์เซอร์ของคุณเอง: คู่มือทีละขั้นตอนพร้อมโปรเจกต์ตัวอย่าง

ในบทความนี้เราจะพูดถึงส่วนขยายเบราว์เซอร์ (Browser Extensions) – ว่ามันคืออะไร ทำงานอย่างไร และคุณสามารถสร้างของคุณเองได้อย่างไร

เราจะจบด้วยการเขียนส่วนขยายของเราเอง (Super Fun!) ซึ่งช่วยให้เราสามารถคัดลอกโค้ดสนิปเป็ต (code snippet) ไปยังคลิปบอร์ดได้ด้วยการคลิกปุ่มเพียงครั้งเดียว

เพื่อติดตามบทความนี้:

• คุณต้องมีความเข้าใจพื้นฐานเกี่ยวกับ JavaScript
• คุณต้องมีเบราว์เซอร์ Firefox (หรือเบราว์เซอร์อื่นก็ทำงานได้เช่นกัน)

ส่วนขยายเบราว์เซอร์คืออะไร?

ส่วนขยายเบราว์เซอร์คือสิ่งที่คุณเพิ่มเข้าไปในเบราว์เซอร์ ซึ่งปรับปรุงประสบการณ์การเล่นเว็บโดยการขยายความสามารถของเบราว์เซอร์

ตัวอย่างเช่น ตัวบล็อกโฆษณา (ad blocker) ที่คุณอาจติดตั้งไว้บนอุปกรณ์ นี่ทำให้ประสบการณ์การเล่นเว็บดีขึ้นโดยการบล็อกโฆษณาเมื่อคุณเซิร์ฟเว็บ

วิธีเขียนส่วนขยายเบราว์เซอร์พื้นฐานของคุณเอง

ตอนนี้มาเริ่มเขียนส่วนขยายพื้นฐานกันเลย

ขั้นแรก เราจะสร้างโฟลเดอร์ และภายในสร้างไฟล์ชื่อ manifest.json

Manifest file คืออะไร?

Manifest file เป็นไฟล์ที่จำเป็นในทุกส่วนขยายเบราว์เซอร์ ไฟล์นี้มีข้อมูลพื้นฐานเกี่ยวกับส่วนขยายของเรา เช่น ชื่อ เวอร์ชัน ฯลฯ

ตอนนี้ในไฟล์ manifest.json ให้คัดลอกโค้ดต่อไปนี้:

{ "manifest_version": 2, "version": "1.0", "name": "Test" }

วิธีโหลดไฟล์ส่วนขยาย

สำหรับผู้ใช้ Firefox ให้ทำตามขั้นตอนเหล่านี้:

ในแถบที่อยู่ ค้นหา:

about:debugging#/runtime/this-firefox

คุณจะเห็นตัวเลือก Load Temporary Add-on คลิกที่ตัวเลือกนั้นและเลือกไฟล์ manifest.json จากไดเรกทอรี

สำหรับผู้ใช้ Chrome:

ในแถบที่อยู่ ค้นหา:

chrome://extensions

• เปิดโหมดนักพัฒนา (Developer Mode) และสลับเข้าไป
• คลิกปุ่ม Load unpacked และเลือกไดเรกทอรีของส่วนขยาย

เย้! คุณติดตั้งส่วนขยายสำเร็จแล้ว แต่ส่วนขยายยังไม่ทำอะไรเลย ตอนนี้มาเพิ่มฟังก์ชันให้ส่วนขยายของเราโดยแก้ไขไฟล์ manifest.json ดังนี้:

{ "manifest_version": 2, "version": "1.0", "name": "Test", "content_scripts": [ { "matches": ["<all_urls>"], "js": ["main.js"] } ] }

ในโค้ดด้านบน เราเพิ่ม content script เข้าไปใน manifest.json Content scripts สามารถจัดการ Document Object Model ของหน้าเว็บได้ เราสามารถฉีด JS (และ CSS) เข้าไปในหน้าเว็บโดยใช้ content script

"matches" มีรายการโดเมนและซับโดเมนที่ content script ควรถูกเพิ่ม และ js เป็นอาร์เรย์ของไฟล์ JS ที่จะโหลด

ตอนนี้ในไดเรกทอรีเดียวกัน สร้างไฟล์ main.js และเพิ่มโค้ดต่อไปนี้:

alert("The test extension is up and running")

ตอนนี้โหลดส่วนขยายใหม่ และเมื่อคุณเข้าชม URLs ใดๆ คุณจะเห็นข้อความแจ้งเตือน

อย่าลืมโหลดส่วนขยายใหม่ทุกครั้งที่คุณแก้ไขโค้ด

วิธีปรับแต่งส่วนขยายเบราว์เซอร์ของคุณ

ตอนนี้มาเพิ่มความสนุกให้กับส่วนขยายของเรา

สิ่งที่เราจะทำคือ สร้างส่วนขยายเว็บที่เปลี่ยนรูปภาพทั้งหมดของหน้าเว็บที่เราเข้าไปเป็นรูปภาพที่เราเลือก

สำหรับเรื่องนี้ ให้เพิ่มรูปภาพใดๆ เข้าไปในไดเรกทอรีปัจจุบัน และเปลี่ยนไฟล์ main.js เป็น:

console.log("The extension is up and running"); var images = document.getElementsByTagName('img'); for (elt of images) { elt.src = `${browser.runtime.getURL("pp.jpg")}`; elt.alt = 'an alt text'; }

มาดูว่ากำลังเกิดอะไรขึ้น:

var images = document.getElementsByTagName('img')

บรรทัดนี้เลือกทุกองค์ประกอบในหน้าเว็บที่มีแท็ก img

จากนั้นเราวนลูปผ่านอาร์เรย์ images โดยใช้ for loop ซึ่งเราเปลี่ยนแอตทริบิวต์ src ของทุกองค์ประกอบ img เป็น URL ด้วยความช่วยเหลือของฟังก์ชัน runtime.getURL

pp.jpg ในที่นี้คือชื่อไฟล์รูปภาพในไดเรกทอรีปัจจุบันบนอุปกรณ์ของผม

เราต้องแจ้ง content script ของเราเกี่ยวกับไฟล์ pp.jpg โดยแก้ไขไฟล์ manifest.json เป็น:

{ "manifest_version": 2, "version": "1.0", "name": "Test", "content_scripts": [ { "matches": ["<all_urls>"], "js": ["main.js"] } ], "web_accessible_resources": [ "pp.jpg" ] }

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

วิธีเพิ่มไอคอนให้ส่วนขยายของคุณ

เพิ่มโค้ดต่อไปนี้ในไฟล์ manifest.json:

"icons": { "48": "icon-48.png", "96": "icon-96.png" }

วิธีเพิ่มปุ่มแถบเครื่องมือให้ส่วนขยายของคุณ

ตอนนี้เราจะเพิ่มปุ่มที่ตั้งอยู่ในแถบเครื่องมือของเบราว์เซอร์ ผู้ใช้สามารถโต้ตอบกับส่วนขยายโดยใช้ปุ่มนี้

เพื่อเพิ่มปุ่มแถบเครื่องมือ ให้เพิ่มบรรทัดต่อไปนี้ในไฟล์ manifest.json:

"browser_action": { "default_icon": { "19": "icon-19.png", "38": "icon-38.png" } }

ไฟล์รูปภาพทั้งหมดควรอยู่ในไดเรกทอรีปัจจุบันของคุณ

ตอนนี้ หากเราโหลดส่วนขยายใหม่ เราควรจะเห็นไอคอนของส่วนขยายในแถบเครื่องมือของเบราว์เซอร์

วิธีเพิ่มเหตุการณ์ฟังสำหรับปุ่มแถบเครื่องมือ

อาจจะเราต้องการทำบางอย่างเมื่อผู้ใช้คลิกปุ่ม – สมมติว่าเราต้องการเปิดแท็บใหม่ทุกครั้งที่ปุ่มถูกคลิก

สำหรับเรื่องนี้ เราจะเพิ่มต่อไปนี้ในไฟล์ manifest.json:

"background": { "scripts": ["background.js"] }, "permissions": [ "tabs" ]

จากนั้นเราจะสร้างไฟล์ใหม่ชื่อ background.js ในไดเรกทอรีทำงานปัจจุบัน และเพิ่มบรรทัดต่อไปนี้ในไฟล์:

function openTab() { var newTab = browser.tabs.create({ url: 'https://twitter.com/abhilekh_gautam', active: true }); } browser.browserAction.onClicked.addListener(openTab);

ตอนนี้โหลดส่วนขยายใหม่!

ทุกครั้งที่ใครคลิกปุ่ม มันจะเรียกฟังก์ชัน openTab ซึ่งจะเปิดแท็บใหม่ด้วย URL ที่ลิงก์ไปยังโปรไฟล์ Twitter ของผม นอกจากนี้ คีย์ active เมื่อตั้งค่าเป็น true จะทำให้แท็บที่สร้างใหม่กลายเป็นแท็บปัจจุบัน

โปรดทราบว่าคุณสามารถใช้ API ที่เบราว์เซอร์จัดเตรียมไว้ใน background script สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ API โปรดอ้างอิงบทความ: JavaScript APIs

ตอนนี้เราได้เรียนรู้พื้นฐานของส่วนขยายเบราว์เซอร์บางส่วนแล้ว มาสร้างส่วนขยายที่เราในฐานะนักพัฒนาสามารถใช้ในชีวิตประจำวันได้

โปรเจกต์สุดท้าย

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

демо

ขั้นแรกเราจะสร้างโฟลเดอร์/ไดเรกทอรีใหม่ ภายในนั้นเราจะเพิ่มไฟล์ manifest.json

เพิ่มโค้ดต่อไปนี้ในไฟล์:

{ "manifest_version": 2, "version": "1.0", "name": "copy code", "content_scripts": [ { "matches": ["*://*.stackoverflow.com/*"], "js": ["main.js"] } ] }

ดูที่ matches ภายใน content script – ส่วนขยายจะทำงานเฉพาะโดเมนและซับโดเมนของ StackOverflow เท่านั้น

ตอนนี้สร้างไฟล์ JavaScript อีกไฟล์หนึ่งชื่อ main.js ในไดเรกทอรีเดียวกัน และเพิ่มบรรทัดโค้ดต่อไปนี้:

var arr = document.getElementsByClassName("s-code-block"); for (let i = 0; i < arr.length; i++) { var btn = document.createElement("button"); btn.classList.add("copy_code_button"); btn.appendChild(document.createTextNode("Copy")); arr[i].appendChild(btn); // styling the button btn.style.position = "relative"; if (arr[i].scrollWidth === arr[i].offsetWidth && arr[i].scrollHeight === arr[i].offsetHeight) btn.style.left = `${arr[i].offsetWidth - 70}px`; else if (arr[i].scrollWidth != arr[i].offsetWidth && arr[i].scrollHeight === arr[i].offsetWidth) btn.style.left = `${arr[i].offsetWidth - 200}px`; else btn.style.left = `${arr[i].offsetWidth - 150}px`; if (arr[i].scrollHeight === arr[i].offsetHeight) btn.style.bottom = `${arr[i].offsetHeight - 50}px`; else btn.style.bottom = `${arr[i].scrollHeight - 50}px`; // end of styling the button console.log("Appended"); }

ก่อนอื่น ผมเลือกทุกองค์ประกอบที่มีชื่อคลาส s-code-block – แต่ทำไม? เพราะเมื่อผมตรวจสอบเว็บไซต์ StackOverflow ผมพบว่าสนิปเป็ตโค้ดทั้งหมดถูกเก็บไว้ในคลาสที่มีชื่อนั้น

จากนั้นเราวนลูปผ่านองค์ประกอบทั้งหมดเหล่านั้นและเพิ่มปุ่มเข้าไปในองค์ประกอบเหล่านั้น สุดท้ายเราเพียงแค่จัดตำแหน่งและจัดสไตล์ปุ่มให้เหมาะสม (การจัดสไตล์ยังไม่สมบูรณ์ – นี่แค่จุดเริ่มต้น)

เมื่อเราโหลดส่วนขยายโดยใช้กระบวนการที่เราผ่านมาด้านบนและเข้าชม StackOverflow เราควรจะเห็นปุ่ม copy

วิธีเพิ่มฟังก์ชันให้ปุ่ม

ตอนนี้ เมื่อปุ่มถูกคลิก เราต้องการให้สนิปเป็ตทั้งหมดถูกคัดลอกไปยังคลิปบอร์ดของเรา เพื่อทำเช่นนี้ ให้เพิ่มบรรทัดโค้ดต่อไปนี้ในไฟล์ main.js:

var button = document.querySelectorAll(".copy_code_button"); button.forEach((elm) => { elm.addEventListener('click', (e) => { navigator.clipboard.writeText(elm.parentNode.childNodes[0].innerText); alert("Copied to Clipboard"); }); });

ก่อนอื่น เราเลือกปุ่มทั้งหมดที่เราเพิ่มเข้าไปในเว็บไซต์โดยใช้ querySelectorAll จากนั้นเราฟังเหตุการณ์ click ทุกครั้งที่ปุ่มถูกคลิก

navigator.clipboard.writeText(elm.parentNode.childNodes[0].innerText)

บรรทัดโค้ดด้านบนคัดลอกโค้ดไปยังคลิปบอร์ดของเรา ทุกครั้งที่มีการคัดลอกสนิปเป็ต เราจะแจ้งเตือนผู้ใช้ด้วยข้อความ Copied to clipboard และเราเสร็จสิ้นแล้ว

คำสรุป

Web Extensions สามารถเป็นประโยชน์ได้หลายทาง และผมหวังว่าด้วยความช่วยเหลือของบทความนี้ คุณจะสามารถเขียนส่วนขยายของคุณเองได้

โค้ดทั้งหมดสามารถหาได้ใน GitHub repository นี้ อย่าลืมส่ง pull request ทุกครั้งที่คุณมีการจัดสไตล์ที่ดีหรือฟีเจอร์ใหม่เช่นประวัติคลิปบอร์ดและอื่นๆ

Happy Coding!