Greasemonkey脚本注入按钮调用函数遇未定义/权限拒绝问题

嘿，我来帮你搞定这个问题！你遇到的showMsg is not defined错误，核心原因是Greasemonkey的沙箱隔离机制和innerHTML注入代码的执行上下文不匹配，咱们一步步理清楚：

为什么会出问题？ #

• 当你用innerHTML注入带onclick属性的按钮时，这个onclick里的代码会在页面的全局window上下文中执行，而不是Greasemonkey脚本的沙箱里。你的showMsg函数是定义在油猴脚本的沙箱中的，页面全局上下文根本访问不到它，所以才会报错。
• 而用createElement绑定btn.onclick = function(){ showMsg(); }时，这个函数是油猴沙箱里创建的闭包，它能直接访问沙箱内的showMsg，所以完全正常。
• 你尝试用unsafeWindow.showMsg赋值时遇到权限错误，大概率是因为Gitter页面的CSP（内容安全策略）或者油猴的安全限制，阻止了直接修改全局window对象。

可行的解决方案 #

方案1：继续用createElement绑定事件（最推荐） #

你已经验证这个方法能正常工作，它不仅避开了上下文隔离的坑，还更安全（能避免innerHTML可能带来的XSS风险，哪怕是自己写的代码，养成好习惯总没错）。要是觉得设置样式太繁琐，可以用style.cssText批量赋值：

function loadButton(){
    var div = document.createElement('div');
    // 批量设置悬浮样式，按需调整
    div.style.cssText = "position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 10px; background: #fff; border: 1px solid #ddd; border-radius: 4px;";
    var btn = document.createElement('button');
    btn.textContent = 'Send default message';
    btn.onclick = function(){ showMsg(); };
    div.appendChild(btn);
    div.setAttribute("id", "msgMenu");
    document.body.appendChild(div);
    msgMenu = document.getElementById('msgMenu');
    return false;
}

方案2：把showMsg暴露到页面全局上下文（不优先推荐） #

如果你坚持想用innerHTML，可以把showMsg函数暴露到页面的真实全局对象中，但要注意油猴版本和页面限制。在Firefox的Greasemonkey里，可以用window.wrappedJSObject来访问页面的全局window：

// 在脚本开头或者showMsg定义后添加这段代码
window.wrappedJSObject.showMsg = function() {
    console.log('showMsg triggered');
    // 如果需要访问沙箱内的变量，记得用闭包捕获
};

// 然后loadButton里的innerHTML就可以正常用了
function loadButton(){
    var div = document.createElement('div');
    div.innerHTML = "<button onclick='setTimeout( function() { showMsg() }, 10 );'>Send default message</button>";
    div.setAttribute("id", "msgMenu");
    document.body.appendChild(div);
    msgMenu = document.getElementById('msgMenu');
    return false;
}

不过这个方法可能受页面CSP限制，安全性也不如方案1，只作为备选。

方案3：用事件委托折中 #

既想保留innerHTML的写法，又不想踩inline事件的坑？可以给父div绑定事件委托，这样事件处理函数还是在油猴沙箱里执行：

function loadButton(){
    var div = document.createElement('div');
    div.innerHTML = "<button>Send default message</button>";
    div.setAttribute("id", "msgMenu");
    // 给父元素绑定点击事件，判断触发源是按钮再执行
    div.addEventListener('click', function(e) {
        if (e.target.tagName.toLowerCase() === 'button') {
            setTimeout(showMsg, 10);
        }
    });
    document.body.appendChild(div);
    msgMenu = document.getElementById('msgMenu');
    return false;
}

这个方法兼顾了写法习惯和安全性，也是个不错的选择。

关于iframe的补充说明 #

你提到Gitter用同域iframe承载聊天内容，但按钮是注入到主页面body的——这点其实不影响当前问题，因为你的按钮和showMsg都在主页面的上下文里，核心矛盾还是沙箱和事件绑定的上下文问题，不用太担心iframe的干扰。

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