Chỉ dẫn viết Extension Chrome trong 10 phút!

Giả dụ bạn cảm thấy nhàm chán lúc bắt buộc lặp đi lặp lại 1 số tác vụ trên trình thông qua Chrome, bạn có thể tạo 1 Extension Chrome để tự động hoá công việc đấy!

Tìm hiểu về Extension Chrome

Extension Chrome là gì?

Extension Chrome hay tiện ích mở rộng cho Chrome, là những trang net được tạo bằng HTML, CSS và JavaScript nhằm để lưu lại trong trình thông qua Chrome. Bạn có thể cài đặt và dùng những Extension thông qua Shop Chrome.

Sự khác biệt chính giữa web site thông thường và Extension Chrome là: Extension Chrome có những chức năng mở rộng có khả năng tương trợ bạn. Bạn cũng có thể hiểu Extension là 1 đoạn mã dùng để mở rộng chức năng cho Chrome.

Thí dụ:

  • AdBlock tương trợ việc chặn pr khó chịu trên gần như những web site.
  • Google Dịch để tương trợ dịch từ tiếng Anh.
  • SCheckPro để đánh giá đạo văn
  • SwiftRead để tương trợ đọc nội dung trên trang net nhanh hơn.

Vì sao nên tạo Extension Chrome?

  • Chrome chiếm tới 64.92% thị phần và đứng prime 1 trình thông qua được dùng nhiều nhất trên thế giới.
  • Bạn muốn học tập để phát triển thành 1 lập trình viên net chuyên nghiệp, học những ngôn ngữ HTML, CSS và JavaScript cũng sẽ tương trợ bạn siêu nhiều đấy!
  • 1 Extension có khả năng tự động thực hành những công việc đơn giản sẽ giúp bạn cảm giác đỡ nhàm chán hơn lúc bắt buộc tự thực hành chúng.
  • Bạn muốn thêm những tính năng khác cho trình thông qua Chrome của bạn trở nên dễ dùng hơn? Hãy tạo 1 Extension ngay đi nhé!
  • Extension cho Chrome đơn giản, dễ thực hành hơn những ứng dụng, phần mềm. Bên cạnh ra, chúng còn siêu dễ để nâng cấp, sửa chữa trong thời kì ngắn.
  • Bạn có thể nhận được tiền ủng hộ từ người dùng giả dụ Extension của bạn hay và hữu dụng có họ đấy!
Xem Thêm  Iron Fish là gì? Toàn tập về tiền điện tử IRON Token

Chỉ dẫn viết Extension Chrome trong 7 bước

Chuẩn bị tri thức và thời kì

Bước trước tiên chắc chắn là bạn sẽ cần bắt buộc chuẩn bị tri thức về 3 ngôn ngữ lập trình chính bao gồm: HTML, CSS và JavaScript.

Bạn cũng sẽ cần bắt buộc cài đặt trình thông qua Chrome vào máy tính của mình.

Cam kết “chi trả” thời kì: dù Tino Group có nhắc tới việc Extension siêu dễ tạo ra nhưng để tạo ra 1 Extension “thực thụ” bạn cũng sẽ bắt buộc tốn siêu nhiều thời kì đấy!

Xác định chức năng bạn muốn tạo ra

Tiếp theo, lúc đã có những tri thức và cam kết thời kì để học tập, bạn sẽ cần bắt buộc xác định: bạn tạo ra Extension có mục đích gì? Tino Group gợi ý 1 số câu hỏi giúp bạn dễ xác định hơn nhé:

  • Chức năng của Extension ấy là gì?
  • Giao diện của Extension ra sao?
  • Bạn muốn kiếm tiền từ Extension ấy hay ko?
  • Giả dụ bạn muốn kiếm tiền, chức năng của Extension ấy giúp nhiều người mua giải quyết vấn đề hay ko?
  • Có nhiều Extension có chức năng tương tự hay chưa?

Lúc có được câu trả lời thỏa đáng về mục đích, chắc chắn bạn sẽ tự mình vạch ra được lộ trình phát triển thành cho chính bản thân và Extension của mình.

Có vẻ công việc cần làm cho sẽ siêu nhiều và siêu tốn thời kì. Vì vậy, Tino Group sẽ chỉ dẫn Extension Chrome cho bạn có chức năng đơn giản là hiển thị màu nền trang net để khởi đầu làm cho quen nhé!

Tạo Extension Manifest

Trong Extension Chrome, Manifest là khuôn sườn cho Extension. Tệp này vô cùng quan yếu và sẽ tương trợ để Extension có thể hoạt động chính xác nhất trên Chrome.

Bạn sẽ cần bắt buộc tạo 1 file notepad đặt tên là manifest.json và cho vào file của bạn 4 dòng code như sau:

Xem Thêm  Cream V2 - Làn gió mới trong DeFi Lending (Phần 1)

{ “identify”: “Extension mau”, “description”: “Dung Extension!”, “model”: “1.0”, “manifest_version”: 3 }

Tải Extension lên Chrome

Dù chỉ có 4 dòng code, bạn đã có 1 Extension rồi đấy! Giờ chúng ta sẽ tải Extension để chắc chắn Extension của bạn hoạt động nhé!

Bước 1: truy cập vào Chrome://Extensions

Bước 2: nhấn vào Developer mode/Chế độ dành cho nhà phát triển thành

Bước 3: nhấn vào Load unpacked/Tiện ích đã giải nén

Bước 4: chọn file của bạn và nhấn Tải lên. Giả dụ Extension của bạn hợp lệ sẽ được tải lên như ảnh bên dưới

Thêm chức năng/performance cho Extension

Mặc dầu Extension 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 1 số giá trị màu sắc nền vào trong Extension.

“background”: { “service_worker”: “background.js” }

Code toàn bộ:

{ “identify”: “Extension mau”, “description”: “Dung Extension!”, “model”: “1.0”, “manifest_version”: 3, “background”: { “service_worker”: “background.js” } }

Lúc này, Extension của bạn đã có 1 service employee lúc bạn tải lại Extension, Chrome sẽ tự động nhận diện những chỉ dẫn hay những sự kiện quan trong Chrome cần xử lý.

Bước 2: ta sẽ cần thêm 1 đoạn code để Chrome hiểu rằng cần bắt buộc xử lý runtime.onInstalled trong background script:

let shade = ‘#3aa757’; Chrome.runtime.onInstalled.addListener(() => { Chrome.storage.sync.set({ shade }); console.log(‘Default background shade set lớn %cgreen’, `shade: ${shade}`); });

Bước 3: gần như những API sẽ cần bắt buộc đăng ký trong permissions của Manifest. Vì vậy, chúng ta sẽ thêm 1 dòng code vào dưới phần background.js:

{ “identify”: “Extension mau”, “description”: “Dung Extension!”, “model”: “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ó 1 trường mới có hợp tác màu xanh lam hay chưa. Giả dụ có, chúc mừng ấy chính là 1 service employee của bạn.

Lúc nhấp vào hyperlink màu xanh nước biển, bạn sẽ thấy phần nền mặc định được chuyển thành xanh lá.

Tạo UI cho Extension

Bạn đã có Extension, đã có chức năng. Nhưng giao diện của Extension là chưa có gì cả. Vì vậy, chúng ta sẽ thêm 1 số thứ để “tô điểm” cho ứng dụng:

Bước 1: bạn sẽ cần tạo 1 file popup.html và nhập code sau vào:

Xem Thêm  NAT là gì? Cấu hình NAT ra Web như thế nào?

<!DOCTYPE html> <html> <head> <hyperlink rel=”stylesheet” href=”button.css”> </head> <physique> <button id=”changeColor”></button> </physique> </html>

Bước 2: bạn sẽ cần mở file manifest.json và khai báo popup.html.

“motion”: { “default_popup”: “popup.html” }

Bước 3: tập lệnh này sẽ tham chiếu tới 1 file CSS bạn có thể đặt tên là button.css cho dễ nhớ và thêm dòng code sau vào:

button { top: 30px; width: 30px; define: none; margin: 10px; border: none; border-radius: 2px; } button.present { box-shadow: 0 0 0 2px white, 0 0 0 4px black; }

Bước 4: bạn sẽ cần bắt buộc tải hình ảnh icon tại đâythêm 1 script hình ảnh vào trong motion ở bước 2 như sau:

“default_icon”: { “16”: “/pictures/get_started16.png”, “32”: “/pictures/get_started32.png”, “48”: “/pictures/get_started48.png”, “128”: “/pictures/get_started128.png” }

Bước 5: khai báo hình ảnh icon để hiển thị trên Chrome:

“icons”: { “16”: “/pictures/get_started16.png”, “32”: “/pictures/get_started32.png”, “48”: “/pictures/get_started48.png”, “128”: “/pictures/get_started128.png” }

Bước 6: lưu lại và mở thử. Bạn có thể tìm thấy Extension của bạn ở phía bên bắt buộc của ô liên hệ net.

Lúc nhấn vào Extension, bạn sẽ thấy 1 ô vuông bé hiển thị màu nền của trang net! Chúc mừng! Bạn đã hoàn thành xuất sắc việc tạo 1 Extension rồi đấy! Giả dụ bạn muốn thêm những chức năng khác để Extension của bạn trông chuyên nghiệp hơn bạn có thể tìm hiểu thêm có Google tại đây.

Vậy là chúng ta đã hoàn thành phần chỉ dẫn viết Extension Chrome chỉ trong 10 phút rồi! Trong quá trình thực hành, có thể bạn mắc bắt buộc sai sót nào ấy. 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 kì để họ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ề chỉ dẫn viết Extension Chrome

CÔNG TY CỔ PHẦN TẬP ĐOÀN TINO

  • Trụ sở chính: L17-11, Tầng 17, Tòa nhà Vincom Heart, Số 72 Lê Thánh Tôn, Phường Bến Nghé, Quận 1, Thành phố Hồ Chí MinhVăn phòng đại diện: 42 Trần Phú, Phường 4, Quận 5, Thành phố Hồ Chí Minh
  • Điện thoại: 0364 333 333Tổng đài miễn phí tổn: 1800 6734
  • Electronic mail: gross [email protected]
  • Web site: www.tino.org