Can't make onclick work on an injected button through content script in chrome extension

Question

I'm developing a chrome extension that injects a button on web page. I'm able to inject the button successfully however i cannot apply a onclick function on it. I wrote button injection code in content.js which is as follows

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!');
    }
})

Now i get an error that myFxn is not defined. Now this function is quite simple but how do i make it work?

This is the first time i'm developing a chrome extension and i'm pretty sure there is some other way of doing it. Please help!!

Rory McCrossan · Accepted Answer · 2016-04-27 09:37:54Z

1

The problem is because the myFxn() function is declared within the scope of the jQuery document.ready handler, whereas it needs to be global for the on* attribute to be able to access it. Try this:

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!');
}

Better yet, put your styling in to separate stylesheets to make your HTML simpler and better separated from the styling and also don't use the outdated on* event attributes and use unobtrusive Javascript to attach your event handlers instead. As you're using jQuery already, here's an example of how to do that:

.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!');
    });
});

answered Apr 27, 2016 at 9:37

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

7 Comments

Tushar Shukla Over a year ago

I already tried this before but this is the error: (index):1 Uncaught ReferenceError: myFxn is not defined

Tushar Shukla Over a year ago

This worked, had done a silly error. Thanks a lot. Your answer showed me the correct way!

Rory McCrossan Over a year ago

No problem, glad to help.

Xan Over a year ago

It's important to understand why the first solution still doesn't work. Content scripts live in an isolated context; creating the element with an onclick attribute will create a handler in the page's context, while the handler is created in the content script context. The second solution avoids this problem by keeping everything to the content script context.

Tushar Shukla Over a year ago

@Xan Thanks for the info. If you check my 2nd comment on this answer, i was thinking about something similar and later realized what you mentioned after understanding this answer

|

Collectives™ on Stack Overflow

Can't make onclick work on an injected button through content script in chrome extension

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related