Opening a new tab from text entry from chrome extension

Question

I'm trying to make a chrome extension that takes input, adds it to a URL and then opens the URL in a new tab. So far I've gotten my popup.html to work on its own but I'm struggling to get the code working with the extension.

{
  "manifest_version": 2,
  "name": "SubSearch",
  "description": "A simple way to go to subreddits",
  "version": "0.1",

  "browser_action": 
  {
    "default_popup": "popup.html"
  },

  "permissions": ["tabs"]
}

Here is my manifest.json

<!DOCTYPE html5>
<html>
<body>
<script>
function process()
{
var url="http://reddit.com/r/" + document.getElementById("url").value;
location.href=url;
return false;
}
</script>
<form onSubmit="return process();">
<input type="text" name="url" id="url"> <input type="submit" value="go">
</form>
</body>
</html>

and here is my popup.html. I saw this page but I'm struggling to apply the chrome.tabs.create method to my current code. Any help is appreciated, still new to js and chrome dev!

Edit: I see that inline javascript is not executable in chrome. Is there a way I can write this (possibly in a separate .js file) to allow me to achieve my goal?

Possible duplicate of Chrome Extension - Content Security Policy - executing inline code — Daniel Herr
So if it's not possible in the way I've done it, where can I look to change it to get started? This is the answer I came to after hours of searching. — Guidan

Iván Nokonoko Iván Nokonoko · Accepted Answer · 2016-12-08T09:27:58

Since you can't use inline Javascript, you need to write the Javascript code in a separate source file. For instance:

popup.html

<html>
<body>
<input type="text" name="url" id="url"><button id="myButton">go</button>
<script src="popup.js"></script>
</body>
</html>

and in a separate file:

popup.js

function process()
{
var url="http://reddit.com/r/" + document.getElementById("url").value;
chrome.tabs.create({url:url});  //create a new tab
}
document.getElementById("myButton").onclick = process;

Opening a new tab from text entry from chrome extension

1 Answers