将弹出窗格添加到 crossrider 附加图标并将闪烁图标添加到附加图标

Question

我想将我现有的 firefox 和 chrome 插件迁移到 crossrider，以便在 safari 和 IE 中也能使用它，但我怀疑可能的 Schlomo（或任何 Crossrider developercan）可以帮助我解决他们。

问题：

1. 当有人点击插件按钮时，我可以添加一个弹出窗格，其中显示一些选项吗？

2. 我可以在实际图标上添加一个闪烁的图标，以显示发生的某种事件，例如传入聊天等吗？

3. 有没有办法像在图标右下角显示某种文本的 chrome 一样添加红色文本框？

非常感谢！

Answer 1

当你提出这样的问题时，我只希望下面的答案能够消除你的疑虑和启发:)

首先，我建议您熟悉How to add a browser button to your Crossrider extension 和button popup feature。

回答您的具体问题：

1. 您可以使用按钮弹出功能并在其中构建所需的选项。查看Button Popup Menu 演示扩展以帮助您入门。
2. 虽然您无法让按钮闪烁，但您可以交替使用按钮图标，使其看起来像在闪烁（参见示例）。
3. 简而言之，是的。只需使用 appAPI.browserAction.setBadgeText 和 appAPI.browserAction.setBadgeBackgroundColor 方法（参见示例）。

以下示例汇集了实现上述解决方案所需的 background.js 代码中的关键元素。查看 Button Popup Menu 中的 popup.html 文件，了解如何构建选项页面的示例。

appAPI.ready(function() {
    var sid, // Blink interval id
        alt=0, // Blink alternation state
        icon = { // Blink icons
            0: 'icons/icon0.png',
            1: 'icons/icon1.png'
        };

    // Set the initial icon for the button
    appAPI.browserAction.setResourceIcon(icon[0]);
    // Sets the popup for the button
    appAPI.browserAction.setPopup({
        resourcePath:'html/popup.html',
        height: 300,
        width: 300
    });

    if (true) { // blink condition, set to true for this example
        // Blink icon
        sid = appAPI.setInterval(function() {
            alt = 1 - alt;
            appAPI.browserAction.setResourceIcon(icon[alt]);
        }, 1 * 1000);
    } else {
        appAPI.clearInterval(sid);
    }

    if (true) { // show button text condition, set to true for this example
        // Add red text box to icon
        appAPI.browserAction.setBadgeText('ext', [255,0,0,255]);
    }
});

[披露：我是一名crossrider员工]