CODEWITHSUNDEEP
javascriptbuttongoogle-chrome-extensiononclickresponse
dropWizard
dropWizard

Reputation: 3538

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

I've read there are multiple ways to add a button to a page through a chrome extension, what is the "right" way?

Currently I'm doing it like this:

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 
        })
    })
}

Second Button:

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 
        })
    })
}

Whenever I click the notInterested() button, it also triggers the inmailResponse() button. Why?

How do I write it so only the responseLocation button gets clicked?

V2 still didn't work:

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 
        })
    })
}

both buttons were clicked

Upvotes: 0

Views: 307

Answers (2)

Bruno Monteiro
Bruno Monteiro

Reputation: 4519

You could call the function from the button, so you know for sure that one specific function is attached to only that specific button.

For example:

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>')

Upvotes: 0

Radu Diță
Radu Diță

Reputation: 14171

Change your handlers so they are binded to the buttons and not the container

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 
    })
 })
}

And also the second one

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 
    })
 })
}

Upvotes: 2

Related Questions