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

Với loại sức mạnh xác định thị trường đó, thiết kế cho Chrome đã trở thành ưu tiên hàng đầu. Tương tự như 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 cho đến nay, với hàng chục nghìn tiện ích mở rộng, chủ đề và ứng dụng phổ biến Cửa hàng Chrome trực tuyến.

Nếu bạn muốn kiếm tiền theo xu hướng, bạn có thể tạo tiện ích Chrome cơ bản của riêng bạn. Bạn sẽ 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 teaspoonful JSON để kết hợp 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 để tạo tiện ích mở rộng cơ bản của Chrome trong bài đăng này. Để có đượ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 mở rộng dành cho nhà phát triển của Chrome.

Viết một phần mở rộng cơ bản của Chrome: Mệnh lệnh Manifest

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

Tiện ích của Chrome được xác định bằng tệp kê khai của Chrome. Đoạn mã JSON này hiển thị Chrome cách diễn giải tiện ích mở rộng, tệp cần tải và cách tương tác với người dùng.

Tệp kê khai cho tiện ích mở rộng cơ bản của chúng tôi trông giống như sau:

 {"manifest_version": 2, "name": "Hello World!", "description": "Tiện ích mở rộng Chrome đầu tiên của tôi", "browser_action": {"default_icon": "icon.png", "default_popup": "popup .html "}, " quyền ": [" activeTab "]}

Tệp kê khai này sẽ đặt một biểu tượng trong thanh công cụ của người dùng, khi được nhấp, tải nội dung của tệp có tên là "popup.html". Sau đây là phần nitty-gritty trên phần còn lại của nội dung:

  • manifest_version cho Chrome biết bạn đang làm việc với phiên bản nào của đánh dấu tệp kê khai. Đối với tiện ích mở rộng hiện đại, bạn sẽ cần đặt giá trị này thành 2.
  • name hiển thị tên tiện ích mở rộng sẽ hiển thị trong cửa hàng Chrome và “chrome: // extensions”.
  • description tả hiển thị văn bản mô tả được hiển thị 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 của người dùng bằng cách hiển thị chú giải công cụ, cửa sổ bật lên hoặc huy hiệu. Kiểm tra một danh sách đầy đủ của tất cả 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 của tiện ích.
  • default_popup hiển thị đường dẫn đến tệp sẽ tải khi biểu tượng của tiện ích mở rộng được nhấp.
  • permissions hạn chế 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 vào tab phía trước nhất. Google cung cấp danh sách tất cả các quyền mà tiện ích mở rộng có thể yêu cầu.

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

Viết tiện ích mở rộng cơ bản của Chrome: Cửa sổ bật lên

Bây giờ chúng tôi đã viết tệp kê khai của mình, chúng tôi có thể tìm ra tiện ích mở rộng của chúng tôi sẽ hiển thị. Tùy thuộc vào tệp “popup.html” của chúng tôi, tệp này sẽ hiển thị khi tiện ích mở rộng tải. Dưới đây là những gì chúng tôi sẽ sử dụng cho dự án này:

 Chào thế giới

Như bạn có thể thấy, điều này sẽ hiển thị một số văn bản được tạo kiểu 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 của mình, yêu cầu đó phải khai báo các tập lệnh trong tệp kê khai, bên dưới khóa content_scripts . Khi bạn đã tham chiếu trong tệp kê khai, bạn có thể tải các tập lệnh đó như bình thường.

Viết tiện ích mở rộng cơ bản của Chrome: Tải xuống Chrome

Khi chúng tôi đã viết mã cơ bản cho tiện ích mở rộng của chúng tôi và tìm thấy một biểu tượng phù hợp, chúng tôi 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 đánh dấu vào hộp kiểm ở phía trên bên phải.

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

3. Khi tiện ích được tải, bạn sẽ thấy biểu tượng của tiện ích trong thanh trình đơn.

4. Nhấp vào phần mở rộng để xem hiệu ứng (rất đơn giản) của nó.

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

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

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