Trang này được dịch bởi Cloud Translation API.

Chèn tập lệnh vào thẻ đang hoạt động

Hướng dẫn này sẽ tạo một tiện ích giúp đơn giản hoá việc tạo kiểu cho các trang tài liệu về tiện ích Chrome và Cửa hàng Chrome trực tuyến, để bạn dễ đọc hơn.

Trong hướng dẫn này, chúng tôi sẽ giải thích cách thực hiện những thao tác sau:

Sử dụng trình chạy dịch vụ của tiện ích làm trình điều phối sự kiện.
Bảo vệ quyền riêng tư của người dùng thông qua quyền "activeTab".
Chạy mã khi người dùng nhấp vào biểu tượng trên thanh công cụ của tiện ích.
Chèn và xoá một biểu định kiểu bằng cách sử dụng API Scripting.
Sử dụng phím tắt để thực thi mã.

Trước khi bắt đầu

Hướng dẫn này giả định rằng bạn đã có kinh nghiệm cơ bản về phát triển web. Hãy xem Hello World để biết thông tin giới thiệu về quy trình phát triển tiện ích.

Tạo tiện ích

Để bắt đầu, hãy tạo một thư mục mới có tên focus-mode để lưu trữ các tệp tiện ích. Bạn có thể tải mã nguồn hoàn chỉnh xuống trên GitHub.

Bước 1: Thêm dữ liệu và biểu tượng của tiện ích

Tạo tệp manifest.json. Sao chép và dán mã sau:

{
  "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"
  }
}

Tạo một thư mục images, sau đó tải các biểu tượng xuống thư mục đó.

Bước 2: Khởi tạo tiện ích

Tiện ích có thể giám sát các sự kiện của trình duyệt ở chế độ nền bằng trình chạy dịch vụ của tiện ích. Service worker là môi trường JavaScript đặc biệt xử lý các sự kiện và kết thúc khi không cần thiết.

Bắt đầu bằng cách đăng ký trình chạy dịch vụ trong tệp manifest.json:

{
  ...
  "background": {
    "service_worker": "background.js"
  },
  ...
}

Tạo một tệp có tên là background.js rồi thêm đoạn mã sau:

chrome.runtime.onInstalled.addListener(() => {
  chrome.action.setBadgeText({
    text: "OFF",
  });
});

Sự kiện đầu tiên mà trình chạy dịch vụ sẽ theo dõi là runtime.onInstalled(). Phương thức này cho phép tiện ích đặt trạng thái ban đầu hoặc hoàn tất một số tác vụ khi cài đặt. Tiện ích có thể sử dụng Storage API và IndexedDB để lưu trữ trạng thái ứng dụng. Trong trường hợp này, vì chỉ xử lý 2 trạng thái, nên chúng ta sử dụng văn bản huy hiệu của thao tác để theo dõi xem tiện ích có đang ở trạng thái "BẬT" hay "TẮT".

Bước 3: Bật thao tác tiện ích

Thao tác của tiện ích kiểm soát biểu tượng của tiện ích trên thanh công cụ. Khi người dùng chọn biểu tượng tiện ích, biểu tượng này sẽ chạy mã (như trong ví dụ này) hoặc hiển thị một cửa sổ bật lên.

Thêm đoạn mã sau để khai báo thao tác mở rộng trong tệp 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"
    }
  },
  ...
}

Sử dụng quyền activeTab để bảo vệ quyền riêng tư của người dùng

Quyền activeTab cấp cho tiện ích khả năng thực thi mã tạm thời trên thẻ đang hoạt động. API này cũng cho phép truy cập vào các thuộc tính nhạy cảm của thẻ hiện tại.

Quyền này được bật khi người dùng gọi tiện ích. Trong trường hợp này, người dùng gọi tiện ích bằng cách nhấp vào thao tác tiện ích.

💡 Những hoạt động tương tác nào khác của người dùng cho phép cấp quyền activeTab trong tiện ích của riêng tôi?

Nhấn một tổ hợp phím tắt.
Chọn một mục trong trình đơn theo bối cảnh.
Chấp nhận một đề xuất trên thanh địa chỉ.
Mở cửa sổ bật lên của tiện ích.

Quyền "activeTab" cho phép người dùng cố ý chọn chạy tiện ích trên thẻ đang hoạt động; bằng cách này, quyền riêng tư của người dùng sẽ được bảo vệ. Một lợi ích khác là phương thức này không kích hoạt cảnh báo về quyền.

Để sử dụng quyền "activeTab", hãy thêm quyền này vào mảng quyền của tệp kê khai:

{
  ...
  "permissions": ["activeTab"],
  ...
}

Bước 4: Theo dõi trạng thái của thẻ hiện tại

Sau khi người dùng nhấp vào thao tác của tiện ích, tiện ích sẽ kiểm tra xem URL có khớp với trang tài liệu hay không. Tiếp theo, nó sẽ kiểm tra trạng thái của thẻ hiện tại và đặt trạng thái tiếp theo. Thêm mã sau vào 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,
    });
  }
});

Bước 5: Thêm hoặc xoá biểu định kiểu

Giờ là lúc thay đổi bố cục của trang. Tạo một tệp có tên là focus-mode.css và thêm đoạn mã sau:

* {
  display: none !important;
}

html,
body,
*:has(article),
article,
article * {
  display: revert !important;
}

[role='navigation'] {
  display: none !important;
}

article {
  margin: auto;
  max-width: 700px;
}

Chèn hoặc xoá biểu định kiểu bằng API Scripting. Bắt đầu bằng cách khai báo quyền "scripting" trong tệp kê khai:

{
  ...
  "permissions": ["activeTab", "scripting"],
  ...
}

Cuối cùng, trong background.js, hãy thêm mã sau để thay đổi bố cục trang:

  ...
    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 },
      });
    }
  }
});

(Không bắt buộc) Chỉ định một phím tắt

Để cho vui, hãy thêm một lối tắt để dễ dàng bật hoặc tắt chế độ tập trung. Thêm khoá "commands" vào tệp kê khai.

{
  ...
  "commands": {
    "_execute_action": {
      "suggested_key": {
        "default": "Ctrl+B",
        "mac": "Command+B"
      }
    }
  }
}

Khoá "_execute_action" chạy cùng mã với sự kiện action.onClicked(), vì vậy không cần mã bổ sung.

Kiểm tra để đảm bảo tính năng này hoạt động

Xác minh rằng cấu trúc tệp của dự án trông như sau:

Nội dung của thư mục chế độ tập trung: manifest.json, background.js, focus-mode.css và thư mục hình ảnh.

Tải tiện ích của bạn xuống máy

Để tải một tiện ích chưa đóng gói ở chế độ nhà phát triển, hãy làm theo các bước trong phần Hello World.

Kiểm thử tiện ích

Mở một trong các trang sau:

Sau đó, hãy nhấp vào hành động của tiện ích. Nếu thiết lập một phím tắt, bạn có thể kiểm thử bằng cách nhấn tổ hợp phím Ctrl+B hoặc Cmd+B.

Từ:

Tiện ích Chế độ tập trung đang TẮT — Tắt tiện ích Chế độ tập trung

Thành:

Tiện ích Chế độ tập trung đang BẬT — Tiện ích Chế độ tập trung đang bật

Các điểm cải tiến tiềm năng

Dựa trên những gì bạn đã học được hôm nay, hãy thử thực hiện một trong những việc sau:

Cải thiện biểu định kiểu CSS.
Chỉ định một phím tắt khác.
Thay đổi bố cục của blog hoặc trang web tài liệu mà bạn yêu thích.

Tiếp tục xây dựng

Chúc mừng bạn đã hoàn thành hướng dẫn này 🎉. Hãy tiếp tục nâng cao kỹ năng của bạn bằng cách hoàn thành các hướng dẫn khác trong loạt hướng dẫn này:

Phần mở rộng	Kiến thức bạn sẽ học được
Thời gian đọc	Tự động chèn một phần tử vào một nhóm trang cụ thể.
Trình quản lý thẻ	Tạo một cửa sổ bật lên để quản lý các thẻ trình duyệt.

Tiếp tục khám phá

Chúng tôi hy vọng bạn thích thú khi tạo tiện ích Chrome này và sẵn sàng tiếp tục hành trình học tập phát triển tiện ích của mình. Bạn nên tham khảo các lộ trình học tập sau:

Hướng dẫn dành cho nhà phát triển có hàng chục đường liên kết bổ sung đến các phần tài liệu liên quan đến việc tạo tiện ích nâng cao.
Tiện ích có quyền truy cập vào các API mạnh mẽ ngoài những API có trên web mở. Tài liệu về Chrome API trình bày từng API.