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

【问题标题】：Updating an extension button dynamically - inspiration required动态更新扩展按钮 - 需要灵感
【发布时间】：2012-01-17 12:18:18
【问题描述】：

我正在构建一个扩展，当代码中的扩展被激活时，我希望能够向扩展按钮添加一个符号。我希望我可以将文本添加到扩展按钮（右上角）

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

注意这些域 www.website1.com www.website2.com

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

有人有什么灵感吗？

谢谢

【问题讨论】：

标签： google-chrome-extension

【解决方案1】：

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

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

还有一个“徽章”——显示 ie 的扩展图标上方的小框。 gmail 扩展中未读消息的数量。你可以这样操作它：

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

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

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

请注意，您必须从后台脚本中调用它，因为内容脚本没有权限！

【讨论】：

请注意，您无法从内容脚本内部访问 chrome.browserAction。如果从扩展上下文中的某些内容（例如背景或弹出脚本）调用，它将起作用
上面的动态例子很好，但不完整——在 background.js 中从哪里获取 canvasContext？ Mozilla 扩展文档（与 Chrome 兼容）在其 setIcon 示例页面的底部有一个很好的示例来说明如何绘制画布：developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/…

【解决方案2】：

tl;dr: 从 background.js 调用它

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

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

为了解决一些额外的问题，我对 setBadge 文本的调用需要如下所示：

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

您可以放置任意数量的字符，但只会出现 4 个左右。我对对象属性需要是什么感到困惑。

【讨论】：

【解决方案3】：

您还可以设置超时时间，每 x 分钟检查一次系统上的更改，然后更新徽章。

在我的扩展程序中，我有一个在通知函数中调用的任务计数器。类似的东西：

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

        }

    }
);

【讨论】：

【解决方案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"});
  });

【讨论】：