แทรกสคริปต์ลงในแท็บที่ใช้งานอยู่

ลดความซับซ้อนของการจัดรูปแบบของหน้าปัจจุบันโดยคลิกไอคอนแถบเครื่องมือส่วนขยาย

ภาพรวม

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

ในคู่มือนี้ เราจะอธิบายวิธีทําสิ่งต่อไปนี้

• ใช้เจ้าหน้าที่ฝ่ายบริการของส่วนขยายเป็นผู้ประสานงานกิจกรรม
• รักษาความเป็นส่วนตัวของผู้ใช้ผ่านสิทธิ์ "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 เหล่านี้ได้ในบทแนะนำ "เรียกใช้สคริปต์ในทุกแท็บ" ซึ่งอธิบายmetadataและไอคอนของส่วนขยายโดยละเอียด

สร้างโฟลเดอร์ images แล้วดาวน์โหลดไอคอนลงในโฟลเดอร์

ขั้นตอนที่ 2: เริ่มต้นส่วนขยาย

ส่วนขยายสามารถตรวจสอบเหตุการณ์ในเบราว์เซอร์ในเบื้องหลังได้โดยใช้ Service Worker ของส่วนขยาย 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"],
  ...
}

สำเร็จ: Scripting API ไม่ได้ทริกเกอร์คำเตือนสิทธิ์

สุดท้าย ใน 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

ทดสอบส่วนขยายในหน้าเอกสารประกอบ

ก่อนอื่น ให้เปิดหน้าใดหน้าหนึ่งต่อไปนี้

• ยินดีต้อนรับสู่เอกสารประกอบเกี่ยวกับส่วนขยาย Chrome
• เผยแพร่ใน Chrome เว็บสโตร์
• Scripting API

จากนั้นคลิกการดำเนินการของส่วนขยาย หากตั้งค่าแป้นพิมพ์ลัดไว้ คุณสามารถทดสอบได้โดยกด Ctrl + B หรือ Cmd + B

โดยควรเปลี่ยนจากรูปแบบนี้

โหมดโฟกัสปิดอยู่

เป็นข้อมูลต่อไปนี้

ส่วนขยายโหมดโฟกัสเปิดอยู่

🎯 การปรับปรุงที่เป็นไปได้

ลองทำสิ่งต่อไปนี้ตามสิ่งที่ได้เรียนรู้ในวันนี้

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

สร้างชุมชนให้เติบโตไปเรื่อยๆ

ยินดีด้วยที่จบบทแนะนำนี้ 🎉 พัฒนาทักษะของคุณต่อไปโดยดูบทแนะนำอื่นๆ ในชุดนี้

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

สำรวจต่อ

เราหวังว่าคุณจะสนุกกับการสร้างส่วนขยาย Chrome นี้และยินดีที่จะได้เรียนรู้เส้นทางการพัฒนาส่วนขยายกับคุณต่อไป เราขอแนะนําเส้นทางการเรียนรู้ต่อไปนี้

• คู่มือสําหรับนักพัฒนาซอฟต์แวร์มีลิงก์เพิ่มเติมหลายสิบลิงก์ไปยังเอกสารประกอบที่เกี่ยวข้องกับการสร้างส่วนขยายขั้นสูง
• ส่วนขยายมีสิทธิ์เข้าถึง API ที่มีประสิทธิภาพมากกว่าสิ่งที่มีให้ใช้งานในเว็บแบบเปิด เอกสารประกอบ Chrome API จะอธิบายแต่ละ API