Javascript ứng dụng chrome

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

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