ลดความซับซ้อนของการจัดรูปแบบหน้าปัจจุบันโดยคลิกไอคอนแถบเครื่องมือส่วนขยาย
ภาพรวม
บทแนะนำนี้จะสร้างส่วนขยายที่ทำให้การจัดรูปแบบส่วนขยาย Chrome และ หน้าเอกสารประกอบของ Chrome เว็บสโตร์เพื่อให้อ่านง่ายขึ้น
ในคู่มือนี้ เราจะอธิบายวิธีดำเนินการต่อไปนี้
- ใช้ Service Worker ของส่วนขยายเป็นผู้ประสานงานกิจกรรม
- รักษาความเป็นส่วนตัวของผู้ใช้ผ่านสิทธิ์
"activeTab"
- เรียกใช้โค้ดเมื่อผู้ใช้คลิกไอคอนแถบเครื่องมือส่วนขยาย
- แทรกและนำสไตล์ชีตออกโดยใช้ Scripting API
- ใช้แป้นพิมพ์ลัดเพื่อเรียกใช้โค้ด
ก่อนจะเริ่ม
คู่มือนี้จะถือว่าคุณมีประสบการณ์พื้นฐานในการพัฒนาเว็บ เราขอแนะนำให้ชำระเงิน Hello World เพื่อขอข้อมูลเบื้องต้นเกี่ยวกับเวิร์กโฟลว์การพัฒนาส่วนขยาย
สร้างส่วนขยาย
ในการเริ่มต้น ให้สร้างไดเรกทอรีใหม่ชื่อ focus-mode
ซึ่งจะเก็บไฟล์ของส่วนขยายไว้ หากคุณ
คุณสามารถดาวน์โหลดซอร์สโค้ดที่สมบูรณ์จาก GitHub ได้
ขั้นตอนที่ 1: เพิ่มข้อมูลส่วนขยายและไอคอน
สร้างไฟล์ชื่อ manifest.json
และใส่รหัสต่อไปนี้
{
"manifest_version": 3,
"name": "Focus Mode",
"description": "Enable focus mode on Chrome's official Extensions and Chrome Web Store documentation.",
"version": "1.0",
"icons": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
}
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับคีย์ไฟล์ Manifest เหล่านี้ ให้ดูที่ "เรียกใช้สคริปต์ในทุกแท็บ" ซึ่งอธิบายข้อมูลเมตาและไอคอนของส่วนขยายโดยละเอียด
สร้างโฟลเดอร์ images
แล้วดาวน์โหลดไอคอนลงในโฟลเดอร์นั้น
ขั้นตอนที่ 2: เริ่มต้นส่วนขยาย
ส่วนขยายสามารถตรวจสอบเหตุการณ์ของเบราว์เซอร์ในเบื้องหลังโดยใช้บริการของส่วนขยาย ผู้ปฏิบัติงาน Service Worker เป็นสภาพแวดล้อม JavaScript พิเศษที่จัดการ เหตุการณ์ต่างๆ และสิ้นสุดเมื่อไม่จำเป็นต้องใช้
เริ่มต้นโดยการลงทะเบียน Service Worker ในไฟล์ manifest.json
ดังนี้
{
...
"background": {
"service_worker": "background.js"
},
...
}
สร้างไฟล์ชื่อ background.js
และเพิ่มโค้ดต่อไปนี้
chrome.runtime.onInstalled.addListener(() => {
chrome.action.setBadgeText({
text: "OFF",
});
});
เหตุการณ์แรกที่ Service Worker ของเราจะคอยตรวจสอบคือ
runtime.onInstalled()
วิธีการนี้ช่วยให้ส่วนขยายตั้งค่าเริ่มต้น
สถานะหรือดำเนินการติดตั้งให้เสร็จสมบูรณ์ ส่วนขยายสามารถใช้ Storage API และ
IndexedDB เพื่อจัดเก็บสถานะของแอปพลิเคชัน อย่างไรก็ตาม ในกรณีนี้ เนื่องจากเราจัดการเพียง 2 สถานะ เราจะใช้ข้อความของป้ายการดำเนินการเองเพื่อติดตามว่าส่วนขยายนั้น "เปิด" หรือไม่ หรือ "ปิด"
ขั้นตอนที่ 3: เปิดใช้การทำงานของส่วนขยาย
การทำงานของส่วนขยายจะควบคุมไอคอนแถบเครื่องมือของส่วนขยาย ดังนั้นเมื่อใดก็ตามที่ผู้ใช้คลิกปุ่ม
ไอคอนส่วนขยาย โค้ดจะเรียกใช้โค้ดบางอย่าง (เหมือนในตัวอย่างนี้) หรือแสดงป๊อปอัป เพิ่ม
โค้ดต่อไปนี้เพื่อประกาศการทำงานของส่วนขยายในไฟล์ manifest.json
{
...
"action": {
"default_icon": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
},
...
}
ใช้สิทธิ์ activeTab เพื่อปกป้องความเป็นส่วนตัวของผู้ใช้
สิทธิ์ activeTab
ให้สิทธิ์ส่วนขยายเรียกใช้โค้ดชั่วคราว
บนแท็บที่ใช้งานอยู่ และยังอนุญาตให้เข้าถึงพร็อพเพอร์ตี้ที่มีความละเอียดอ่อนของ
แท็บปัจจุบัน
สิทธิ์นี้จะเปิดใช้เมื่อผู้ใช้เรียกใช้ส่วนขยาย ในกรณีนี้ ผู้ใช้เรียกใช้ โดยคลิกการทำงานของส่วนขยาย
💡 การโต้ตอบอื่นๆ ของผู้ใช้ใดบ้างที่เปิดใช้สิทธิ์ ActiveTab ในส่วนขยายของฉันเอง
- การกดแป้นพิมพ์ลัดที่กดร่วมกัน
- กำลังเลือกรายการเมนูตามบริบท
- กำลังยอมรับคำแนะนำจากแถบอเนกประสงค์
- กำลังเปิดป๊อปอัปส่วนขยาย
สิทธิ์ "activeTab"
ช่วยให้ผู้ใช้เลือกเรียกใช้ส่วนขยายตามวัตถุประสงค์ได้
แท็บที่โฟกัส ด้วยวิธีนี้ จึงเป็นการปกป้องความเป็นส่วนตัวของผู้ใช้ ประโยชน์อีกข้อหนึ่งคือ
เรียกให้แสดงคำเตือนเกี่ยวกับสิทธิ์
หากต้องการใช้สิทธิ์ "activeTab"
ให้เพิ่มสิทธิ์ลงในอาร์เรย์สิทธิ์ของไฟล์ Manifest ดังนี้
{
...
"permissions": ["activeTab"],
...
}
ขั้นตอนที่ 4: ติดตามสถานะของแท็บปัจจุบัน
หลังจากที่ผู้ใช้คลิกการทำงานของส่วนขยาย ส่วนขยายจะตรวจสอบว่า URL ตรงกับ
หน้าเอกสารประกอบ ถัดไป ระบบจะตรวจสอบสถานะของแท็บปัจจุบันและตั้งสถานะถัดไป เพิ่ม
รหัสต่อไปนี้ไปยัง background.js
:
const extensions = 'https://developer.chrome.com/docs/extensions';
const webstore = 'https://developer.chrome.com/docs/webstore';
chrome.action.onClicked.addListener(async (tab) => {
if (tab.url.startsWith(extensions) || tab.url.startsWith(webstore)) {
// Retrieve the action badge to check if the extension is 'ON' or 'OFF'
const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
// Next state will always be the opposite
const nextState = prevState === 'ON' ? 'OFF' : 'ON';
// Set the action badge to the next state
await chrome.action.setBadgeText({
tabId: tab.id,
text: nextState,
});
}
});
ขั้นตอนที่ 5: เพิ่มหรือนำสไตล์ชีตออก
ตอนนี้ถึงเวลาเปลี่ยนเลย์เอาต์ของหน้าแล้ว สร้างไฟล์ชื่อ focus-mode.css
และระบุ
รหัสต่อไปนี้:
* {
display: none !important;
}
html,
body,
*:has(article),
article,
article * {
display: revert !important;
}
[role='navigation'] {
display: none !important;
}
article {
margin: auto;
max-width: 700px;
}
แทรกหรือนำสไตล์ชีตออกโดยใช้ Scripting API เริ่มภายในวันที่
ประกาศสิทธิ์ "scripting"
ในไฟล์ Manifest
{
...
"permissions": ["activeTab", "scripting"],
...
}
สุดท้าย ใน background.js
ให้เพิ่มโค้ดต่อไปนี้เพื่อเปลี่ยนเลย์เอาต์ของหน้า
...
if (nextState === "ON") {
// Insert the CSS file when the user turns the extension on
await chrome.scripting.insertCSS({
files: ["focus-mode.css"],
target: { tabId: tab.id },
});
} else if (nextState === "OFF") {
// Remove the CSS file when the user turns the extension off
await chrome.scripting.removeCSS({
files: ["focus-mode.css"],
target: { tabId: tab.id },
});
}
}
});
💡 ฉันจะใช้ Scripting API เพื่อแทรกโค้ดแทนสไตล์ชีตได้ไหม
ได้ คุณใช้ scripting.executeScript()
เพื่อแทรก JavaScript ได้
ไม่บังคับ: กำหนดแป้นพิมพ์ลัด
เพิ่มทางลัดเพื่อให้เปิดหรือปิดโหมดโฟกัสได้ง่ายขึ้นเพื่อความสนุก เพิ่ม
"commands"
ไปยังไฟล์ Manifest
{
...
"commands": {
"_execute_action": {
"suggested_key": {
"default": "Ctrl+B",
"mac": "Command+B"
}
}
}
}
คีย์ "_execute_action"
เรียกใช้โค้ดเดียวกันกับเหตุการณ์ action.onClicked()
จึงไม่มีโค้ดเพิ่มเติม
ต้องใช้รหัส
ทดสอบว่าใช้งานได้
ยืนยันว่าโครงสร้างไฟล์ของโปรเจ็กต์มีลักษณะดังนี้
โหลดส่วนขยายในเครื่อง
หากต้องการโหลดส่วนขยายที่คลายการแพคข้อมูลในโหมดนักพัฒนาซอฟต์แวร์ ให้ทำตามขั้นตอนใน Hello World
ทดสอบส่วนขยายในหน้าเอกสารประกอบ
ก่อนอื่น ให้เปิดหน้าใดก็ได้ต่อไปนี้
จากนั้นคลิกการดำเนินการของส่วนขยาย หากคุณตั้งค่าแป้นพิมพ์ลัดไว้ คุณสามารถทดสอบได้โดยกด Ctrl + B
หรือ Cmd + B
ซึ่งควรเริ่มจาก
![ส่วนขยายโหมดโฟกัสปิดอยู่](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/scripts-activetab/image/focus-mode-extension-off-dc8f9326aa92b.png?authuser=9&hl=th)
โดยทำดังนี้
![ส่วนขยายของโหมดโฟกัสเปิดอยู่](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/scripts-activetab/image/focus-mode-extension-on-c248a59b498ea.png?authuser=9&hl=th)
🎯 เพิ่มประสิทธิภาพได้
พยายามทำตามข้อใดต่อไปนี้โดยอิงจากสิ่งที่ได้เรียนรู้ในวันนี้
- ปรับปรุงสไตล์ชีต CSS
- โปรดกำหนดแป้นพิมพ์ลัดอื่น
- เปลี่ยนเลย์เอาต์ของเว็บไซต์บล็อกหรือเว็บไซต์เอกสารที่คุณชื่นชอบ
สร้างชุมชนให้เติบโตไปเรื่อยๆ
ยินดีด้วยที่บทแนะนำนี้จบแล้ว 🎉 เพิ่มพูนทักษะของคุณอย่างต่อเนื่องโดยการพิชิตทักษะอื่นๆ บทแนะนำในซีรีส์นี้:
ส่วนขยาย | สิ่งที่คุณจะได้เรียนรู้ |
---|---|
เวลาในการอ่าน | เพื่อแทรกองค์ประกอบในหน้าเว็บชุดใดชุดหนึ่งโดยอัตโนมัติ |
ตัวจัดการแท็บ | เพื่อสร้างป๊อปอัปที่จัดการแท็บของเบราว์เซอร์ |
สำรวจต่อ
เราหวังว่าคุณจะสนุกกับการสร้างส่วนขยาย Chrome นี้ และตื่นเต้นที่จะได้ใช้ส่วนขยายของคุณต่อไป เพื่อพัฒนาเส้นทางการเรียนรู้ได้ เราขอแนะนำเส้นทางการเรียนรู้ต่อไปนี้
- คู่มือสำหรับนักพัฒนาซอฟต์แวร์มีลิงก์เพิ่มเติมอีกหลายสิบรายการไปยังเอกสารต่างๆ ที่เกี่ยวข้องกับการสร้างส่วนขยายขั้นสูง
- ส่วนขยายมีสิทธิ์เข้าถึง API ที่มีประสิทธิภาพมากกว่าที่มีในโอเพนเว็บ เอกสารประกอบของ Chrome API จะอธิบายเกี่ยวกับ API แต่ละรายการ