Javascript 如何使浏览器操作按钮的外观和行为类似于切换

目标是为Firefox获取一个WebExtension，用户可以在工具栏中激活/停用该扩展，如开/关开关

我将background.js与以下代码一起使用：

browser.browserAction.onClicked.addListener（函数（选项卡）{
开关（按钮）{
案例“开启”：
启用（）；
打破
案例“关闭”：
禁用（）；
打破
}
});
函数启用（）{
browser.browserAction.setIcon（{path:'/ui/is on.png'，}）；
browser.browserAction.setPopup（{popup:'/ui/off.js'，}）；
browser.webNavigation.onCommitted.addListener（onTabLoad）；
} 
函数禁用（）{
browser.browserAction.setIcon（{path:'/ui/is off.png'，}）；
browser.browserAction.setPopup（{popup:'/ui/turn-on.js'，}）；
browser.webNavigation.onCommitted.removeListener（onTabLoad）；
}
功能加载（详细信息）{
browser.tabs.executeScript（details.tabId{
文件：'/gc.js'，
所有这些都是真的，
}); 
}
启用（）；//默认情况下启用或禁用

显然我做错了什么。我是个编程新手。这是我试图完成的个人项目。

您的代码 当您添加了一个

switch

语句来打开

按钮时，您从未定义过
按钮，也没有更改其状态。您也没有默认的大小写，只是为了防止
按钮
变量不是您在
大小写
语句中测试的值之一

您不应该使用
browserAction.setPopup（）
设置弹出窗口。设置弹出窗口将导致弹出窗口被打开，而不是您的后台页面接收到
单击事件。此外，弹出窗口需要是HTML页面，而不是JavaScript

有关Firefox bug，请参见下面的部分，您需要在
onTabLoad（）
中解决该bug

收听
webNavigation.onCommitted
不足以涵盖需要注入脚本的所有情况。换句话说，
webNavigation.onCommitted
不会在每次加载页面时触发。要完全涵盖需要注入脚本的每种情况，您需要在另一个问题中提问

var nextButtonState;
browser.browserAction.onClicked.addListener(function (tab) {
    switch (nextButtonState) {
        case 'turn-on':
            enable();
            break;
        case 'turn-off':
        default:
            disable();
            break;
    }
});
function enable() {
    browser.browserAction.setIcon({ path: '/ui/is-on.png', });
    //browser.browserAction.setPopup({ popup: '/ui/turn-off.js', });
    browser.webNavigation.onCommitted.addListener(onTabLoad); 
    nextButtonState = 'turn-off';
} 
function disable() {
    browser.browserAction.setIcon({ path: '/ui/is-off.png', });
    //browser.browserAction.setPopup({ popup: '/ui/turn-on.js', });
    browser.webNavigation.onCommitted.removeListener(onTabLoad); 
    nextButtonState = 'turn-on';
}
function onTabLoad(details) {
    //Add a setTimout to avoid a Firefox bug that Firefox is not quite ready to 
    //  have tabs.executeScript() inject a script when the onCommitted event fires.
    setTimeout(function(){
        chrome.tabs.executeScript(details.tabId, {
            file: '/gc.js',
            allFrames true,
        }); 
    },0);
}
enable(); // enable or disable by default

Firefox
webNavigation.onCommitted
bug的解决方法
您的
onTabLoad（）
代码需要更改才能使用
webNavigation。onCommitted
listener在Firefox中使用
tabs.executeScript（）
插入脚本（在Chrome中不需要）。这是由于Firefox中的一个错误，如果立即从
webNavigation.onCommitted
侦听器执行，则会导致
tabs.executeScript（）
失败。我使用的解决方法是在
setTimeout（函数，0）
延迟后注入脚本。这允许Firefox执行必要的代码，以设置
executeScript（）
正常运行所需的环境

函数onTabLoad（详细信息）{
//添加一个setTimout以避免Firefox尚未准备好的Firefox bug
//让tabs.executeScript（）在触发onCommitted事件时插入脚本。
setTimeout（函数（）{
chrome.tabs.executeScript（details.tabId{
文件：'/gc.js'，
所有这些都是真的，
}); 
},0);
}

多状态按钮（例如切换按钮）的通用解决方案
下面是我用来使浏览器操作按钮的行为类似于切换的代码。我修改了
browserButtonStates
对象，该对象描述了按钮的功能和外观，用于添加和删除您的
webNavigation.onCommitted
侦听器，
onTabLoad（）
。有关
onTabLoad（）
的问题，请参见上文

下面的代码比您需要的更复杂。我编写它的目的是能够将它从一个项目移动到另一个项目，而只需要更改
browserButtonStates
对象的内容。然后，只需更改该对象，即可更改图标、文本、徽章文本、徽章颜色以及在每个状态（例如打开/关闭）下执行的操作

background.js

//browserButtonStates对象描述按钮可能处于的状态以及
//在该状态下单击按钮时调用的“action”函数。
//在这种情况下，我们有两种状态“开”和“关”。
//您可以根据需要将其扩展到任意多个州。
//icon是browserAction.setIcon（）的字符串或详细信息对象
//每个州的标题必须是唯一的。它用于跟踪状态。
//它向用户指示单击按钮时将发生什么。
//换句话说，它反映了用户的下一个状态
//透视图。
//action是在此状态下单击按钮时要调用的函数。
变量browserButtonStates={
defaultState:'关闭'，
关于：{
图标：'/ui/is on.png'
//文本：“On”，
//徽章颜色：“绿色”，
标题：“关闭”，
操作：功能（选项卡）{
chrome.webNavigation.onCommitted.removeListener（onTabLoad）；
},
下一状态：“关闭”
},
关：{
图标：'/ui/is off.png'
//文本：“关闭”，
//徽章颜色：“红色”，
标题：“打开”，
操作：功能（选项卡）{
chrome.webNavigation.onCommitted.addListener（onTabLoad）；
},
下一状态：“开”
}
}
//这将在状态之间移动浏览器操作按钮并执行该操作
//单击按钮时。对于两个状态，这将在它们之间切换。
chrome.browserAction.onClicked.addListener（函数（选项卡）{
chrome.browserAction.getTitle（{tabId:tab.id}，函数（标题）{
//检查错误后，标题用于确定
//如果这将打开或关闭。
如果（chrome.runt
{
    "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
    }
}