动态更新扩展按钮 - 需要灵感

Posted 2021-04-05

我正在构建一个扩展，我希望能够在激活代码中的扩展名时为扩展按钮添加一个能指。我希望我可以在扩展按钮上添加文字（右上角）

这是一个简单的场景。假设我的扩展程序监视浏览并获取标签网址，在我的扩展程序中，我有一个要监视的域列表。

请关注这些域名www.website1.com www.website2.com

如果用户访问监视列表中的域，我想以某种方式指示这一点，通过在某处添加一些文本 - 我希望在浏览器的右上角有扩展按钮。我真的不想使用通知窗口，因为我想要一些不显眼的东西。我要显示的文本只是几个字母，但不同的网址不同。

有没有人有任何灵感？

谢谢

答案

您可以像这样更改扩展图标：

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

还有一个“徽章” - 扩展图标上方的小方框，显示ie。 gmail扩展中未读邮件的数量。你可以像这样操纵它：

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

也可以在canvas元素上动态生成图标，然后像这样显示：

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

另一答案

您还可以设置超时以每隔x分钟检查系统上的更改，然后更新de badge。

在我的扩展中，我有一个在通知功能中调用的任务计数器。就像是 ：

$.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.
          );

        }

    }
);

另一答案

tl; dr：从background.js中调用它

我搜索了这条评论，因为我试图从我的内容脚本中调用chrome.browserActions函数

它只能作为chrome扩展的一部分运行的脚本访问，因为content_scripts与您必须通过chrome访问它们的客户端脚本相同。* api的

并修复一些额外的麻烦，我有调用setBadge文本需要看起来像：

chrome.browserAction.setBadgeText({text: 'ASDF'});

您可以根据需要添加任意数量的字符，但只会显示4个左右。我不知道对象属性需要什么。