Tạo Chrome Extension Gọi Dữ Liệu Từ Server

Ngày cập nhật: 20-02-2018 | Lượt xem: 9774 | Phân loại: Trình duyệt

Bạn có thể tìm kiếm thông tin chi tiết về cách tạo một tiện ích (extension) Chrome và kết nối với máy chủ để lấy dữ liệu. Một trong những bước quan trọng là khai báo các miền (domain) được phép truy cập trong tệp manifest.json. Điều này giúp trình duyệt xác nhận rằng bạn đang sử dụng API một cách hợp lệ.

Trong tệp manifest.json, bạn cần thêm tên miền mà tiện ích của bạn sẽ gọi đến vào mảng permissions. Ví dụ:

1
2
3

"permissions": [
  "
],

Điều này cho phép tiện ích gửi yêu cầu HTTP đến địa chỉ trên.

Bước 2: Viết logic xử lý sự kiện

Sau khi đã thiết lập đúng quyền, bạn có thể bắt đầu viết đoạn mã JavaScript để thực hiện yêu cầu từ phía client sang server. Dưới đây là một ví dụ đơn giản sử dụng XMLHttpRequest:

1
2
3
4
5
6
7
8
9

var xhr = new XMLHttpRequest();
xhr.open("GET", " true);
xhr.onreadystatechange = function() {
 if (xhr.readyState == 4 && xhr.status == 200) {
  document.getElementById("resp").innerHTML = xhr.responseText;
  // Bạn có thể xử lý dữ liệu ở đây
 }
};
xhr.send();

Chú ý kiểm tra trạng thái readyState == 4 và status == 200 để đảm bảo rằng phản hồi từ server đã thành công trước khi tiến hành thao tác nào đó.

Bước 3: Sử dụng jQuery (tùy chọn)

Nếu bạn muốn dùng jQuery để thực hiện AJAX thay vì dùng XMLHttpRequest, bạn có thể dễ dàng làm như sau:

1. Thêm thư viện jQuery vào file HTML của extension:

   1	<script src="

   Copy

2. Sau đó, bạn có thể sử dụng hàm $.ajax() hoặc $.get() để gọi API:

1
2
3

$.get(" function(data) {
 document.getElementById("resp").innerHTML = data;
});

Việc sử dụng jQuery giúp bạn viết code ngắn gọn hơn và dễ hiểu hơn, đặc biệt nếu bạn đã quen thuộc với thư viện này.

Tài liệu

Bạn có thể tìm hiểu thêm về cách cài đặt và sử dụng XMLHttpRequest trong Chrome Extensions tại:

Hy vọng bài viết này sẽ hỗ trợ bạn xây dựng được một tiện ích Chrome mạnh mẽ và linh hoạt!