从 chrome 扩展的文本条目中打开一个新选项卡答案

【问题标题】：Opening a new tab from text entry from chrome extension从 chrome 扩展的文本条目中打开一个新选项卡
【发布时间】：2016-12-08 17:27:58
【问题描述】：

我正在尝试制作一个接受输入的 chrome 扩展，将其添加到 URL，然后在新选项卡中打开该 URL。到目前为止，我已经让我的 popup.html 自己工作，但我正在努力让代码与扩展一起工作。

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

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

  "permissions": ["tabs"]
}

这是我的 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>

这是我的 popup.html。我看到了this 页面，但我正在努力将 chrome.tabs.create 方法应用于我当前的代码。感谢任何帮助，对于 js 和 chrome dev 来说还是新手！

编辑：我看到内联 javascript 在 chrome 中不可执行。有没有办法我可以写这个（可能在一个单独的 .js 文件中）来实现我的目标？

【问题讨论】：

Chrome Extension - Content Security Policy - executing inline code的可能重复
因此，如果以我所做的方式无法实现，我可以从哪里开始更改它？这是我经过数小时搜索后得出的答案。

标签： javascript google-chrome-extension

【解决方案1】：

由于不能使用内联 Javascript，因此需要将 Javascript 代码编写在单独的源文件中。例如：

popup.html

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

在一个单独的文件中：

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;

【讨论】：