Chrome扩展开发中如何遍历JS对象并执行所有属性函数？

这个需求完全可以实现，你当前写法不生效的核心原因是for...in遍历对象时拿到的是属性名字符串，不是对象中存储的函数本身，无法直接调用。

错误原因说明 #

你在循环中拿到的func变量是'func1'、'func2'、'func3'这类字符串值，不是你定义的函数对象，直接调用func()本质是尝试把字符串当函数执行，自然会报错。

正确实现代码 #

方案1：保留for...in遍历逻辑，补充属性取值 #

要通过属性名从listeners对象中取出对应的函数再执行，同时建议加原型链属性过滤，避免意外执行继承属性：

const listeners = {
    func1: function (){
        // 示例：注册消息监听
        chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
            // 自定义业务逻辑
        });
    },
    func2: function (){
        // 示例：注册标签页更新监听
        chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
            // 自定义业务逻辑
        });
    },
    func3: function (){
        // 其他监听器注册逻辑
    }
}

function init(){
    for (let funcKey in listeners){
        // 过滤原型链继承属性，仅处理自身定义的属性
        if (listeners.hasOwnProperty(funcKey)) {
            // 取出函数并执行
            listeners[funcKey]();
        }
    }
}

init();

方案2：更简洁的Object.values遍历（推荐） #

直接提取对象所有属性值，加函数类型判断，容错性更高，即使后续误往listeners中添加非函数属性也不会引发报错：

function init(){
    Object.values(listeners).forEach(register => {
        if (typeof register === 'function') {
            register();
        }
    })
}

注意事项 #

Chrome扩展的事件监听器必须在脚本执行的同步阶段完成注册，不要把addListener调用包裹在setTimeout、Promise.then等异步回调中，否则会导致监听器不生效。

内容的提问来源于stack exchange，提问作者Diego Senra