Linking JavaScript correctly in chrome extensions

Question

So I have a chrome extension, yet the JavaScript is not loading correctly. I tried linking a file but failed miserably. Have any ideas on how I can make buttons run functions when clicked? <script> tags do not work in this and the buttons do nothing, but the initial JavaScript does run... Here is my code

manifest.json(I think it works correctly):

{
"manifest_version": 2,

"name": "Getting started example",
"description": "This extension shows a Google Image search result for the current page",
"version": "1.0",

"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab",
"https://ajax.googleapis.com/"
 ]

  }

popup.html(Functions in JavaScript don't link to this):

<body style = "margin:10px">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="popup.js"></script>
<style>
//Fancy styles
large{font-size:30px}
span{}
.input-group{width:400px}
</style>
<!-- title -->
<large>
SpeedyURLs
</large>
<hr/>
<!-- Code that won't link with JavaScript -->
<div id = "stuff">

</div>
<div class = "input-group" id = "content"><input class = "form-control" placeholder = "Enter a URL here. Ex: https://www.google.com"/><span class="input-group-addon btn btn-default" style = "font-size:20px;width:50px;color:black" id="basic-addon1" onclick = "addNew()">+        </span></div>
<button onclick = 'document.write("HELLO")'>YAS</button>
</body>

popup.js(The functions that don't link):

function open(url){
window.open(url)}
function addNew(){
document.getElementById("stuff").innerHTML = document.getElementById("stuff").innerHTML+'<div class = "input-group" id = "content"><input class = "form-control" placeholder = "Enter a URL here. Ex: https://www.google.com"/><span  style = "font-size:20px;width:50px;color:black" class="input-group-addon btn btn-danger" id="basic-addon1">x</span></div>'}

icon.png(Default image no code in it, works fine)

So, the functions in JS won't link to HTML. Any ideas?

Possible duplicate of [onClick within Chrome Extension not working](http://stackoverflow.com/questions/13591983/onclick-within-chrome-extension-not-working) — Zig Mandel, Apr 28 '16 at 01:28

score 1 · Accepted Answer · answered Apr 27 '16 at 01:00

By default, inline JavaScript will not be executed.

You could

Relax the default policy. See Inline Script for more details.
Remove onclick in popup.html and move that logic to your popup.js, code would look like (say your button id is buttonId0)
```
document.getElementById("buttonId0").addEventListener("click", function() {
    // Your logic here
}, false);
```

Linking JavaScript correctly in chrome extensions

1 Answers1