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

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

ภาพรวม

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

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

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

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

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

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

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

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

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

ซึ่งควรเริ่มจาก

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

โดยทำดังนี้

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

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

พยายามทำตามข้อใดต่อไปนี้โดยอิงจากสิ่งที่ได้เรียนรู้ในวันนี้

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

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

ยินดีด้วยที่บทแนะนำนี้จบแล้ว 🎉 เพิ่มพูนทักษะของคุณอย่างต่อเนื่องโดยการพิชิตทักษะอื่นๆ บทแนะนำในซีรีส์นี้:

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

สำรวจต่อ

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