Unable to call JavaScript function in html on button click

Question

I was making a Chrome extension, for which I have an html file, a JavaScript file which opens a modified link in a new tab, the manifest file and the icon.

It works fine but now I want the javascript function to work only when the user clicks a button. So I made a button in the html file, put the js code inside a function and called the function using onclick.

But for some reason, it is not working. On clicking the button nothing seems to happen. I have tried reloading the extension. Also, I took a working example of a simple program in which on clicking the button, a simple "Hello world" message is displayed using alert().

This works fine when I open the html page directly in chrome but when I replaced this with the function that I made, nothing seems to happen on clicking.

Can someone please find the bug/problem?

The urltry.html file is:

<!DOCTYPE html>
<html>
<button onclick="editorial()">View Editorial</button>
<script>
function editorial()
{
chrome.tabs.query({currentWindow: true, active: true}, function(tabs){
    var tab_url=tabs[0].url;
    var new_url=tab_url.slice(11);
    chrome.tabs.create({ url:"http://www.discuss." + new_url});        
});
}
</script>
</html>

I'm pretty sure Chrome Extensions don't allow inline event handlers. I suggest reading developer.chrome.com/extensions/… — Oleg
– Oleg, Commented Aug 30, 2014 at 9:26
possible duplicate of onClick within Chrome Extension not working — Xan
– Xan, Commented Sep 1, 2014 at 9:45

Oleg · Accepted Answer · 2014-08-30 09:50:32Z

4

Due to the default Content Security Policy (CSP) in Google Chrome extensions, the following is disallowed:

Eval and related functions
Inline JavaScript

The suggestion, as provided by Google Chrome Extensions documentation on SCP is to place the code to a separate file and use proper binding to click event from JavaScript. See below.

Your HTML file:

<!DOCTYPE html>
<html>
<head>
  <script src="editorial.js"></script>
</head>
<body>
  <button id="viewEditorial">View Editorial</button>
</body>
</html>

Your JavaScript file, editorial.js

function editorial() {
  chrome.tabs.query({currentWindow: true, active: true}, function(tabs){
    var tab_url=tabs[0].url;
    var new_url=tab_url.slice(11);
    chrome.tabs.create({ url:"http://www.discuss." + new_url});        
  });
}

document.addEventListener('DOMContentLoaded', function () {
  var btn = document.getElementById('viewEditorial');
  if (btn) {
    btn.addEventListener('click', editorial);
  }
});

Note: don't forget that you need to declare "tabs" permission to be able to modify the URL. See the tabs documentation.

edited Aug 30, 2014 at 9:50

answered Aug 30, 2014 at 9:44

Oleg

9,4092 gold badges45 silver badges59 bronze badges

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

2 Comments

Naman Sancheti Over a year ago

Thanks a lot for taking time out and helping me solve this. I wasn't aware of the CSP as I am new to Chrome extensions. Your solution was well-written and it did work..:)

Naman Sancheti Over a year ago

Well, I was trying to add more features and now I have been stuck on this problem- stackoverflow.com/questions/25584927/… Please take a look at it and see if u can help.

Adam M. · Accepted Answer · 2014-08-30 09:25:10Z

1

You must put your button inside the body tag, otherwise many bad things can happen and probably the browser goes in the quirks mode.

Solution:

<!DOCTYPE html>
<html>
<head>
<script>
function editorial()
{
chrome.tabs.query({currentWindow: true, active: true}, function(tabs){
    var tab_url=tabs[0].url;
    var new_url=tab_url.slice(11);
    chrome.tabs.create({ url:"http://www.discuss." + new_url});        
});
}
</script>
</head>
<body>
   <button onclick="editorial()">View Editorial</button>
</body>
</html>

answered Aug 30, 2014 at 9:25

Adam M.

1,0881 gold badge7 silver badges24 bronze badges

1 Comment

Oleg Over a year ago

Nothing bad will happen. Chrome automatically creates the <body> element and wraps the script and the button in it.

Hardik Leuwa · Accepted Answer · 2017-01-07 13:06:18Z

0

You can try with this,

<body>
  <button onclick="javascript:editorial()">View Editorial</button>
</body>

This will work in Microsoft EDGE browser also.

answered Jan 7, 2017 at 13:06

Hardik Leuwa

3,8823 gold badges16 silver badges29 bronze badges

3 Comments

Teepeemm Over a year ago

It may work in Edge, but that is beside the point: this won't work in a Chrome extension.

Hardik Leuwa Over a year ago

It must be work in Chrome, IE, Edge, Firefox and Maxthon also.

Teepeemm Over a year ago

Working in a chrome extension is different than working in chrome. Extensions explicitly disallow onclick. See the documentation.

Collectives™ on Stack Overflow

Unable to call JavaScript function in html on button click

3 Answers 3

2 Comments

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related