Chrome extension security policy for dynamic URLs on new tabs

Question

Im simply trying to get text from a input and from there open a URL with a newtab/window (either or) with this value included in the URL.

Example

 <html>
 <head>
<title>Getting Started Extension's Popup</title>
<style>
  body {
    min-width: 357px;
    overflow-x: hidden;
  }
  img {
    margin: 5px;
    border: 2px solid black;
    vertical-align: middle;
    width: 75px;
    height: 75px;
  }
</style>
 </head>
  <body>
   <input type="text" name="enter" class="enter" value="9999" id="lolz"/>
   <input type="button" value="click" />

  </body>
</html>

popup.js (Unsure about)


chrome.browserAction.onClicked.addListener(function(activeTab){
document.getElementById('lolz').value
var newURL = "https://stackoverflow.com/" + value;
chrome.tabs.create({ url: newURL });
});

So the end result is a new window with the url "https://stackoverflow.com/9999"

Currently im getting the following error.

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".

This is on the popup.html:30

possible duplicate of [The Chrome extension popup is not working, click events are not handled](http://stackoverflow.com/questions/17601615/the-chrome-extension-popup-is-not-working-click-events-are-not-handled) — Rob W, Jul 15 '13 at 21:48

score 0 · Answer 1 · answered Jul 15 '13 at 23:55

You can't have inline scripts or function calls in your html (e.g. onclick for your input button)

Add the script with src to the head section

<head>
  ...
  <script src="popup.js"></script>
</head>

Add an id to your button.

popup.js should look like this:

document.addEventListener('DOMContentLoaded', function () {
    document.querySelector('input#yourButtonID').addEventListener('click', popup);
});
function popup()
{
    var newURL = "http://stackoverflow.com/" + document.getElementById("lolz").value;
    chrome.tabs.create({ url: newURL });
}

Change yourButtonID with the actual id.

Chrome extension security policy for dynamic URLs on new tabs

1 Answers1