无法通过 chrome 扩展中的内容脚本使 onclick 在注入的按钮上工作

Question

我正在开发一个在网页上注入按钮的 chrome 扩展程序。我能够成功注入按钮，但是我无法在其上应用 onclick 函数。我在content.js写了按钮注入代码，如下

jQuery('body').append('<button onclick="myFxn();" class="vwsItBtn" style="height: 25px; width: 80px; position: absolute; opacity: 1; font-size: 12px; z-index: 867530999; display: block; padding-right: 4px !important; margin: 0px; border: 2px solid rgb(254, 208, 70); background-color: whitesmoke; border-radius: 4px; font-weight: bolder; text-shadow: #FED046 0px 0px 1px; color: #36373B; text-align-last: end;"><img id="myImgVw" style="width: 15px; display: inline-block; padding: 0px; left: 2px; position: absolute; vertical-align: middle !important; top: 3px;" src="'+chrome.extension.getURL("imgvwextsitbtn.png")+'"/> Schedule</button>');

jQuery(function(){
    function myFxn(){
        alert('This is working!');
    }
})

现在我收到一个未定义 myFxn 的错误。现在这个功能很简单，但是我该如何让它工作呢？

这是我第一次开发 chrome 扩展，我很确定还有其他方法可以做到这一点。请帮忙！！

Answer 1

问题在于 myFxn() 函数是在 jQuery document.ready 处理程序的范围内声明的，而它需要是全局的，on* 属性才能访问它。试试这个：

jQuery('body').append('<button onclick="myFxn();" class="vwsItBtn" style="height: 25px; width: 80px; position: absolute; opacity: 1; font-size: 12px; z-index: 867530999; display: block; padding-right: 4px !important; margin: 0px; border: 2px solid rgb(254, 208, 70); background-color: whitesmoke; border-radius: 4px; font-weight: bolder; text-shadow: #FED046 0px 0px 1px; color: #36373B; text-align-last: end;"><img id="myImgVw" style="width: 15px; display: inline-block; padding: 0px; left: 2px; position: absolute; vertical-align: middle !important; top: 3px;" src="'+chrome.extension.getURL("imgvwextsitbtn.png")+'"/> Schedule</button>');

function myFxn(){
    alert('This is working!');
}

更好的是，将您的样式放入单独的样式表中，以使您的 HTML 更简单，更好地与样式分开，并且不要使用过时的 on* 事件属性，而是使用不显眼的 Javascript 来附加您的事件处理程序。由于您已经在使用 jQuery，这里有一个如何做到这一点的示例：

.vwsItBtn {
    height: 25px; 
    width: 80px; 
    position: absolute; 
    opacity: 1; 
    font-size: 12px; 
    z-index: 867530999; 
    display: block; 
    padding-right: 4px !important; 
    margin: 0px; 
    border: 2px solid rgb(254, 208, 70); 
    background-color: whitesmoke; 
    border-radius: 4px; 
    font-weight: bolder; 
    text-shadow: #FED046 0px 0px 1px; 
    color: #36373B; 
    text-align-last: end;
}
#myImgVw {
    width: 15px; 
    display: inline-block; 
    padding: 0px; left: 2px; 
    position: absolute; 
    vertical-align: middle !important; 
    top: 3px;
}

jQuery(function($) {
    $('body').append('<button class="vwsItBtn"><img id="myImgVw" src="' + chrome.extension.getURL("imgvwextsitbtn.png") + '"/>Schedule</button>');

    $('.vwsItBtn').click(function() {
        alert('This is working!');
    });
});