使用 Chrome 扩展中的 onClick 将按钮添加到页面的正确方法

Question

我了解到有多种方法可以通过 chrome 扩展程序向页面添加按钮，"right" 方法是什么？

目前我是这样做的：

function notInterested(){
    var notInterestedbutton = $('<div style="text-align:center"><button type="button" style=" margin-top:25px" class="open-in-beamery">Not Interested</button></div>')
    var notInterestedlocation = $('#hiring-platform-promotion-region')
    notInterestedlocation.append(notInterestedbutton)
    notInterestedlocation.on("click", "button", function(){
        console.log('not interested clicked')
        console.log(conversationID)
        chrome.runtime.sendMessage({
            greeting:"notInterested",
            conversationID: conversationID 
        })
    })
}

第二个按钮：

function inmailResponse(){
    var button = $('<button type="button">Add to Response</button><br>')
    var responseLocation = $('#mailbox-main')
    responseLocation.prepend(button)
    responseLocation.on("click", "button", function(){
        console.log('inmail response clicked')
        console.log(conversationID)
        chrome.runtime.sendMessage({
            greeting:"getInmailData",
            conversationID: conversationID 
        })
    })
}

每当我点击 notInterested() 按钮时，它也会触发 inmailResponse() 按钮。为什么？

如何编写它以便仅单击 responseLocation 按钮？

V2 仍然没有工作：

function notInterested(){
    var notInterestedbutton = $('<div style="text-align:center"><button  type="button" style=" margin-top:25px" class="open-in-beamery">Not Interested</button></div>')
    var notInterestedlocation = $('#hiring-platform-promotion-region')
    notInterestedlocation.append(notInterestedbutton)
    notInterestedbutton.on("click", "button", function(){
        console.log('not interested clicked')
        console.log(conversationID)
        chrome.runtime.sendMessage({
            greeting:"notInterested",
            conversationID: conversationID 
        })
    })
}

function inmailResponse(){
    var inMailButton = $('<button  type="button">Add to Response</button><br>')
    var responseLocation = $('#mailbox-main')
    responseLocation.prepend(inMailButton)
    inMailButton.on("click", "button", function(){
        console.log('inmail response clicked')
        console.log(conversationID)
        chrome.runtime.sendMessage({
            greeting:"getInmailData",
            conversationID: conversationID 
        })
    })
}

两个按钮都被点击了

Answer 1

更改您的处理程序，使它们绑定到按钮而不是容器

function notInterested(){
  var notInterestedbutton = $('<div style="text-align:center"><button type="button" style=" margin-top:25px" class="open-in-beamery">Not Interested</button></div>')
  var notInterestedlocation = $('#hiring-platform-promotion-region')
notInterestedlocation.append(notInterestedbutton)
notInterestedbutton.on("click", function(){
    console.log('not interested clicked')
    console.log(conversationID)
    chrome.runtime.sendMessage({
        greeting:"notInterested",
        conversationID: conversationID 
    })
 })
}

还有第二个

function inmailResponse(){
 var button = $('<button type="button">Add to Response</button><br>')
 var responseLocation = $('#mailbox-main')
 responseLocation.prepend(button)
 button.on("click", function(){
    console.log('inmail response clicked')
    console.log(conversationID)
    chrome.runtime.sendMessage({
        greeting:"getInmailData",
        conversationID: conversationID 
    })
 })
}

Answer 2

您可以从按钮调用该功能，因此您可以确定某个特定功能仅附加到该特定按钮。

例如：

function notInterested(){
    console.log('not interested clicked')
    console.log(conversationID)
    chrome.runtime.sendMessage({
        greeting:"notInterested",
        conversationID: conversationID 
    })
}

var button = $('<button type="button" onclick="notInterested()">Not interested</button>')

使用 Chrome 扩展中的 onClick 将按钮添加到页面的正确方法

Right way to add button to page with onClick from Chrome Extension

javascript

response

onclick

button

google-chrome-extension