Tạo tiện ích mở rộng Chrome là một quá trình khá đơn giản. Khi hoàn tất, bạn sẽ có thể sử dụng nó trên máy tính của mì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 tiện ích mở rộng có thể hoạt động hoàn toàn. Chúng tôi sẽ xem xét tất cả những điều này bên dưới, bao gồm cả cách làm cho tiện ích mở rộng 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ẻ nó với bất kỳ ai khác.
Tạo một tiện ích mở rộng Chrome phức tạp là một quá trình chi tiết hơn nhiều so với những gì bạn sẽ thấy bên dưới, nhưng quy trình chung là giống nhau. Hãy tiếp tục đọc để tìm hiểu cách tạo tiện ích mở rộng của Chrome mà bạn có thể bắt đầu sử dụng ngay hôm nay.
Mẹo :Để xem tiện ích mở rộng của riêng bạn có thể tuyệt vời như thế nào, hãy xem các tiện ích mở rộng Chrome tuyệt vời này.
Cách tạo tiện ích mở rộng Chrome
Sử dụng hướng dẫn này, bạn sẽ tạo một tiện ích mở rộng Chrome đơn giản liệt kê một số trang web yêu thích của bạn. Nó hoàn toàn có thể tùy chỉnh và thực sự dễ cập nhật.
Đây là việc cần làm:
- Tạo một thư mục chứa tất cả các tệp tạo nên phần mở rộng.
- Tạo các tệp cơ sở mà tiện ích mở rộng 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, sau đó dán tất cả những thứ sau vào đó, hãy nhớ lưu nó khi bạn hoàn tất.
<!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> 
Hãy thoải mái chỉnh sửa các liên kết và văn bản liên kết hoặc nếu bạn muốn tạo tiện ích mở rộng Chrome chính xác như hiện tại, chỉ cần giữ nguyên mọi thứ.
- 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,
“tên”:“Trang web Yêu thích”,
“description”:“Tất cả các trang web yêu thích của tôi.”,
“phiên bản”:“1.0”,
“biểu tượng”:{
“16”:“icon.png”,
“32”:“icon.png”,
“48”:“icon.png”,
“128”:“icon.png”
},
“nền”:{
“trang”:”background.html”
},
“browser_action”:{
“default_icon”:“icon.png”,
“default_title”:“Trang web yêu thích”,
“default_popup”:“popup.html”
}
}
Các vùng có thể ăn được của mã này bao gồm tên , mô tả và default_title .
- Mở styles.css và dán đoạn mã sau. Đây là thứ trang trí menu bật lên để trông hấp dẫn hơn nhiều và thậm chí dễ sử dụng hơn.
#myUL {
list-style-type:none;
phần đệm:0;
lợi nhuận:0;
chiều rộng:300px;
}
#myUL li a {
border:1px solid #ddd;
margin-top:-1px;
màu nền:# f6f6f6;
padding:12px;
trang trí văn bản:không có;
font-size:18px;
màu:đen;
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 tệp CSS. Hãy thử với các tùy chọn này sau khi tạo tiện ích mở rộng Chrome của bạn để tùy chỉnh nó theo ý thích của bạn.
- Tạo biểu tượng cho tiện ích mở rộng và đặt tên là icon.png . Đặt nó vào thư mục tiện ích mở rộng Chrome của bạn. Như bạn có thể thấy trong đoạn mã trên, bạn có thể tạo một biểu tượng riêng cho các kích thước đó:16 × 16 pixel, 32 × 32, v.v.
Mẹo: Google có thêm thông tin về cách tạo tiện ích mở rộng Chrome. Có các ví dụ và tùy chọn nâng cao khác ngoài các bước đơn giản mà chúng tôi đã trình bày ở đây.
Cách thêm tiện ích mở rộng tùy chỉnh vào Chrome
Bây giờ bạn đã tạo tiện ích mở rộng Chrome, đã đến lúc thêm tiện ích này vào trình duyệt để bạn thực sự có thể sử dụng tất cả các tệp bạn vừa tạo. Cài đặt tiện ích mở rộng tùy chỉnh bao gồm một quy trình khác với cách bạn cài đặt tiện ích mở rộng Chrome thông thường.
- Từ trình đơn Chrome, đi tới Công cụ khác > Tiện ích mở rộng . Hoặc nhập chrome:// extensions / trên thanh địa chỉ.
- Chọn nút bên cạnh Chế độ nhà phát triển nếu nó chưa được chọn. Thao tác này sẽ bật một chế độ đặc biệt cho phép bạn nhập các tiện ích mở rộng Chrome của riêng mình.
- Sử dụng chức năng Tải đã giải nén ở đầu trang đó để chọn thư mục bạn đã tạo trong 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. Nếu không, tiện ích mở rộng Chrome được tạo tùy chỉnh của bạn sẽ hiển thị cùng với bất kỳ tiện ích mở rộng nào khác mà bạn có ở góc trên cùng bên phải của trình duyệt.
Chỉnh sửa tiện ích mở rộng Chrome của bạn
Giờ đây, tiện ích mở rộng Chrome của bạn đã có thể sử dụng được, bạn có thể thực hiện các thay đổi để biến nó thành của riêng mình.
Tệp styles.css kiểm soát cách phần mở rộng xuất hiện, vì vậy bạn có thể điều chỉnh kiểu danh sách tổng thể và thay đổi màu hoặc loại phông chữ. W3Schools là một trong những tài nguyên tốt nhất để tìm hiểu về tất cả những điều khác nhau mà 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 nhiều trang web hoặc xóa những trang hiện có, hãy chỉnh sửa tệp popup.html. Chỉ cần đảm bảo giữ các chỉnh sửa của bạn chỉ URL và tên. Tất cả các ký tự khác, như