javascript - 将 firefox-webextension 的按钮更改为 textString

Question

目前我正在 firefox 47 上构建一个网络扩展。

当您单击网络扩展按钮时，会出现一个下拉菜单，我可以从那里导航到其他网站。

出现的按钮是我在 manifest.json 中指定的图标。我想知道是否有任何方法可以将扩展程序的图标更改为包含我当前正在访问的 URL 的文本字符串，并且每次访问新 URL 时都会更改。

Answer 1

不，您不能直接将浏览器操作或页面操作图标更改为一些长文本字符串。您可以:

• Browser Actions :
  • 使用 browserAction.setIcon() 更改图标。这会改变显示的图像。它始终是相同的正常图标大小。您可以在图标图像中包含非常有限的文本。然而，动态地执行此操作会很复杂，但在有限的集合之间切换可能还不错。
  • 使用 browserAction.setBadgeText() 更改徽章文本。文本量限制在四个字符左右。
  • 使用 browserAction.setBadgeBackgroundColor() 更改徽章文本的背景颜色
  • 使用 browserAction.setTitle() 更改图标的标题。这显示为工具提示。文本本身没有长度限制。但是，实际向用户显示的内容存在合理的限制。
  • 更改为将事件发送到后台页面，您可以使用 browserAction.onClicked 监听该事件监听器，通过提供弹出窗口的 URL browserAction.setPopup() 来显示 HTML 弹出窗口。您可以通过指定 '' 作为弹出窗口的 URL 来改回点击事件。
  • 使用 browserAction.enable() 启用或禁用按钮和 browserAction.disable() .
• Page Actions :
  • 使用 pageAction.setIcon() 更改图标。这会改变显示的图像。它始终是相同的正常图标大小。您可以在图标图像中包含非常有限的文本。然而，动态地执行此操作会很复杂，但在有限的集合之间切换可能还不错。
  • 使用 pageAction.setTitle() 更改图标的标题。这显示为工具提示。文本本身没有长度限制。但是，实际向用户显示的内容存在合理的限制。
  • 更改为将事件发送到后台页面，您可以使用 pageAction.onClicked 监听该事件监听器，通过提供弹出窗口的 URL pageAction.setPopup() 来显示 HTML 弹出窗口。您可以通过指定 '' 作为弹出窗口的 URL 来改回点击事件。
  • 使用 pageAction.show() 显示或隐藏按钮和 pageAction.hide() .

更改图标徽章和徽章颜色的示例:

用于创建按钮开/关状态的代码是:

background.js

//The browserButtonStates Object describes the states the button can be in and the
//  'action' function to be called when the button is clicked when in that state.
//  In this case, we have two states 'on' and 'off'.
//  You could expand this to as many states as you desire.
//icon is a string, or details Object for browserAction.setIcon()
//title must be unique for each state. It is used to track the state.
//  It indicates to the user what will happen when the button is clicked.
//  In other words, it reflects what the _next_ state is, from the user's
//  perspective.
//action is the function to call when the button is clicked in this state.
var browserButtonStates = {
    defaultState: 'off',
    on: {
        //icon         : '/ui/is-on.png'
        badgeText  : 'On',
        badgeColor : 'green',
        title        : 'Turn Off',
        action       : function(tab) {
                           chrome.webNavigation.onCommitted.removeListener(onTabLoad);
                       },
        nextState    : 'off'
    },
    off: {
        //icon         : '/ui/is-off.png'
        badgeText  : 'Off',
        badgeColor : 'red',
        title        : 'Turn On',
        action       : function(tab) {
                           chrome.webNavigation.onCommitted.addListener(onTabLoad);
                       },
        nextState    : 'on'
    }
}

//This moves the Browser Action button between states and executes the action
//  when the button is clicked. With two states, this toggles between them.
chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.browserAction.getTitle({tabId:tab.id},function(title){
        //After checking for errors, the title is used to determine
        //  if this is going to turn On, or Off.
        if(chrome.runtime.lastError){
            console.log('browserAction:getTitle: Encountered an error: ' 
                + chrome.runtime.lastError);
            return;
        }
        //Check to see if the current button title matches a button state
        let newState = browserButtonStates.defaultState;
        Object.keys(browserButtonStates).some(key=> {
            if(key === 'defaultState') {
                return false;
            }
            let state = browserButtonStates[key];
            if(title === state.title) {
                newState = state.nextState;
                setBrowserActionButton(browserButtonStates[newState]);
                if(typeof state.action === 'function') {
                    //Do the action of the matching state
                    state.action(tab);
                }
                //Stop looking
                return true;
            }
        });
        setBrowserActionButton(browserButtonStates[newState]);
    });
});

function setBrowserActionButton(tabId,details){
    if(typeof tabId === 'object' && tabId !== null){
        //If the tabId parameter is an object, then no tabId was passed.
        details = tabId;
        tabId       = null;
    }
    let icon   = details.icon;
    let title  = details.title;
    let text   = details.badgeText;
    let color  = details.badgeColor;

    //Supplying a tabId is optional. If not provided, changes are to all tabs.
    let tabIdObject = {};
    if(tabId !== null && typeof tabId !== 'undefined'){
        tabIdObject.tabId = tabId;
    }
    if(typeof icon === 'string'){
        //Assume a string is the path to a file
        //  If not a string, then it needs to be a full Object as is to be passed to
        //  setIcon().
        icon = {path:icon};
    }
    if(icon) {
        Object.assign(icon,tabIdObject);
        chrome.browserAction.setIcon(icon);
    }
    if(title) {
        let detailsObject = {title};
        Object.assign(detailsObject,tabIdObject);
        chrome.browserAction.setTitle(detailsObject);
    }
    if(text) {
        let detailsObject = {text};
        Object.assign(detailsObject,tabIdObject);
        chrome.browserAction.setBadgeText(detailsObject);
    }
    if(color) {
        let detailsObject = {color};
        Object.assign(detailsObject,tabIdObject);
        chrome.browserAction.setBadgeBackgroundColor(detailsObject);
    }
}

//Set the starting button state to the default state
setBrowserActionButton(browserButtonStates[browserButtonStates.defaultState]);

manifest.json:

{
    "description": "Demo Button toggle",
    "manifest_version": 2,
    "name": "Demo Button toggle",
    "version": "0.1",

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

    "browser_action": {
        "default_icon": {
            "32": "myIcon.png"
        },
        "default_title": "Turn On",
        "browser_style": true
    }
}

^{_{此答案中的代码最初发布在我对 In a Firefox WebExtension, how I can make a button that looks and acts like a toggle 的回答中.}}