Tìm hiểu Extension trên trình duyệt Chrome

Extension (tiện ích mở rộng) trên trình duyệt như chặn quảng cáo, quản lý mật khẩu cho đến tích hợp các công cụ hỗ trợ công việc giúp quá trình duyệt web thuận tiện hơn. Nếu bạn tò mò về cách tạo ra một extension cho riêng mình, bài viết này sẽ là điểm khởi đầu hoàn hảo, giới thiệu những kiến thức cơ bản và đi sâu vào một trong những API cốt lõi: chrome.extension.

Extension là gì?

Về cơ bản, tiện ích mở rộng Chrome là các chương trình nhỏ được viết bằng HTML, CSS và JavaScript. Chúng cho phép thêm các tính năng mới vào trình duyệt Chrome hoặc thay đổi hành vi của các trang web bạn truy cập.

Việc phát triển extension mang lại nhiều lợi ích:

• Cá nhân hóa trải nghiệm duyệt web: Tạo ra các công cụ phù hợp với nhu cầu và quy trình làm việc của riêng bạn.
• Giải quyết vấn đề cụ thể: Tự động hóa các tác vụ lặp đi lặp lại hoặc bổ sung những tính năng còn thiếu trên các trang web yêu thích

Cấu trúc cơ bản của một tiện ích mở rộng Chrome

Một tiện ích mở rộng Chrome thường bao gồm các thành phần chính sau:

1. Manifest File - manifest.json: Đây là "bộ não" của extension, một tệp JSON chứa các thông tin quan trọng như tên, phiên bản, mô tả, các quyền cần thiết và khai báo các thành phần khác của extension. Đây là tệp duy nhất bắt buộc phải có và phải có tên cụ thể là manifest.json, nằm ở thư mục gốc của extension. Chi tiết: here
2. Background Scripts: Các tệp JavaScript chạy ở chế độ nền, xử lý các sự kiện của trình duyệt và quản lý trạng thái chung của extension. Chúng tồn tại độc lập với bất kỳ trang web cụ thể nào. Chi tiết: service-worker
3. Content Scripts: Các tệp JavaScript được nhúng trực tiếp vào các trang web người dùng truy cập. Chúng có thể đọc và thay đổi DOM của trang, cũng như tương tác với trang đó. Chi tiết: content-script
4. Trang giao diện người dùng (UI Pages):
   • Cửa sổ bật lên (Popup): Một trang HTML nhỏ hiển thị khi người dùng nhấp vào biểu tượng của extension trên thanh công cụ.
   • Trang tùy chọn (Options Page): Cho phép người dùng tùy chỉnh cài đặt của extension.
   • Các trang HTML khác có thể được sử dụng trong extension.
5. Tài nguyên khác: image, icons, CSS.

Đơn giản nhỉ vậy cùng nhau đi vào chi tiết các file sẽ làm gì với code cụ thể xem sao.

manifest.json

Mọi extension đều bắt đầu với tệp manifest.json. Dưới đây là một ví dụ cơ bản:

{ "manifest_version": 3, "name": "My First Extension", "version": "1.0", "description": "A simple Chrome extension.", "icons": { "16": "images/icon16.png", "48": "images/icon48.png", "128": "images/icon128.png" }, "action": { "default_popup": "popup.html", "default_icon": { "16": "images/icon16.png", "48": "images/icon48.png" } }, "permissions": []
}

Trong đó:

• manifest_version: Chỉ định phiên bản của định dạng tệp kê khai. Hiện tại, phiên bản 3 là mới nhất và được khuyến nghị. (phiên bản 2 đang hạn chế)
• name, version, description: Thông tin cơ bản về extension.
• icons: Đường dẫn đến các biểu tượng của extension ở các kích thước khác nhau.
• action: Xác định hành vi của biểu tượng extension trên thanh công cụ, ví dụ như hiển thị một cửa sổ bật lên (popup.html).
• permissions: Liệt kê các quyền mà extension cần để hoạt động (ví dụ: truy cập tab hiện tại, lưu trữ dữ liệu, v.v.).

Giới thiệu về API chrome.extension

API chrome.extension là một trong những API cơ bản và quan trọng trong phát triển tiện ích mở rộng Chrome. Nó cung cấp các tiện ích mà bất kỳ trang nào trong extension (bao gồm background script, popup, content script, trang tùy chọn) đều có thể sử dụng. API này đặc biệt hữu ích cho việc giao tiếp giữa các thành phần khác nhau của extension.

Dưới đây là một số phương thức và thuộc tính đáng chú ý trong API chrome.extension (dựa trên tài liệu chính thức của Chrome):

• chrome.extension.getBackgroundPage(): (Chỉ ở chế độ nền trước) Trả về đối tượng Window của trang nền đang chạy trong tiện ích hiện tại. Nếu không có trang nền, nó sẽ trả về null. Phương thức này rất hữu ích khi các thành phần khác của extension (như popup hoặc content script thông qua message passing) cần gọi trực tiếp các hàm hoặc truy cập biến trong background script.
• chrome.extension.getViews(fetchProperties?: object): (Chỉ ở chế độ nền trước) Trả về một mảng các đối tượng Window cho mỗi trang đang chạy bên trong tiện ích hiện tại. Bạn có thể tùy chọn cung cấp WorkspaceProperties để lọc các trang dựa trên loại (ví dụ: 'popup', 'tab') hoặc ID cửa sổ.
• chrome.extension.isAllowedFileSchemeAccess(): Trả về một Promise sẽ được giải quyết với một giá trị boolean cho biết liệu tiện ích có quyền truy cập vào các URL có giao thức file:// hay không. Người dùng có thể kiểm soát quyền này thông qua trang quản lý tiện ích (chrome://extensions).
• chrome.extension.isAllowedIncognitoAccess(): Trả về một Promise sẽ được giải quyết với một giá trị boolean cho biết liệu tiện ích có được phép chạy trong chế độ ẩn danh hay không. Tương tự, người dùng có thể quản lý cài đặt này.
• chrome.extension.setUpdateUrlData(data: string): Đặt giá trị của tham số CGI ap được sử dụng trong URL cập nhật của tiện ích. Giá trị này thường bị bỏ qua đối với các tiện ích được lưu trữ trên Cửa hàng Chrome trực tuyến.

Một trong những vai trò quan trọng khác của không gian tên chrome.extension (và rộng hơn là chrome.runtime) là hỗ trợ trao đổi thông báo (Message Passing). Vì các content script chạy trong một ngữ cảnh riêng biệt với trang web mà chúng được nhúng vào và cũng tách biệt với background script, cơ chế truyền thông điệp là cần thiết để chúng giao tiếp với nhau hoặc với các phần khác của extension.

Các bước tiếp theo để tạo Extension đầu tiên của bạn

1. Tạo một thư mục mới: Chứa tất cả các tệp cho extension của bạn.
2. Tạo tệp manifest.json: Định cấu hình cơ bản cho extension như mô tả ở trên.
3. Tạo các tệp HTML, CSS, JavaScript: Xây dựng giao diện người dùng (ví dụ: popup.html) và logic cho extension (ví dụ: background.js, content.js).
4. Thêm biểu tượng: Tạo các biểu tượng và khai báo chúng trong manifest.json.
5. Tải tiện ích vào Chrome:
   • Mở Chrome, tại thanh tìm kiếm và truy cập chrome://extensions.
   • Bật chế độ nhà phát triển (Developer mode).
   • Nhấp vào "Tải tiện ích đã giải nén" (Load unpacked) và chọn thư mục chứa extension của bạn. Ấn update và bắt đầu sử dụng tiện ích do chính mình mới tạo thôi nào.

Kết luận

Phát triển Extension Chrome mở ra một cánh cửa thú vị để tùy chỉnh trình duyệt và tạo ra những công cụ hữu ích. Bằng việc nắm vững các khái niệm cơ bản như cấu trúc thư mục, tệp manifest.json, các loại script và các API cốt lõi như chrome.extension, bạn đã có nền tảng vững chắc để bắt đầu hành trình của mình. Đừng ngần ngại tham khảo tài liệu chính thức từ Google và các hướng dẫn khác để khám phá sâu hơn về tiềm năng to lớn của Chrome extensions!

• https://developer.chrome.com/docs/extensions/get-started?hl=vi
• https://developer.chrome.com/docs/extensions/reference/api?hl=vi

Trong phần tiếp theo chúng ta sẽ cùng nhau đi vào chi tiết cách tạo dự án với extension.