Tạo một Chrome extension là một quy trình khá đơn giản. Khi bạn xong, bạn sẽ có thể dùng nó trên máy tính để nâng cao cách trình duyệt hoạt động.
Có một số thành phần cơ bản mà trình duyệt yêu cầu trước khi extension có thể hoạt động đầy đủ. Chúng ta sẽ đi qua tất cả điều này dưới đây, bao gồm cách lấy extension tùy chỉnh của bạn hoạt động trong Chrome mà không cần tải lên hoặc chia sẻ với bất kỳ ai khác.
Xây dựng một Chrome extension phức tạp là quy trình chi tiết hơn nhiều so với những gì bạn sẽ thấy dưới đây, nhưng quy trình chung là giống nhau. Đọc tiếp để học cách tạo Chrome extension mà bạn có thể bắt đầu dùng hôm nay.
Mẹo: Để thấy extension của riêng bạn có thể tuyệt vời như thế nào, hãy xem các Chrome extension tuyệt vời này.
Cách tạo Chrome Extension
Dùng hướng dẫn này, bạn sẽ tạo một Chrome extension đơn giản liệt kê một số trang web yêu thích của bạn. Nó hoàn toàn tùy chỉnh và rất dễ cập nhật.
Đây là những gì cần làm:
- Tạo một thư mục sẽ chứa tất cả file cấu thành extension.
- Tạo các file cơ sở mà extension này yêu cầu: manifest.json, popup.html, background.html, styles.css.
- Mở popup.html trong trình soạn thảo văn bản và sau đó dán tất cả nội dung sau vào đó, đảm bảo lưu khi bạn xong.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Favorite Sites</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <ul id="myUL"> <li><a href="https://helpdeskgeek.com/" target="_blank">Help Desk Geek</a></li> <li><a href="https://www.online-tech-tips.com/" target="_blank">Online Tech Tips</a></li> <li><a href="https://thebackroomtech.com/" target="_blank">The Back Room Tech</a></li> </ul> </body> </html>
Thoải mái chỉnh sửa liên kết và văn bản liên kết, hoặc nếu bạn muốn làm Chrome extension đúng như chúng tôi, chỉ cần giữ mọi thứ như cũ.
- Mở manifest.json trong trình soạn thảo văn bản và sao chép/dán nội dung sau:
{
"update_url": "https://clients2.google.com/service/update2/crx",
"manifest_version": 2,
"name": "Favorite Sites",
"description": "All my favorite websites.",
"version": "1.0",
"icons": {
"16": "icon.png",
"32": "icon.png",
"48": "icon.png",
"128": "icon.png"
},
"background": {
"page": "background.html"
},
"browser_action": {
"default_icon": "icon.png",
"default_title": "Favorite Sites",
"default_popup": "popup.html"
}
}
Các khu vực có thể chỉnh sửa của code này bao gồm name, description, và default_title.
- Mở styles.css và dán code sau. Đây là thứ trang trí menu popup để làm cho nó hấp dẫn hơn và thậm chí dễ dùng hơn.
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
width: 300px;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px;
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block;
font-family: 'Noto Sans', sans-serif;
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
Có rất nhiều thứ bạn có thể thay đổi trong file CSS. Hãy thử nghiệm các tùy chọn này sau khi tạo Chrome extension để tùy chỉnh theo ý thích.
- Tạo một biểu tượng (icon) cho extension và đặt tên icon.png. Đặt nó trong thư mục Chrome extension của bạn. Như bạn thấy trong code trên, bạn có thể tạo biểu tượng riêng cho các kích thước đó: 16×16 pixel, 32×32, và cứ thế.
Mẹo: Google có thêm thông tin về tạo Chrome extension. Có ví dụ khác và tùy chọn nâng cao vượt xa các bước đơn giản chúng tôi đã chỉ ở đây.
Cách thêm Extension tùy chỉnh vào Chrome
Bây giờ bạn đã tạo Chrome extension, đã đến lúc thêm nó vào trình duyệt để bạn thực sự có thể dùng tất cả file bạn vừa tạo. Cài đặt extension tùy chỉnh liên quan đến quy trình khác với cách bạn cài đặt Chrome extension bình thường.
- Từ menu Chrome, vào More tools (Công cụ khác) > Extensions (Tiện ích mở rộng). Hoặc, nhập chrome://extensions/ vào thanh địa chỉ.
- Chọn nút bên cạnh Developer mode (Chế độ nhà phát triển) nếu nó chưa được chọn. Điều này sẽ bật một chế độ đặc biệt cho phép bạn nhập Chrome extension của riêng bạn.
- Dùng nút Load unpacked (Tải giải nén) ở trên cùng trang đó để chọn thư mục bạn tạo ở Bước 1 trên.
- Chấp nhận bất kỳ lời nhắc nào nếu bạn thấy chúng. Ngay cả thế, Chrome extension tùy chỉnh của bạn sẽ hiện lên cùng với các cái khác bạn có ở góc trên bên phải của trình duyệt.
Chỉnh sửa Chrome Extension của bạn
Bây giờ Chrome extension của bạn có thể dùng được, bạn có thể làm thay đổi để làm nó trở thành của riêng bạn.
File styles.css kiểm soát extension trông như thế nào, vì vậy bạn có thể điều chỉnh kiểu danh sách tổng thể và thay đổi màu font hoặc kiểu. W3Schools là một trong những tài nguyên tốt nhất để học về tất cả những thứ khác nhau bạn có thể làm với CSS.
Để thay đổi thứ tự các trang web được liệt kê, hoặc để thêm hoặc xóa trang web hiện có, chỉnh sửa file popup.html. Chỉ chắc chắn giữ chỉnh sửa của bạn chỉ ở URL và tên. Tất cả ký tự khác, như <li> và <html>, là bắt buộc và không nên thay đổi. HTML Tutorial trên W3Schools là nơi tốt để học thêm về ngôn ngữ đó.