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.
tiền boa: Để 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 tuyệt vời này của Chrome.
Nội dung bài viết
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 và sau đó dán tất cả những thứ sau vào đó, đảm bảo 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="https://helpdeskgeek.com/how-to/how-to-make-a-simple-chrome-extension/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,
“Name”: “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”
},
“lý lịch”: {
“Trang”: ”background.html”
},
“Browser_action”: {
“Default_icon”: “icon.png”,
“Default_title”: “Trang web yêu thích”,
“Default_popup”: “popup.html”
}
}
Các lĩnh vực ăn được của mã này bao gồm Tên, sự miêu tảvà default_title.
- Mở styles.css và dán đoạn mã sau. Đây là những gì trang trí menu bật lên để làm cho 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;
đệm: 0;
lề: 0;
chiều rộng: 300px;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px;
màu nền: # f6f6f6;
đệm: 12px;
văn bản-trang trí: không có;
font-size: 18px;
màu đen;
hiển thị: khối;
font-family: ‘Noto Sans’, sans-serif;
}
#myUL li a: hover: not (.header) {
màu nền: #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 và đặt tên cho nó 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.
Tiền boa: Google có thêm thông tin về cách tạo tiện ích mở rộng Chrome. Có các ví dụ khác và các tùy chọn nâng cao vượt ra 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 nó 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ừ menu Chrome, đi tới Thêm công cụ > Phần mở rộng. Hoặc, gõ chrome: // extensions / trong 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 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 nguồ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 nhân vật khác, như
