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

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

ภาพรวม

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

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

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

ส่วนขยายจะตรวจสอบเหตุการณ์ของเบราว์เซอร์ในเบื้องหลังได้โดยใช้โปรแกรมทำงานบริการของส่วนขยาย โปรแกรมทำงานของบริการเป็นสภาพแวดล้อม 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 และใส่รหัสต่อไปนี้

body > .scaffold > :is(top-nav, navigation-rail, side-nav, footer),
main > :not(:last-child),
main > :last-child > navigation-tree,
main .toc-container {
  display: none;
}

main > :last-child {
  margin-top: min(10vmax, 10rem);
  margin-bottom: min(10vmax, 10rem);
}

แทรกหรือนำสไตล์ชีตออกโดยใช้ 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() จึงไม่จำเป็นต้องเขียนโค้ดเพิ่มเติม

ทดสอบว่าใช้งานได้

ยืนยันว่าโครงสร้างไฟล์ของโครงการมีลักษณะดังต่อไปนี้

เนื้อหาของโฟลเดอร์โหมดโฟกัส ได้แก่ manifest.json, background.js,Focus-mode.css และโฟลเดอร์รูปภาพ

โหลดส่วนขยายในเครื่อง

หากต้องการโหลดส่วนขยายที่คลายการแพคแล้วในโหมดนักพัฒนาซอฟต์แวร์ ให้ทำตามขั้นตอนใน Hello World

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

ขั้นแรก ให้เปิดหน้าเว็บใดก็ได้ต่อไปนี้

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

โค้ดควรเริ่มจากจุดนี้

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

โดยทำดังนี้

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

🎯 การเพิ่มประสิทธิภาพที่เป็นไปได้

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

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

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

ยินดีด้วยกับบทแนะนำนี้จบแล้ว 🎉 เพิ่มทักษะของคุณไปอีกขั้นด้วยบทแนะนำอื่นๆ ในชุดนี้:

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

สำรวจต่อ

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

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