Viết extension cho Chrome(Phần 3): Tạo thông báo cho kipalog
Chrome Extension
7
Javascript
200
White

noname viết ngày 05/04/2016

Ở các bài trước mình đã giới thiệu cách viết 1 extension cho chrome như thế nào rồi, và cũng đã hướng dẫn làm extension phân trang cho Kipalog rồi. Bây giờ muốn mỗi khi kipalog có thông báo hay có bài mới thì mình muốn nó gửi thông báo về cho mình trên browser, như hình dưới đây:
Thông báo mới
Bài viết mới

Bạn có thể xem lại code mình đã viết ở đây nhé: https://github.com/dieuhd/Kipalog-Ext
Đầu tiên, để có thể push notification thì cần quyền: notifications của browser, thêm quyền này vào file manifest.json:

"permissions": [
    "notifications",
    "cookies",
    "management",
    "storage",
    "*://kipalog.com/*"
  ]

Tiếp theo chúng ta sẽ viết code vào file background.js:

  • Hàm lấy data từ các API của kipalog:
function kipalog_call_api(url, callback,method="GET",headers={}) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(data) {
      if (xhr.readyState == 4) {
        if (xhr.status == 200) {
          var data = JSON.parse(xhr.responseText);
          callback(data);
        } else {
          callback(null);
        }
      }
    }
    xhr.open(method, url, true);
    for(var header in headers) {
        xhr.setRequestHeader(header, headers[header]);
    }
    xhr.send();
}
  • Hàm push notifications:
var KIPALOG_URL = "http://kipalog.com";
function notifications(id, title, message, icon_url) {
  if (Notification.permission !== "granted")
    Notification.requestPermission();
  else {
    var notification = new Notification(title , {
      icon: icon_url,
      body: message,
    });
    // xử lý sự kiện khi click vào thông báo
    notification.onclick = function () {
        // url của kipalog để update status của notification và redirect tới trang của event(post, user page ...)
        window.open(KIPALOG_URL + "/notifications/" + id + "/clear");
    };
  }
}

Nếu như bạn muốn sau khi click vào 1 notification update status của các notification thành checked hoặc là saw thì sử dụng thêm các API:
see_allclear_all, ví dụ seeAllNotification:

function setAllNotifications() {
    var url = KIPALOG_URL + "/notifications/see_all";
    chrome.cookies.get({url: KIPALOG_URL,name: "XSRF-TOKEN"},function(cookie){
        kipalog_call_api(url,function(data){
            console.info(data);
        }, "PATCH",{"X-XSRF-TOKEN": decodeURIComponent(cookie.value)});
    });
}

Bây giờ chúng ta tìm hiểu xem cái API notification của kipalog như thế nào?
Trong data trả về có 3 status: checked,saw,unchecked. Khi data trả về mà status là unchecked thì chúng ta sẽ gọi tới hàm notifications.
Nhưng do chúng ta ko biết là cái nào đã được push chưa nên ta sẽ lưu lại ở storage của browser, rỗi mỗi lần gọi thì check xem đã push chưa.
Vì Kipalog ko tạo 1 port để chuyển gửi data nên chúng ta sẽ dùng hàm setInterval để sau mỗi 10 phút chúng ta sẽ gọi đến api notification 1 lần để xử lý.
Các bạn có thể tham khảo thêm phần socketđây

setInterval(function(){
    chrome.storage.sync.set({"kipalog_notifications" : ""});
    chrome.storage.sync.get("kipalog_notifications",function(obj){
        console.log(obj);
        var last_kipalog_notifications = obj.kipalog_notifications;
        kipalog_call_api(KIPALOG_URL + "/notifications", function(data){
            var unchecked_notification = [];
            for(var i = 0; i < data.length; i++) {
                // chỉ push nhưng notification có status = unchecked
                if(data[i].status = "unchecked"){
                    var event_id = data[i].id;
                    var message = data[i].user.name  + data[i].message + " " + data[i].info;
                    var icon_url = data[i].user.avatar_url_path;
                    var event_url = data[i].endpoint;
                    if (last_kipalog_notifications.search("[" + event_id + "]" == -2)){
                        if(icon_url.search("http://") == -1 && icon_url.search("https://") == -1) {
                            icon_url = KIPALOG_URL + icon_url;
                        }
                        notifications(event_id, "Thông báo mới", message, icon_url, KIPALOG_URL + event_url)
                    }
                    unchecked_notification.push("[" + event_id+ "]");
                }
            }
            // lưu lại những notification đã push.
            chrome.storage.sync.set({"kipalog_notifications" : unchecked_notification.join()});
        })
    });

}, 600000);

Cuối cùng reload lại trang Extension trên browser của mình để xem kết quả nhé.
Nếu bạn nào chưa biết cách add vào Extension cho chrome thì xem lại các bài trước nhé.
Toàn bộ code phần này ở đây nhé :
https://github.com/dieuhd/Kipalog-Ext/commit/77d7ae440dd853ea4caa232a8cd8bde6ea89f931

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

noname

5 bài viết.
62 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
48 8
Có khi nào bạn muốn thay đổi 1 phần giao diện của website nào đó chưa ? Ví dụ bây giờ ko thích click vào "Xem tiếp" của Kipalog nữa. Mà thay vào đ...
noname viết hơn 2 năm trước
48 8
White
25 6
(Link) mình đã giới thiệu qua cái cấu trúc của 1 extension(viết tắt Ext) cho chrome như thế nào rồi. Hôm nay mình giải thích và làm từng bước, làm ...
noname viết hơn 2 năm trước
25 6
White
19 1
Dạo này đang ngồi nghịch thằng Angular2, thấy có khá nhiều cái hay, 1 trong số đó là có thể dùng Typescripts để code thay cho js, mặc dù khì chạy t...
noname viết gần 2 năm trước
19 1
Bài viết liên quan
White
25 6
(Link) mình đã giới thiệu qua cái cấu trúc của 1 extension(viết tắt Ext) cho chrome như thế nào rồi. Hôm nay mình giải thích và làm từng bước, làm ...
noname viết hơn 2 năm trước
25 6
White
12 1
(Ảnh) Trước đây tớ hay dùng localStorage để tạo flag đánh dấu khi nào người dùng vừa mới cài đặt extension của mình. Và sau này khi ngó qua mã ngu...
Juno_okyo viết hơn 1 năm trước
12 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
5 bài viết.
62 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!