Cập nhật nút tiện ích động - cảm hứng bắt buộc

Question

Tôi đang xây dựng tiện ích mở rộng nơi tôi muốn có thể thêm công cụ ký hiệu vào nút tiện ích mở rộng khi phần mở rộng trong mã đã được kích hoạt. Tôi đã hy vọng tôi có thể thêm văn bản vào nút mở rộng (trên cùng bên phải)

Đây là một kịch bản đơn giản. Giả sử tiện ích mở rộng của tôi giám sát duyệt và nhận được url của tab, trong tiện ích của tôi, tôi có danh sách các miền cần xem.

Coi chừng những lĩnh www.website1.com www.website2.com

Nếu người dùng truy cập một tên miền trong danh sách theo dõi Tôi muốn biết điều này bằng cách nào đó, bằng cách thêm một số văn bản ở đâu đó - Tôi đã hy vọng ở trên cùng bên phải của trình duyệt, nơi các nút tiện ích mở rộng. Tôi không thực sự muốn sử dụng một cửa sổ thông báo như tôi muốn một cái gì đó không phô trương. Các văn bản mà tôi muốn hiển thị sẽ chỉ là một vài chữ cái nhưng khác nhau cho các url khác nhau.

Có ai có cảm hứng nào không?

Cảm ơn

Answer 1

Bạn có thể thay đổi biểu tượng mở rộng như thế này:

chrome.browserAction.setIcon({path: icon}); 

Ngoài ra còn có một 'huy hiệu' - hộp nhỏ qua biểu tượng mở rộng cho thấy ví dụ. số lượng tin nhắn chưa đọc trong phần mở rộng gmail. Bạn có thể vận dụng nó như thế này:

chrome.browserAction.setBadgeBackgroundColor({color:[190, 190, 190, 230]}); 
chrome.browserAction.setBadgeText({text:"?"}); 

Nó cũng có thể tạo ra biểu tượng động trên một yếu tố canvas và sau đó hiển thị như thế này:

chrome.browserAction.setIcon({imageData:canvasContext.getImageData(0, 0, canvas.width,canvas.height)}); 

Answer 2

Bạn cũng có thể thiết lập một thời gian chờ để kiểm tra những thay đổi trên hệ thống cứ sau x phút, sau đó cập nhật huy hiệu.

Trên tiện ích mở rộng của mình, tôi có một bộ đếm tác vụ được gọi bên trong chức năng thông báo. Một cái gì đó như:

$.getJSON(
    "http://mydomain/notifications?ajax=1&callback=?", 
    function(data){ 
     var result = data.retorno; 
     if(result.length > 0){ 
      var totalItens = result[0].total 
     } else { 
      var totalItens = 0; 
     } 
     chrome.browserAction.setIcon({path: '19.png'}); 
     chrome.browserAction.setBadgeText({text:''+totalItens+''}); 

     for(var i=0; i<result.length; i++){ 

      var imagem = 'http://mydomain/myimage'; 
      var titulo = 'mytitle'; 
      var desciption = 'mydescription'; 

      var urlNot = 'http://mydomain/mypageOnclick'; 

      var not = new Notifier(urlNot); 
      not.Notify(
       imagem,  // The image. 
       titulo,  // The title. 
       desciption // The body. 
     ); 

     } 

    } 
);