Question

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

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

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

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

有没有人有任何灵感？

由于

Answer 1

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

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)});

Answer 2

您还可以设置超时以每隔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.
          );

        }

    }
);

Answer 3

tl; dr：从background.js调用

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

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

为解决其他麻烦，我对setBadge文本的调用应如下所示：

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

您可以根据需要输入任意数量的字符，但是只会显示4个左右。我迷上了对象属性需要是什么。

Answer 4

您必须更改3个文件。

manifest.json

检查此代码是否已添加

"background": { "scripts": ["background.js"],  "persistent": false }

script.js

添加以下代码：

   const msg = 'updateIcon'
   chrome.runtime.sendMessage({ message: msg }, function(response) {
   });

background.js

添加以下代码：

  chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  console.log(request);
  // Callback for that request
  chrome.browserAction.setIcon({path: "/assets/icon.png"});
  });

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

4 个答案: