Nếu bạn cảm thấy chán nản khi phải lặp lại một số tác vụ trên trình duyệt Chrome, bạn có thể tạo một Chrome Extension để tự động hóa công việc đó.
Tìm hiểu về Tiện ích mở rộng của Chrome
Tiện ích mở rộng của Chrome là gì?
Tiện ích mở rộng Chrome hay tiện ích mở rộng tiện ích cho Chrome, là những trang web được tạo bằng HTML, CSS và JavaScript nhằm mục đích lưu lại trong trình duyệt Chrome. Bạn có thể cài đặt và sử dụng Tiện ích mở rộng thông qua Cửa hàng Chrome
Sự khác biệt chính giữa thông thường của trang web và tiện ích mở rộng của Chrome là. Tiện ích mở rộng Chrome có chức năng mở rộng khả năng hỗ trợ bạn. Bạn cũng có thể hiểu Tiện ích mở rộng là một đoạn mã được sử dụng để mở rộng chức năng cho Chrome
Ví dụ
- AdBlock hỗ trợ công việc chặn quảng cáo khó chịu trên hầu hết các trang web
- Google Dịch để hỗ trợ dịch từ tiếng Anh
- SCheckPro để kiểm tra đạo văn
- SwiftRead hỗ trợ đọc nội dung trên trang web nhanh hơn
Vì sao nên tạo tiện ích mở rộng cho Chrome?
- Chrome used to 64. 92% thị phần và đứng top 1 trình duyệt được sử dụng nhiều nhất trên thế giới
- Bạn muốn học tập để trở thành một lập trình viên web chuyên nghiệp, việc học các ngôn ngữ HTML, CSS và JavaScript cũng sẽ hỗ trợ bạn rất nhiều đấy.
- Một tiện ích mở rộng có khả năng tự động thực hiện những công việc đơn giản này sẽ giúp bạn cảm thấy đỡ nâng đỡ hơn khi phải tự thực hiện chúng
- Bạn muốn thêm các tính năng khác để trình duyệt Chrome của bạn trở nên dễ sử dụng hơn?
- Tiện ích mở rộng cho Chrome đơn giản, dễ thực hiện hơn các ứng dụng, phần mềm. Ngoài ra, chúng còn rất dễ dàng để nâng cấp, sửa chữa trong thời gian ngắn
- Bạn có thể nhận được tiền ủng hộ từ người sử dụng nếu Tiện ích mở rộng của bạn hay và hữu dụng với họ đấy
Hướng dẫn viết Tiện ích mở rộng Chrome trong 7 bước
Chuẩn kiến thức và thời gian
Bước đầu tiên chắc chắn là bạn sẽ cần phải chuẩn bị kiến thức về 3 ngôn ngữ lập trình bao gồm chính. HTML, CSS và JavaScript
Bạn cũng cần phải cài đặt trình duyệt Chrome vào máy tính của mình
Cam kết “chi trả” time. dù Tino Group có nhắc đến việc Extension rất dễ tạo ra nhưng để tạo ra một Extension “thực thụ” bạn cũng sẽ tốn rất nhiều thời gian đấy.
Xác định chức năng bạn muốn tạo ra
Tiếp theo, khi đã có những kiến thức và cam kết thời gian để học tập, bạn cần phải xác định. you create ra Extension với mục đích gì?
- Chức năng của tiện ích mở rộng đó là gì?
- Giao diện của extension ra sao?
- Bạn muốn kiếm tiền từ tiện ích mở rộng đó hay không?
- Nếu bạn muốn kiếm tiền, chức năng của Tiện ích mở rộng đó giúp nhiều người dùng giải quyết vấn đề hay không?
- Có nhiều tiện ích mở rộng có chức năng tương tự hay không?
- …
Khi có được câu trả lời xứng đáng về đích, chắc chắn bạn sẽ tự mình mơ mộng được lộ trình phát triển cho chính bản thân và phần mở rộng của mình
Có vẻ như công việc cần làm sẽ rất nhiều và rất tốn thời gian. Vì vậy, Tino Group sẽ hướng dẫn Extension Chrome cho bạn với chức năng đơn giản là hiển thị màu nền trang web để bắt đầu làm quen nhé.
QUẢNG CAO
Tạo Extension Manifest
Trong Tiện ích mở rộng Chrome, Manifest là khung sườn cho Tiện ích mở rộng. Tệp này cực kỳ quan trọng và sẽ hỗ trợ tiện ích mở rộng có thể hoạt động chính xác nhất trên Chrome
Bạn cần phải tạo 1 file notepad đặt tên là manifest. json and for your file 4 line code as after
{
"name": "Extension mau",
"description": "Dung Extension!",
"version": "1.0",
"manifest_version": 3
}
Tải Tiện ích mở rộng lên Chrome
Dù chỉ với 4 dòng mã, bạn đã có 1 Tiện ích mở rộng rồi đấy. Giờ chúng ta sẽ tải xuống Tiện ích mở rộng để đảm bảo rằng Tiện ích mở rộng của bạn đang hoạt động nhé
Bước 1. truy cập vào Chrome. // Tiện ích mở rộng
Bước 2. nhấn vào Chế độ nhà phát triển/Chế độ dành cho nhà phát triển
Bước 3. nhấn vào Load unpacked/Tiện ích giải nén
Bước 4. chọn tệp của bạn và nhấn Tải lên. Nếu Tiện ích mở rộng của bạn hợp lệ sẽ được tải lên như ảnh bên dưới
Add functions/function for Extension
Mặc dù tiện ích mở rộng của bạn đã có thể tải lên, nhưng chúng vẫn chưa có chức năng gì. Vì thế, chúng ta sẽ
Bước 1. thêm một số giá trị màu sắc nền vào trong Tiện ích mở rộng
"background": {
"service_worker": "background.js"
}
Full code
{
"name": "Extension mau",
"description": "Dung Extension!",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
}
}
Lúc này, Tiện ích mở rộng của bạn đã có 1 nhân viên dịch vụ khi bạn tải xuống Tiện ích mở rộng, Chrome sẽ tự động nhận diện các hướng dẫn hoặc các sự kiện quan trọng trong Chrome cần xử lý
Bước 2. ta sẽ cần thêm 1 đoạn mã để Chrome hiểu rằng cần phải xử lý thời gian chạy. onInstalled trong tập lệnh nền
let color = '#3aa757';
Chrome.runtime.onInstalled.addListener[[] => {
Chrome.storage.sync.set[{ color }];
console.log['Default background color set to %cgreen', `color: ${color}`];
}];
Bước 3. Hầu hết các API cần phải đăng ký trong quyền của Manifest. Vì vậy, chúng ta sẽ thêm 1 dòng mã vào bên dưới phần nền. js
{
"name": "Extension mau",
"description": "Dung Extension!",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"permissions": ["storage"]
}
Bây giờ chúng ta sẽ tải lại Extension và bạn quan sát xem đã có một trường mới với liên kết màu xanh lam hay chưa. Nếu có, chúc mừng đó chính là nhân viên phục vụ của bạn
Khi nhấp vào liên kết màu xanh nước biển, bạn sẽ thấy phần nền mặc định được chuyển thành màu xanh lá
Create UI for Extension
You have been Extension, has an function. Nhưng giao diện của tiện ích mở rộng không có gì cả. Vì vậy, chúng tôi sẽ bổ sung một số thứ cho “tô điểm” cho ứng dụng
Bước 1. bạn sẽ cần tạo 1 cửa sổ bật lên tệp. html and enter code after into
Bước 2. you will have to open file manifest. json và popup khai báo. html
"action": {
"default_popup": "popup.html"
}
Bước 3. tập lệnh này sẽ tham chiếu đến 1 tập tin CSS mà bạn có thể đặt tên là nút. css for easy memory and add line code after into
button {
height: 30px;
width: 30px;
outline: none;
margin: 10px;
border: none;
border-radius: 2px;
}
button.current {
box-shadow: 0 0 0 2px white,
0 0 0 4px black;
}
Bước 4. bạn cần tải biểu tượng hình ảnh tại đây và thêm 1 tập lệnh hình ảnh vào trong hành động ở bước 2 như sau
________số 8_______Bước 5. khai báo biểu tượng hình ảnh để hiển thị trên Chrome
"icons": {
"16": "/images/get_started16.png",
"32": "/images/get_started32.png",
"48": "/images/get_started48.png",
"128": "/images/get_started128.png"
}
Bước 6. save back and open try. Bạn có thể tìm thấy Tiện ích mở rộng của bạn ở bên phải của địa chỉ web ô
Khi nhấn vào Tiện ích mở rộng, bạn sẽ thấy 1 ô vuông nhỏ hiển thị màu nền của trang web. chúc mừng. Bạn đã hoàn thành xuất sắc công việc tạo 1 Tiện ích mở rộng rồi đó. Nếu bạn muốn thêm các chức năng khác để tiện ích mở rộng của bạn nhìn chuyên nghiệp hơn bạn có thể tìm hiểu thêm với Google tại đây
Vậy là chúng ta đã hoàn thành phần hướng dẫn viết Extension cho Chrome chỉ trong 10 phút rồi. Trong quá trình thực hiện, có thể bạn thắc mắc phải để lại sai sót nào đó. Tuy nhiên, bạn có thể Google vấn đề của mình và tiếp tục cam kết về thời gian để học các tập đề ra nhé. Chúc bạn thành công
Bài viết có tham khảo nội dung từ Google Developer
Những câu hỏi thường gặp về hướng dẫn viết Tiện ích mở rộng Chrome
Code Extension Chrome tham khảo ở đâu?
Nếu bạn đang muốn tạo một Tiện ích mở rộng Chrome nhưng bạn không biết nên bắt đầu từ đâu, thì các ví dụ ví dụ về Tiện ích mở rộng Chrome của chính Google sẽ gợi ý cho bạn một số ý tưởng đấy.
Tìm hiểu thêm tại Github Chrome Extensions samples
Tài liệu để tìm hiểu thêm về Chrome Extension ở đâu?
Nếu bạn muốn tìm hiểu thêm về Chrome và việc tạo ra các Tiện ích mở rộng của Chrome, bạn có thể tham khảo các tài liệu được viết rất chi tiết bởi chính các kỹ sư của Google tại đây
Những tiện ích mở rộng của Chrome hay dùng để làm việc tại nhà?
Nếu bạn tìm thấy những Tiện ích mở rộng Chrome hay để làm việc tại nhà, bạn có thể quan tâm đến một số Tiện ích mở rộng Chrome rất hay như sau