无法通过 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!');
    });
});

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

Can't make onclick work on an injected button through content script in chrome extension

jquery

google-chrome

javascript-injection

google-chrome-extension