当扩展的内容脚本处于活动状态时设置图标

时间:2014-09-25 19:16:39

标签: javascript google-chrome-extension

我的扩展程序适用于特定网站,我希望用户知道它何时正常工作。 我已在清单中为我的内容脚本指定了特定页面,

当内容脚本处于活动状态时,如何更改扩展程序图标?

(根据作者评论编辑)
虽然我的应用程序可以在特定页面上运行,但我仍然希望用户能够查看弹出窗口。

2 个答案:

答案 0 :(得分:2)

我为扩展程序Grooveshark Control实现了这一点。这很简单。我将脚本注入了我需要的页面,并从注入的脚本中定期使用一些数据调用我的扩展。

// content.js
setInterval(dataCollector, 1000)

function dataCollector() {
    data = {} // collect something from page
    chrome.extension.sendRequest(data);
}

在我的扩展中,我只是听那个......

// background.js
chrome.extension.onRequest.addListener(function(request) {
    chrome.browserAction.setIcon(...)
})

但是有了这个,你可能会有一些麻烦。例如,有人可以禁用并再次启用您的扩展程序。然后,content.js也可以注册responseCallback,以便删除该间隔。因为那时会有两个请求。当您需要重新加载扩展程序时,此问题主要发生在开发过程中。

另一件事是用户可以关闭您的页面的标签,现在您需要再次更改您的图标。为此,您需要在background.js脚本中使用另一个侦听器:

// background.js
chrome.tabs.onRemoved.addListener(function(tabId, removeInfo) {
    // check if your page is still there
    // if not, change icon
})

Grooveshark控件的代码在GitHub上,所以你可以查看它:

希望这就是你要找的东西。

答案 1 :(得分:1)

虽然在意识形态上是正确的,但这不是一个好的答案,因为它没有回答OP真正的问题。如果有人可以提供强大的解决方案来更改特定页面的浏览器操作图标,那将是受欢迎的。

根据Chrome用户界面指南,当您的扩展程序仅对特定网站有意义时,您应该使用Page Action

最直接的解决方案是将内容脚本中的消息发送到后台脚本,以显示特定选项卡的页面操作,并向选项卡报告回执:

// content.js
chrome.runtime.sendMessage({showAction : true});

chrome.runtime.onMessage.addListener(
  function(message, sender, sendResponse) {
    if(message.actionClicked) {
      /* Do stuff */
    }
  }
);

// background.js
chrome.runtime.onMessage.addListener(
  function(message, sender, sendResponse) {
    if(message.showAction) {
      chrome.pageAction.show(sender.tab.id);
    }
  }
);

chrome.pageAction.onClicked.addListener(function(tab) {
  chrome.tabs.sendMessage(tab.id, {actionClicked : true});
});

您需要向清单添加必填字段,但这是它的要点。


您还可以考虑另一条路线:不是每次都注入脚本,而是使用declarativeContent API检测要注入的页面以显示页面操作,并在点击时以编程方式注入。这样可以节省一些资源,但如果您需要在页面上做准备,则不适用。