Tổng quan về cấu trúc

Tiện ích mở rộng là gói HTML, CSS, JavaScript, hình ảnh và các tệp khác được nén được sử dụng trong web để tuỳ chỉnh trải nghiệm duyệt web trên Google Chrome. Tiện ích được xây dựng bằng cách sử dụng web công nghệ và có thể sử dụng cùng các API mà trình duyệt cung cấp cho web mở.

Các tiện ích có rất nhiều chức năng. Chúng có thể sửa đổi nội dung web mà người dùng thấy và tương tác với hoặc mở rộng và thay đổi hoạt động của chính trình duyệt.

Hãy xem các tiện ích là cánh cổng để biến trình duyệt Chrome thành trình duyệt được cá nhân hoá nhiều nhất.

Tệp tiện ích

Các tiện ích có nhiều loại tệp và số lượng thư mục khác nhau, nhưng tất cả đều bắt buộc phải có [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ư dưới dạng các tệp quan trọng nhất và những khả 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 trong thanh công cụ của trình duyệt. Các biểu tượng trên thanh công cụ giúp bạn 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 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 này.

Tiện ích Trình kiểm tra thư của Google này sử dụng một thao tác của trình duyệt:

Ảnh chụp màn hình tiện ích Google Mail Checker

Tiện ích Mappy này sử dụng hành động trên trang và nội dung tập lệnh:

Ảnh chụp màn hình tiện ích Mappy

Tham chiếu đến tệp

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 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 mỗi tệp bằng một 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 cho từng 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; nó khớp với URL tương đối.

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 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ại khi tiện ích được đóng gói. Nếu mã của tiện ích dựa vào một URL tuyệt đối, thì mã này có thể sử dụng phương thức chrome.runtime.getURL() để tránh mã cứng ID trong phát triển ứng dụng.

Kiến trúc

Cấu trúc của một 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; nó chứa các trình nghe cho các sự kiện trình duyệt quan trọng với tiện ích. Sự kiện không hoạt động cho đến khi sự kiện được kích hoạt thực hiện logic được hướng dẫn. Tập lệnh nền hiệu quả chỉ được tải khi cần và huỷ tải khi thiết bị ở trạng thái rảnh.

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 rõ ràng và đơn giản nhất có thể. Giao diện người dùng sẽ tuỳ chỉnh hoặc nâng cao trải nghiệm duyệt web mà không bị phân tâm. Hầu hết các tiện ích mở rộng đều có trình duyệt hành động hoặc hành động 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, sử dụng thanh địa chỉ hoặc tạo phím tắt.

Các trang giao diện người dùng của tiện ích, như cửa sổ bật lên, có thể chứa các trang HTML thông thường có JavaScript logic. Các tiện ích cũng có thể gọi tabs.create hoặc window.open() để hiển thị có các tệp HTML bổ sung trong tiện ích.

Tiện ích sử dụng hành động trên trang và cửa sổ bật lên có thể sử dụng hàm khai báo content để đặt các quy tắc trong tập lệnh nền khi cửa sổ bật lên được mà người dùng có thể sử dụng. 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.

Cửa sổ trình duyệt chứa thao tác trên trang hiển thị cửa sổ bật lên

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. Chiến lược phát hành đĩa đơn 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 đọc và sửa đổi DOM của các trang web mà trình duyệt truy cập.

Cửa sổ trình duyệt có thao tác trên trang và tập lệnh nội dung

Các tập lệnh nội dung có thể giao tiếp với tiện ích mẹ bằng cách trao đổi thông báo và lưu trữ các giá trị bằng API storage.

Cho thấy đường dẫn liên lạc giữa tập lệnh nội dung và tiện ích mẹ

Trang tuỳ chọn

Cũng giống như các 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. 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ùng API như trang web, tiện ích cũng có thể sử dụng API dành riêng cho tiện ích giúp tích hợp chặt chẽ với trình duyệt. Tiện ích và các trang web đều có thể truy cập vào phương thức window.open() chuẩn để mở URL, nhưng tiện ích chỉ định cửa sổ mà URL sẽ được hiển thị bằng cách sử dụng API Chrome tabs.create.

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 sẽ quay lại ngay lập tức mà không cần đợi thao tác để hoàn tất. Nếu một tiện ích cần biết kết quả của một hoạt động không đồng bộ, nó có thể truyền một hàm callback vào phương thức. Lệnh gọi lại được thực thi muộn hơn, có thể muộn hơn rất nhiều, sau trả về phương thức.

Nếu tiện ích cần chuyển thẻ mà người dùng đang chọn đến một URL mới, thì tiện ích đó cần phải lấy mã nhận dạng của thẻ hiện tại, rồi cập nhật địa chỉ của thẻ đó thành URL mới.

Nếu phương thức tabs.query là phương thức đồng bộ, thì phương thức này có thể có dạng như sau.

//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 sẽ không thành công vì query() không đồng bộ. Ứng dụng sẽ trả lại mà không cần đợi công việc để 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 là có sẵn trong chữ ký.

// 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 tham 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 lệnh được thực thi theo thứ tự như sau: 1, 4, 2. Hàm callback đã chỉ định cho query() được gọi rồi thực thi dòng 2, nhưng chỉ sau thông tin về thẻ hiện được chọn khả dụng. Quá trình này sẽ xảy ra đôi khi sau khi query() trả về. Mặc dù update() không đồng bộ, mã không sử dụng tham số gọi lại, vì tiện ích không sử dụng mọi kết quả 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 khác

Để 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.

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 có 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à thao túng các DOM của chúng. Ngoài ra, tất cả các thành phần của tiện ích 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 chuyển thông báo.

Tiết kiệm 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 storage, bộ nhớ web HTML5 API hoặc bằng cách đưa ra yêu cầu tới máy chủ dẫn đến việc tiết kiệm 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 nội dung đó có phải từ cửa sổ ẩn danh 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ổ này sẽ không để lại kênh nào. Khi xử lý dữ liệu từ cửa sổ ẩn danh, tiện ích phải thực hiện lời hứa này. Nếu một tiện ích thường lưu nội dung duyệt web lịch sử, không lưu lịch sử từ cửa sổ ẩn danh. Tuy nhiên, tiện ích có thể lưu trữ cài đặt từ bất kỳ cửa sổ nào, chế độ ẩn danh hay không.

Để biết một cửa sổ có ở chế độ ẩn danh hay không, hãy kiểm tra thuộc tính incognito của cửa sổ có liên quan tabs.Tab hoặc đối tượng windows.Window.

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 tổng quan và hoàn tất hướng dẫn Bắt đầu, nhà phát triển nê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ề thế giới Chrome tuỳ chỉnh bằng các tài nguyên sau.