Safari扩展程序 - 如何仅在特定选项卡上设置徽章编号?

时间:2017-11-04 14:25:14

标签: javascript safari-extension

如何仅在特定标签上设置徽章编号?到目前为止,我有一个代码可以在所有选项卡上设置徽章编号..我一直在阅读A LOT,但似乎并没有关于此的大量信息,所以也许我会在这里找到解决方案。

我想要像Adblock Plus这样的设置特定标签的徽章编号。这在Chrome等中非常简单,但在Safari中似乎并非如此。

enter image description here

是否有人知道Adblock plus等扩展程序如何在特定标签上显示徽章编号?

到目前为止,我只有这段代码,但如上所述,它会在所有标签上设置徽章,这不是我想要的结果。

safari.extension.toolbarItems[0].badge = 2;

修改

我一直在查看Adblock plus的源代码,以及其他一些具有此功能的扩展。它似乎正在使用一些原型。

Adblock plus背景片段:

BrowserAction.prototype = {
_set: function(name, value)
{
  var toolbarItem = getToolbarItemForWindow(this._page._tab.browserWindow);
  if (!toolbarItem)
  {
    return;
  }
  var property = toolbarItemProperties[name];
  if (!property)
  {
    property = toolbarItemProperties[name] = {
      pages: new ext.PageMap(),
      global: toolbarItem[name]
    };
  }
  property.pages.set(this._page, value);
  if (isPageActive(this._page))
  {
    toolbarItem[name] = value;
  }
},
setIcon: function(path)
{
  this._set("image", safari.extension.baseURI + path.replace("$size", "16"));
},
setBadge: function(badge)
{
  if (!badge)
  {
    this._set("badge", 0);
  }
  else if ("number" in badge)
  {
    this._set("badge", badge.number);
  }
}
};

内容脚本(adblockplus.js)

FilterNotifier.on("filter.hitCount", function(filter, newValue, oldValue, page)
{
if (!(filter instanceof BlockingFilter) || !page)
{
  return;
}
Prefs.blocked_total++;
var blocked = blockedPerPage.get(page) || 0;
blockedPerPage.set(page, ++blocked);
if (Prefs.show_statsinicon)
{
  page.browserAction.setBadge(
  {
    color: badgeColor,
    number: blocked
  });
}
});

Adblock plus似乎就是这样做的,但到目前为止我还没有能够复制它。还在尝试..

1 个答案:

答案 0 :(得分:0)

好的,所以我终于找到了解决方案,并且认为我会分享我的所作所为,以防其他人处于同样的情况。

今天早上我想到了将数据存储在数组中,当用户访问其中一个网站时我想显示徽章编号(不存储用户访问的所有网站),只有这样才匹配我想要定位的网站之一。我将以下数据存储在数组中:root domain(example.com)和badgeNumber。

要使其工作,您需要创建一个您想要定位的网站的根域数组,然后只在匹配时执行以下内容,否则阵列会很快填满,我们不会#39 ; t中需要太多数据。

在全局页面中,首先创建一个空数组来存储数据

var badgeUpdateArray = [];

然后,您还需要在全局页面中设置消息处理。

safari.application.addEventListener('message', handleMessage, false);

function handleMessage(event) {
if(event.name === "setBadgeText"){

    var id = badgeUpdateArray.length + 1;
    var isFound = 0;
    var found = badgeUpdateArray.some(function (el) {
        if(el.identifier === event.message.identifier){
            // Was found
            isFound = 1;
        }
    });
    if (isFound == 0) {
        // Not found, add to the array
        badgeUpdateArray.push({identifier:event.message.identifier,badgeNumber:event.message.badgeNumber});
    }

    // Set the badge number
    safari.extension.toolbarItems[0].badge = event.message.badgeNumber;
}
}

现在我们需要将消息从内容脚本发送到全局页面。你需要获得根域(example.com),我没有进入这里,因为它很容易。您还需要badgeNumber值,这可以从任何地方收集(GET请求或其他地方..)

请记住,只有在网站与目标域匹配时才执行此代码。

var message = {
        identifier: domain,
        badgeNumber: rows.length
    }
    safari.self.tab.dispatchMessage("setBadgeText", message);

这将发送消息,并将数据存储在数组中,它还将设置徽章编号。

现在,为了在不同的选项卡上工作,您需要在全局页面上为"activate"创建一个事件处理程序,只要选项卡处于活动状态,它就会运行。

safari.application.addEventListener("activate", updateBadge, true);

function updateBadge(){

var cDomain = safari.application.activeBrowserWindow.activeTab.url;
cDomain = cDomain.replace("www3.","");
cDomain = cDomain.replace("www2.","");
cDomain = cDomain.replace("www1.","");
cDomain = cDomain.replace("www.","");
cDomain = new URL(cDomain);
cDomain = cDomain.hostname;

var id = badgeUpdateArray.length + 1;
var isFound = 0;
var badgeNumber = 0;
var found = badgeUpdateArray.some(function (el) {
    badgeNumber = el.badgeNumber;
    if(el.identifier === cDomain){
        // Was found, set the badge number
        isFound = 1;
        safari.extension.toolbarItems[0].badge = el.badgeNumber;
    }
});
if (isFound == 0) {
    // Was not found
    safari.extension.toolbarItems[0].badge = 0;
}

}

希望我已经完成了这一切,至少有一些有用,但我不得不说我更喜欢一种更简单的方式来存储它......就像Chrome等用标签API一样。