Hướng dẫn viết Extension Chrome trong 10 phút!

Nếu bạn cảm thấy nhàm chán khi phải lặp đ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 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 web được tạo bằng HTML, CSS và JavaScript nhằm để lưu lại trong trình duyệt Chrome. Bạn có thể cài đặt và sử dụng các Extension thông qua Cửa hàng Chrome.

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

Ví dụ :

  • AdBlock hỗ trợ việc chặn quảng cáo khó chịu trên hầu hết các website.
  • 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.

huong-dan-viet-extension-chrome

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

  • Chrome chiếm đến 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, 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 Extension có khả năng tự động thực hiện những công việc đơn giản sẽ giúp bạn cảm giác đỡ nhàm chán 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 cho trình duyệt Chrome của bạn trở nên dễ sử dụng hơn? Hãy tạo một Extension ngay đi nhé!
  • Extension 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ễ để 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 Extension của bạn hay và hữu dụng với họ đấy!

Hướng dẫn viết Extension Chrome trong 7 bước

Chuẩn bị kiến thức và thời gian

Bước tiên phong chắc như đinh là bạn sẽ cần phải sẵn sàng chuẩn bị kiến thức và kỹ năng về 3 ngôn từ lập trình chính gồm có : HTML, CSS và JavaScript .
Bạn cũng sẽ cần phải thiết lập trình duyệt Chrome vào máy tính của mình .
Cam kết “ chi trả ” thời hạn : 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ẽ phải tốn rất nhiều thời hạn đấy !
huong-dan-viet-extension-chrome

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 sẽ cần phải xác định: bạn tạo ra Extension với mục đích gì? Tino Group gợi ý một số câu hỏi giúp bạn dễ xác định hơn nhé:

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

Khi có được câu vấn đáp thỏa đáng về mục tiêu, chắc như đinh bạn sẽ tự mình vạch ra được lộ trình tăng trưởng cho chính bản thân và Extension của mình .
Có vẻ việc làm cần làm sẽ rất nhiều và rất tốn thời hạn. Vì vậy, Tino Group sẽ hướng dẫn Extension Chrome cho bạn với công dụng đơn thuần là hiển thị màu nền website để mở màn làm quen nhé !ADVERTISEMENT

Tạo Extension Manifest

Trong Extension Chrome, Manifest là khung sườn cho Extension. Tệp này cực kỳ quan trọng và sẽ tương hỗ để Extension hoàn toàn có thể hoạt động giải trí đúng chuẩn nhất trên Chrome .

Bạn sẽ cần phải 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:

     {   
       "name": "Extension mau",   
       "description": "Dung Extension!",   
       "version": "1.0",   
       "manifest_version": 3   
     }   

Tải Extension lên Chrome

Dù chỉ với 4 dòng code, bạn đã có 1 Extension rồi đấy ! Giờ tất cả chúng ta sẽ tải Extension để chắc như đinh Extension của bạn hoạt động giải trí 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

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. Nếu Extension của bạn hợp lệ sẽ được tải lên như ảnh bên dưới

huong-dan-viet-extension-chrome

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

Mặc dù Extension của bạn đã hoàn toàn có thể tải lên, nhưng chúng vẫn chưa có tính năng gì. Vì thế, tất cả chúng ta sẽ :

Bước 1: thêm một số giá trị màu sắc nền vào trong Extension.

"background": {   
         "service_worker": "background.js"   
       }   

Code vừa đủ :

 {   
       "name": "Extension mau",   
       "description": "Dung Extension!",   
       "version": "1.0",   
       "manifest_version": 3,   
       "background": {   
         "service_worker": "background.js"   
       }   
     }   

Lúc này, Extension của bạn đã có 1 service worker khi bạn tải lại Extension, Chrome sẽ tự động hóa nhận diện những hướng dẫn hay những sự kiện quan trong Chrome cần giải quyết và xử lý .

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

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 sẽ cần phải đă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:

{   
       "name": "Extension mau",   
       "description": "Dung Extension!",   
       "version": "1.0",   
       "manifest_version": 3,   
       "background": {   
         "service_worker": "background.js"   
       },   
      "permissions": ["storage"]   
     }   

Bây giờ, tất cả 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 link màu xanh lam hay chưa. Nếu có, chúc mừng đó chính là một service worker của bạn .
Khi nhấp vào link 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á .
huong-dan-viet-extension-chrome

Tạo UI cho Extension

Bạn đã có Extension, đã có tính năng. Nhưng giao diện của Extension là chưa có gì cả. Vì vậy, tất cả chúng ta sẽ thêm một số ít 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:



   
        
          
            
          
          
            
          
        

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

"action": {   
         "default_popup": "popup.html"   
       }   

Bước 3: tập lệnh này sẽ tham chiếu đến 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 {   
       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 sẽ cần phải tải hình ảnh icon tại đâythêm 1 script hình ảnh vào trong action ở bước 2 như sau:

"default_icon": {   
           "16": "/images/get_started16.png",   
           "32": "/images/get_started32.png",   
           "48": "/images/get_started48.png",   
           "128": "/images/get_started128.png"   
         }   

Bước 5: khai báo hình ảnh icon để 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: lưu lại và mở thử. Bạn có thể tìm thấy Extension của bạn ở phía bên phải của ô địa chỉ web.

Khi nhấn vào Extension, bạn sẽ thấy 1 ô vuông nhỏ hiển thị màu nền của website ! Chúc mừng ! Bạn đã triển khai xong xuất sắc việc tạo 1 Extension rồi đấy ! Nếu bạn muốn thêm những công dụng khác để Extension của bạn trông chuyên nghiệp hơn bạn hoàn toàn có thể tìm hiểu và khám phá thêm với Google tại đây .
huong-dan-viet-extension-chromeVậy là tất cả chúng ta đã hoàn thành phần hướng dẫn viết Extension Chrome chỉ trong 10 phút rồi ! Trong quy trình thực thi, hoàn toàn có thể bạn mắc phải sai sót nào đó. Tuy nhiên, bạn hoàn toàn có thể Google yếu tố của mình và liên tục cam kết về thời hạn để học tập đã đề ra nhé ! Chúc bạn thành công xuất sắc !
Bài viết có tìm hiểu thêm nội dung từ Google Developer .

Những câu hỏi thường gặp về hướng dẫn viết Extension Chrome

Code Extension Chrome tham khảo ở đâu?

Nếu bạn đang muốn tạo một Extension Chrome nhưng bạn không biết nên khởi đầu từ đâu, những mẫu ví dụ Chrome Extension của chính Google sẽ gợi ý cho bạn một số ít ý tưởng sáng tạo đấ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 khám phá thêm về Chrome và tạo ra những Chrome Extension, bạn hoàn toàn có thể tìm hiểu thêm những tài liệu được viết rất chi tiết cụ thể bởi chính những kỹ sư của Google tại đây .

Những Extension Chrome hay dùng để làm việc tại nhà?

Nếu bạn tìm những Extension Chrome hay để thao tác tại nhà, bạn hoàn toàn có thể chăm sóc đến 1 số ít Extension Chrome rất hay như sau :

  • Speedtest by Ookla: sử dụng để kiểm tra tốc độ mạng thường xuyên
  • BlockSite: Block Websites & Stay Focused: sử dụng để chặn những website nhằm tạo ra không gian làm việc yên tĩnh hơn cho chính bạn

Những Extension Chrome hay để học online?

Để học trực tuyến, bạn sẽ cần Google Meet hoặc Zoom, bạn hoàn toàn có thể tải 2 Extension :
nâng cao của Google Meet : tương hỗ những tính năng khác cho Meet .
Zoom Scheduler : tương hỗ lên lịch và nhắc lịch học trực tuyến cho bạn .

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

  • Trụ sở chính: L17-11, Tầng 17, Tòa nhà Vincom Center, Số 72 Lê Thánh Tôn, Phường Bến Nghé, Quận 1, Thành phố Hồ Chí Minh
    Vă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 333
    Tổng đài miễn phí: 1800 6734
  • Email: sales@tino.org
  • Website: www.tino.org

Source: https://wikifin.net
Category: Blog

Leave a Comment

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *