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工作

1 个答案: