Question

我已经阅读了多种通过chrome扩展名向页面添加按钮的方法，什么是“正确”的方法？

目前我正在这样做：

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在页面上添加按钮的正确方法

2 个答案: