Adding Click Event to a Button in a Chrome Extension

Question

I want to add click event to a button element which I added it dynamically within the chrome.tabs.onUpdated event function by running executeScript function.

chrome.tabs.onUpdated.addListener(() => {
  chrome.tabs.executeScript(null, {file: "execute.js" });
})

I add a click event function to the dynamically added button element with this code inside executed execute.js file but it didn't work;

var btnComment=document.createElement('button');
btnComment.addEventListener('click',function(){
  console.log('btnComment worked')
});

I use background.html page inside it request to background.js file. How can I implement this function?

Milan Donhowe · Accepted Answer · 2018-10-19 01:28:38Z

3

Unfortunately due to a lack of context in terms of what your program looks like I can't give a 100% sure answer. However, I believe the problem is that you need to specifically select the element first using the DOM.

try

document.getElementById('button').addEventListener('click',function(){
   console.log('btnComment worked')
});

more info about the Document Object Model can be found here: https://www.w3schools.com/js/js_htmldom.asp

EDIT: spelling

answered Oct 19, 2018 at 1:28

Milan Donhowe

3032 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

carldevelopsforcoffee · Accepted Answer · 2018-10-19 01:54:02Z

1

Does your backround.html have this?

<script src="background.js"></script>

Note that you create your button in execute.js, but your html uses background.js so in your background.js file, you will need this:

function onButtonClicked (){
  console.log('btnComment worked');
}

document.getElementById('button').addEventListener('click', onButtonClicked());

btw, I'm also still learning google chrome extensions.

answered Oct 19, 2018 at 1:54

carldevelopsforcoffee

3051 silver badge8 bronze badges

1 Comment

Guruleni Over a year ago

I think it should be addEventListener('click', onButtonClicked); otherwise, the action function will be called.

Collectives™ on Stack Overflow

Adding Click Event to a Button in a Chrome Extension

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related