Chrome dễ dàng trở thành 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 65% thị phần trình duyệt máy tính để bàn tính đến cuối năm 2017.
Với sức mạnh xác định thị trường đó, thiết kế cho Chrome đã trở thành một ưu tiên. Tương tự với các tiện ích mở rộng:Chrome cung cấp cơ sở người dùng lớn nhất cho các 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 có trong Cửa hàng Chrome trực tuyến.
Nếu bạn muốn bắt kịp xu hướng, bạn có thể tạo tiện ích mở rộng Chrome cơ bản của riêng mình. 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 muỗng cà phê 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 có để tạo một tiện ích mở rộng Chrome cơ bản trong bài đăng này. Để có cái nhìn chuyên sâu về các khả năng có sẵn, hãy xem Hướng dẫn tiện ích mở rộng dành cho nhà phát triển của Chrome.
Viết tiện ích mở rộng Chrome cơ bản:Khai báo số phận
Đố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 Chrome cơ bản hiển thị một thông báo bật lên đơn giản khi được nhấp vào. Chúng tôi sẽ cần một số 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 một thư mục có tên của phần mở rộng của bạn. Trong trường hợp này được gọi là “Xin chào thế giới”.
Tiện ích mở rộng của Chrome được xác định bởi tệp kê khai của nó. Đoạn mã JSON này chỉ cho Chrome cách diễn giải tiện ích mở rộng, những tệp nào 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 rất cơ bản của chúng tôi trông giố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 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 vào, sẽ tải nội dung của tệp có tên “popup.html”. Sau đây là phần còn lại của nội dung:
-
manifest_versioncho Chrome biết bạn đang làm việc với phiên bản đánh dấu tệp kê khai nào. Đối với các tiện ích mở rộng hiện đại, bạn sẽ cần đặt giá trị này thành2. -
namehiển thị tên mà tiện ích sẽ hiển thị trong cửa hàng Chrome và “chrome:// extensions”. -
descriptionhiển thị văn bản mô tả được hiển thị trên “chrome:// extensions”. -
browser actiontả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 thông tin nhập 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. Xem danh sách đầy đủ mọi thứ mà “browser_action” có thể làm. -
default_iconhiển thị đường dẫn đến biểu tượng từ thư mục của tiện ích. -
default_popuphiển thị đường dẫn đến tệp sẽ tải khi nhấp vào biểu tượng của tiện ích. -
permissionsgiới hạn vùng chức năng của tiện ích.activeTablà phổ biến nhất, cho phép tiện ích mở rộng truy cập vào tab phía trước. Google cung cấp danh sách tất cả các quyền mà tiện ích có thể yêu cầu.
Nếu bạn muốn tìm hiểu sâu về mọi thứ mà tệp kê khai của tiện ích mở rộng 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 một Tiện ích mở rộng Chrome cơ bản: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 những gì tiện ích mở rộng của chúng tôi sẽ hiển thị. Đó là 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. Đây là những gì chúng tôi sẽ sử dụng cho dự án này:
<!doctype html>
<html>
<head>
<title>Hello World</title>
</head>
<style type="text/css">
body {
margin: 5px;
}
h1 {
font-size: 15px;
text-align: center;
}
</style>
<body>
<h1>Hello World!</h1>
</body>
</html>
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, điều đó yêu cầu khai báo các tập lệnh trong tệp kê khai, trong content_scripts Chìa khóa. Sau khi bạn có 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 Chrome cơ bản:Đang tải vào Chrome
Sau khi viết mã cơ bản cho tiện ích mở rộng của mình và tìm thấy 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 đã giải nén…” và chọn thư mục của tiện ích mở rộng.
3. Sau khi tiện ích mở rộng được tải, bạn sẽ thấy biểu tượng của nó trong thanh trình đơn.
4. Nhấp vào tiện ích 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 mở rộng Chrome của bạn
Sau khi hoàn thành tiện ích mở rộng của mình và sẵn sàng xuất bản, bạn cần tạo tài khoản nhà phát triển Chrome. Đó không phải là một quy trình chính xác đơn giản, nhưng Google cung cấp hướng dẫn đầy đủ để xuất bản tiện ích mở rộng Chrome của bạn tại đây.
Rõ ràng là còn rất nhiều việc bạn có thể làm với tiện ích mở rộng Chrome của mình, nhưng điều đó có phần 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 thứ mà tiện ích mở rộng Chrome có thể làm, hãy xem Hướng dẫn tiện ích mở rộng dành cho nhà phát triển Chrome của Google.