Tiện ích là các gói nén của HTML, CSS, JavaScript, hình ảnh và các tệp khác được dùng trong nền tảng web, giúp tuỳ chỉnh trải nghiệm duyệt web trên Google Chrome. Các tiện ích được tạo bằng công nghệ web và có thể sử dụng cùng các API mà trình duyệt cung cấp cho web mở.
Tiện ích có nhiều khả năng chức năng. Chúng có thể sửa đổi nội dung web mà người dùng xem và tương tác hoặc mở rộng và thay đổi hành vi của chính trình duyệt.
Hãy xem tiện ích là trình duyệt giúp trình duyệt Chrome trở thành trình duyệt được cá nhân hoá hiệu quả nhất.
Tệp mở rộng
Các tiện ích có nhiều loại tệp và số lượng thư mục, nhưng tất cả đều bắt buộc phải có một [tệp kê khai][docs-manifest]. Một số tiện ích cơ bản nhưng hữu ích có thể chỉ bao gồm tệp kê khai và biểu tượng thanh công cụ.
Tệp kê khai có tiêu đề manifest.json, cung cấp cho trình duyệt thông tin về tiện ích, chẳng hạn như các tệp quan trọng nhất và những chức năng mà tiện ích có thể sử dụng.
{
"name": "My Extension",
"version": "2.1",
"description": "Gets information from Google.",
"icons": {
"128": "icon_16.png",
"128": "icon_32.png",
"128": "icon_48.png",
"128": "icon_128.png"
},
"background": {
"persistent": false,
"scripts": ["background_script.js"]
},
"permissions": ["https://*.google.com/", "activeTab"],
"browser_action": {
"default_icon": "icon_16.png",
"default_popup": "popup.html"
}
}
Tiện ích phải có biểu tượng nằm trên thanh công cụ của trình duyệt. Biểu tượng trên thanh công cụ giúp dễ dàng truy cập và giúp người dùng biết được tiện ích nào được cài đặt. Hầu hết người dùng sẽ tương tác với một tiện ích sử dụng cửa sổ bật lên bằng cách nhấp vào biểu tượng.
Tiện ích Trình kiểm tra thư của Google này sử dụng thao tác trên trình duyệt:
Phần mở rộng Mappy này sử dụng hành động trên trang và tập lệnh nội dung:
Tham chiếu đến tệp
Bạn có thể tham chiếu các tệp của tiện ích bằng cách sử dụng URL tương đối, giống như các tệp trong một trang HTML thông thường.
<img src="images/my_image.png">
Ngoài ra, bạn cũng có thể truy cập vào từng tệp bằng URL tuyệt đối.
chrome-extension://EXTENSION_ID/PATH_TO_FILE
Trong URL tuyệt đối, EXTENSION_ID là giá trị nhận dạng duy nhất mà hệ thống tiện ích tạo ra cho mỗi tiện ích. Bạn có thể xem mã của tất cả các tiện ích đã tải bằng cách truy cập vào URL chrome://extensions. PATH_TO_FILE là vị trí của tệp trong thư mục trên cùng của tiện ích; tệp này khớp với URL tương đối.
Trong khi làm việc trên một tiện ích đã giải nén, mã tiện ích có thể thay đổi. Cụ thể, mã nhận dạng của một
tiện ích đã giải nén sẽ thay đổi nếu tiện ích được tải từ một thư mục khác; mã nhận dạng này sẽ
thay đổi lần nữa khi tiện ích được đóng gói. Nếu mã của tiện ích dựa trên URL tuyệt đối, thì tiện ích đó có thể sử dụng phương thức chrome.runtime.getURL() để tránh mã hoá cứng mã nhận dạng trong quá trình phát triển.
Cấu trúc
Cấu trúc của tiện ích sẽ phụ thuộc vào chức năng của tiện ích đó, nhưng nhiều tiện ích mạnh mẽ sẽ bao gồm nhiều thành phần:
Tập lệnh nền
Tập lệnh nền là trình xử lý sự kiện của tiện ích; tập lệnh này chứa trình nghe các sự kiện trình duyệt quan trọng đối với tiện ích. Sự kiện này sẽ không hoạt động cho đến khi một sự kiện được kích hoạt, sau đó thực hiện logic theo hướng dẫn. Tập lệnh nền hiệu quả chỉ được tải khi cần và được huỷ tải khi không hoạt động.
Phần tử trên giao diện người dùng
Giao diện người dùng của tiện ích phải có mục đích và ở mức tối thiểu. Giao diện người dùng phải tuỳ chỉnh hoặc cải thiện trải nghiệm duyệt web mà không làm người dùng phân tâm. Hầu hết tiện ích đều có một thao tác trên trình duyệt hoặc thao tác trên trang, nhưng có thể chứa các dạng giao diện người dùng khác, chẳng hạn như trình đơn theo bối cảnh, việc sử dụng thanh địa chỉ hoặc tạo phím tắt.
Các trang giao diện người dùng tiện ích, chẳng hạn như cửa sổ bật lên, có thể chứa các trang HTML thông thường có logic JavaScript. Các tiện ích cũng có thể gọi tabs.create hoặc window.open() để hiển thị các tệp HTML bổ sung có trong tiện ích.
Tiện ích sử dụng thao tác trên trang và cửa sổ bật lên có thể sử dụng API nội dung khai báo để đặt các quy tắc trong tập lệnh nền cho thời điểm người dùng có thể sử dụng cửa sổ bật lên. Khi các điều kiện được đáp ứng, tập lệnh nền sẽ giao tiếp với cửa sổ bật lên để người dùng có thể nhấp vào biểu tượng.
Tập lệnh nội dung
Những tiện ích đọc hoặc ghi vào trang web sử dụng tập lệnh nội dung. Tập lệnh nội dung chứa JavaScript thực thi trong ngữ cảnh của một trang đã được tải vào trình duyệt. Tập lệnh nội dung sẽ đọc và sửa đổi DOM của các trang web mà trình duyệt truy cập.
Tập lệnh nội dung có thể giao tiếp với tiện ích gốc bằng cách trao đổi thông báo và lưu trữ các giá trị bằng API storage.
Trang tuỳ chọn
Cũng giống như tiện ích cho phép người dùng tuỳ chỉnh trình duyệt Chrome, trang tuỳ chọn cho phép tuỳ chỉnh tiện ích. Bạn có thể sử dụng các tuỳ chọn để bật các tính năng và cho phép người dùng chọn chức năng phù hợp với nhu cầu của họ.
Sử dụng API Chrome
Ngoài việc có quyền truy cập vào các API tương tự như trang web, tiện ích cũng có thể sử dụng API dành riêng cho tiện ích để tích hợp chặt chẽ với trình duyệt. Cả tiện ích và trang web đều có thể truy cập vào phương thức window.open() chuẩn để mở URL, nhưng các tiện ích có thể chỉ định cửa sổ hiển thị URL đó bằng cách sử dụng phương thức tabs.create trong API Chrome.
Phương thức không đồng bộ so với phương thức đồng bộ
Hầu hết các phương thức API Chrome đều không đồng bộ: các phương thức này trả về ngay lập tức mà không cần chờ thao tác hoàn tất. Nếu cần biết kết quả của hoạt động không đồng bộ, tiện ích có thể truyền hàm callback vào phương thức này. Lệnh gọi lại được thực thi sau đó (có thể là sau một thời gian dài) sau khi phương thức trả về.
Nếu cần thiết để điều hướng thẻ mà người dùng hiện được chọn đến một URL mới, thì tiện ích cần lấy mã nhận dạng của thẻ hiện tại, sau đó cập nhật địa chỉ của thẻ đó thành URL mới.
Nếu phương thức tabs.query đồng bộ, phương thức này có thể trông giống như dưới đây.
//THIS CODE DOESN'T WORK
var tab = chrome.tabs.query({'active': true}); //WRONG!!!
chrome.tabs.update(tab.id, {url:newUrl});
someOtherFunction();
Phương pháp này không thành công vì query() không đồng bộ. Phương thức này trả về mà không cần đợi tác vụ hoàn tất và không trả về giá trị. Một phương thức không đồng bộ khi thông số gọi lại có sẵn trong chữ ký của phương thức đó.
// Signature for an asynchronous method
chrome.tabs.query(object queryInfo, function callback)
Để truy vấn chính xác một thẻ và cập nhật URL của thẻ đó, tiện ích phải sử dụng thông số gọi lại.
//THIS CODE WORKS
chrome.tabs.query({'active': true}, function(tabs) {
chrome.tabs.update(tabs[0].id, {url: newUrl});
});
someOtherFunction();
Trong đoạn mã trên, các dòng được thực thi theo thứ tự sau: 1, 4, 2. Hàm callback được chỉ định cho query() được gọi và sau đó thực thi dòng 2, nhưng chỉ sau khi thông tin về thẻ hiện được chọn có sẵn. Điều này xảy ra vào một lúc nào đó sau khi query() trả về. Mặc dù update() không đồng bộ, nhưng mã không sử dụng tham số callback, vì phần mở rộng không thực hiện bất kỳ tác vụ nào với kết quả của quá trình cập nhật.
// Synchronous methods have no callback option and returns a type of string
string chrome.runtime.getURL()
Phương thức này trả về URL một cách đồng bộ dưới dạng string và không thực hiện tác vụ không đồng bộ nào khác.
Thông tin chi tiết
Để biết thêm thông tin, hãy khám phá tài liệu tham khảo về API Chrome và xem video sau.
Hoạt động giao tiếp giữa các trang
Các thành phần khác nhau trong một tiện ích thường cần giao tiếp với nhau. Các trang HTML khác nhau có thể tìm thấy nhau bằng cách sử dụng phương thức chrome.extension, chẳng hạn như getViews() và getBackgroundPage(). Khi một trang tham chiếu đến các trang tiện ích khác, trang đầu tiên có thể gọi các hàm trên các trang khác và điều khiển DOM của chúng. Ngoài ra, tất cả thành phần của tiện ích đều có thể truy cập vào các giá trị được lưu trữ bằng API storage và giao tiếp thông qua tính năng truyền thông báo.
Lưu dữ liệu và chế độ ẩn danh
Các tiện ích có thể lưu dữ liệu bằng cách sử dụng API bộ nhớ, API bộ nhớ web HTML5 hoặc bằng cách thực hiện các yêu cầu tới máy chủ để lưu dữ liệu. Khi tiện ích cần lưu nội dung nào đó, trước tiên, hãy cân nhắc xem tiện ích đó có phải là từ một cửa sổ ẩn danh hay không. Theo mặc định, các tiện ích không chạy trong cửa sổ ẩn danh.
Chế độ ẩn danh hứa hẹn rằng cửa sổ sẽ không để lại dấu vết nào. Khi xử lý dữ liệu từ cửa sổ ẩn danh, các tiện ích phải tuân thủ lời hứa này. Nếu một tiện ích thường lưu nhật ký duyệt web, thì đừng lưu nhật ký từ cửa sổ ẩn danh. Tuy nhiên, tiện ích có thể lưu trữ các lựa chọn cài đặt ưu tiên từ bất kỳ cửa sổ nào, ẩn danh hoặc không.
Để phát hiện xem một cửa sổ có đang ở chế độ ẩn danh hay không, hãy kiểm tra thuộc tính incognito của đối tượng tabs.Tab hoặc windows.Window có liên quan.
function saveTabData(tab) {
if (tab.incognito) {
return;
} else {
chrome.storage.local.set({data: tab.url});
}
}
Thực hiện bước tiếp theo
Sau khi đọc nội dung tổng quan và hoàn tất hướng dẫn Bắt đầu sử dụng, nhà phát triển đã sẵn sàng để bắt đầu viết tiện ích của riêng họ! Tìm hiểu sâu hơn về Chrome tuỳ chỉnh bằng các tài nguyên sau đây.
- Tìm hiểu về các tuỳ chọn có sẵn để gỡ lỗi Tiện ích trong hướng dẫn gỡ lỗi.
- Tiện ích của Chrome có quyền truy cập vào các API mạnh mẽ ở trên và ngoài những API có sẵn trên web mở. chrome.* Tài liệu về API sẽ hướng dẫn từng bước về API.
- Phần Tổng quan về quá trình phát triển tiện ích có nhiều đường liên kết bổ sung đến các tài liệu liên quan đến việc tạo tiện ích nâng cao.