Chrome dễ dàng là trình duyệt web phổ biến nhất hành tinh. Theo khảo sát thị phần trình duyệt máy tính của Statcounter, Chrome chiếm 65% thị phần trình duyệt máy tính tính đến cuối 2017.

Với sức mạnh xác định thị trường đó, thiết kế cho Chrome đã trở thành ưu tiên. Cũng vậy đối với tiện ích mở rộng: Chrome cung cấp cơ sở người dùng lớn nhất cho tiện ích mở rộng, với hàng chục nghìn tiện ích, chủ đề và ứng dụng trên Chrome Web Store.

Nếu bạn muốn tận dụng xu hướng này, bạn có thể xây dựng tiện ích mở rộng Chrome cơ bản của riêng mình. Bạn chỉ cần một số kỹ năng phát triển web cơ bản (HTML, CSS và Javascript) cũng như một chút JSON để gắn tất cả lại với nhau.

Chúng tôi sẽ xem xét cấu trúc cơ bản nhất cần thiết để xây dựng tiện ích mở rộng Chrome cơ bản trong bài này. Để có cái nhìn sâu sắc về các khả năng có sẵn, hãy xem Hướng dẫn tiện ích mở rộng cho nhà phát triển Chrome.

Viết tiện ích mở rộng Chrome cơ bản: Manifest Destiny

Cho hướng dẫn này, chúng ta sẽ xây dựng tiện ích mở rộng Chrome cơ bản hiển thị thông báo popup đơn giản khi nhấp. Chúng ta sẽ cần vài tệp quan trọng: một biểu tượng ("icon.png"), một tệp HTML ("popup.html") và quan trọng nhất là manifest ("manifest.json"). Tất cả tệp này sẽ sống trong thư mục có tên tiện ích mở rộng của bạn. Trong trường hợp này là "Hello World".

Một tiện ích mở rộng Chrome được định nghĩa bởi manifest của nó. Đoạn JSON này cho Chrome biết cách diễn giải tiện ích mở rộng, tệp nào tải, và cách tương tác với người dùng.

Tệp manifest cho tiện ích mở rộng cơ bản của chúng ta trông như sau:

{ "manifest_version": 2, "name": "Hello World!", "description": "My first Chrome extension.", "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" }, "permissions": [ "activeTab" ] }

Tệp manifest này sẽ đặt biểu tượng trong thanh công cụ người dùng, khi nhấp, tải nội dung tệp tên "popup.html". Dưới đây là chi tiết phần còn lại:

• manifest_version cho Chrome biết bạn đang làm việc với phiên bản manifest nào. Đối với tiện ích mở rộng hiện đại, bạn cần đặt thành 2.
• name hiển thị tên tiện ích mở rộng sẽ hiển thị trong Chrome store và "chrome://extensions".
• description hiển thị văn bản mô tả trên "chrome://extensions".
• browser action tải biểu tượng vào thanh công cụ. Nó cũng cho phép tiện ích mở rộng phản hồi đầu vào người dùng bằng cách hiển thị tooltip, popup hoặc badge. Xem danh sách đầy đủ mọi thứ "browser_action" có thể làm.
• default_icon hiển thị đường dẫn đến biểu tượng từ thư mục tiện ích mở rộng.
• default_popup hiển thị đường dẫn đến tệp sẽ tải khi biểu tượng tiện ích mở rộng được nhấp.
• permissions giới hạn vùng chức năng của tiện ích mở rộng. activeTab là phổ biến nhất, cho phép tiện ích mở rộng truy cập tab phía trước. Google cung cấp danh sách tất cả quyền tiện ích mở rộng có thể yêu cầu.

Nếu bạn muốn đi sâu vào mọi thứ manifest tiện ích mở rộng Chrome có thể khai báo, hãy xem tài liệu Google về manifest tiện ích mở rộng.

Viết tiện ích mở rộng Chrome cơ bản: Popup

Bây giờ chúng ta đã viết manifest, chúng ta có thể tìm ra tiện ích mở rộng sẽ hiển thị gì. Đó là tùy thuộc vào tệp "popup.html", sẽ hiển thị khi tiện ích mở rộng tải. Đây là thứ chúng ta sẽ dùng cho dự án này:

       
Hello World!
  

Như bạn thấy, đây sẽ render văn bản được style bằng CSS. Nếu bạn muốn thêm Javascript hoặc CSS bên ngoài vào tiện ích mở rộng, đòi hỏi khai báo scripts trong manifest, dưới khóa content_scripts. Khi bạn đã tham chiếu trong manifest, bạn có thể tải những scripts đó như bình thường.

Viết tiện ích mở rộng Chrome cơ bản: Tải vào Chrome

Khi chúng ta đã viết mã cơ bản cho tiện ích mở rộng và tìm biểu tượng phù hợp, chúng ta có thể tải nó vào Chrome.

1. Điều hướng đến "chrome://extensions" và bật "Chế độ nhà phát triển" bằng cách tích hộp ở góc trên bên phải.

2. Nhấp nút "Tải tiện ích mở rộng chưa đóng gói..." và chọn thư mục tiện ích mở rộng.

3. Khi tiện ích mở rộng được tải, bạn sẽ thấy biểu tượng của nó trong thanh menu.

4. Nhấp vào tiện ích mở rộng để thấy hiệu ứng (rất đơn giản) của nó.

Kết luận: Mở rộng tiện ích mở rộng Chrome của bạn

Khi bạn xong tiện ích mở rộng và sẵn sàng phát hành, bạn sẽ cần tạo tài khoản nhà phát triển Chrome. Đó không phải quá trình đơn giản, nhưng Google cung cấp hướng dẫn hoàn chỉnh để phát hành tiện ích mở rộng Chrome tại đây.

Rõ ràng có nhiều thứ hơn bạn có thể làm với tiện ích mở rộng Chrome, nhưng đó hơi vượt khỏi phạm vi bài này. Nếu bạn muốn tìm hiểu thêm về mọi thứ tiện ích mở rộng Chrome có thể làm, hãy xem Hướng dẫn tiện ích mở rộng Chrome Developer của Google.