Tiện ích mở rộng của Chrome: Giao tiếp giữa Popup và Content Script

Tram Ho

1. Giới thiệu

Trong bài đăng trước Tiện ích mở rộng Chrome: Bắt đầu , tôi đã giới thiệu tiện ích chrome là gì và cách viết tiện ích chrome nhỏ nhưng rất hữu ích. Trong bài đăng này, chúng tôi sẽ nâng cấp trò chơi của chúng tôi một chút bằng cách viết một phần mở rộng chrome phức tạp hơn. Phần mở rộng cuối cùng sẽ như thế này:

Tiện ích mở rộng này sẽ giúp chúng tôi tự động gửi một tin nhắn nhất định đến một phòng nhất định của trang web Chatwork. Mã nguồn đầy đủ có thể được tìm thấy ở đây: https://github.com/nguyenyou0812/auto-send-message

2. Khái niệm chính

2.1. chrome.browserAction

Sử dụng các hành động của trình duyệt để đặt các biểu tượng vào thanh công cụ chính của Google Chrome, ở bên phải thanh địa chỉ. Ngoài biểu tượng của nó, một hành động của trình duyệt có thể có một chú giải công cụ, huy hiệu và cửa sổ bật lên.

Nếu một hành động trình duyệt có cửa sổ bật lên, cửa sổ bật lên sẽ xuất hiện khi người dùng nhấp vào biểu tượng. Cửa sổ bật lên có thể chứa bất kỳ nội dung HTML nào bạn thích và nó tự động có kích thước phù hợp với nội dung của nó.

Để thêm cửa sổ bật lên vào hành động trình duyệt của bạn, hãy tạo tệp HTML có nội dung của cửa sổ bật lên. Chỉ định tệp HTML trong trường default_popup của browser_action trong tệp kê khai hoặc gọi phương thức browserAction.setPopup.

2.2. Tập lệnh nội dung

Kịch bản nội dung là các tệp chạy trong ngữ cảnh của các trang web. Bằng cách sử dụng Mô hình Đối tượng Tài liệu chuẩn (DOM), họ có thể đọc chi tiết các trang web mà trình duyệt truy cập, thay đổi chúng và chuyển thông tin đến tiện ích mở rộng chính của chúng.

Các tập lệnh nội dung có thể truy cập API Chrome được sử dụng bởi tiện ích mở rộng gốc của chúng bằng cách trao đổi tin nhắn với tiện ích mở rộng. Họ cũng có thể truy cập URL của tệp của tiện ích mở rộng bằng chrome.r Yoon.getURL () và sử dụng kết quả giống như các URL khác.

2.3. Chrome.tabs

Sử dụng API chrome.tabs để tương tác với hệ thống tab của trình duyệt. Bạn có thể sử dụng API này để tạo, sửa đổi và sắp xếp lại các tab trong trình duyệt.

bạn có thể sử dụng hầu hết các phương thức và sự kiện của chrome.tabs mà không cần khai báo bất kỳ quyền nào trong tệp kê khai của tiện ích mở rộng. Tuy nhiên, nếu bạn yêu cầu quyền truy cập vào các thuộc tính url, cấp phátUrl, tiêu đề hoặc favIconUrl của tab.Tab, bạn phải khai báo quyền "tab" trong tệp kê khai

3. Thực hiện

Tạo một thư mục có tên AuSeMe và thêm các tệp sau. Sau đó, tải tiện ích mở rộng này trong chế độ nhà phát triển tiện ích chrome.

manifest.json

popup.html

popup.js

contentScript.js

4. Kết luận

Trong bài đăng này, tôi chỉ cho bạn cách giao tiếp giữa cửa sổ bật lên và tập lệnh nội dung bằng cách sử dụng kỹ thuật Truyền thông điệp . Hy vọng, hướng dẫn nhỏ này sẽ cung cấp cho bạn một số ý tưởng về cách kết nối các thành phần mở rộng chrome có sẵn và cũng truyền cảm hứng cho bạn để viết nhiều phần mở rộng chrome lớn, mạnh mẽ hơn.

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo