Chrome 扩展程序将输入附加到 URL。

Question

我目前正在创建一个 Chrome 扩展，它有一个 popup.html，弹出窗口中有两件事。输入字段和提交按钮。

输入字段从用户处获取一个 EXTN 号码，当按下提交时，我需要将用户导航到一个新选项卡，将用户的输入附加到末尾。

输入 = 9999 按下提交后，用户将被带到：提交 = http://name.com/9999

当我只使用 HTML 文件时，我可以使用此功能，但当作为扩展加载到 Chrome 中时，它似乎没有执行任何操作。

这是我的输入和 onClick 代码：

弹出.HTML

<script src="popup.js"></script>
<input type="text" id="page" />
<input type="submit" value="submit" onclick="goToPage();" />

popup.js

function goToPage() {
var page = document.getElementById('page').value;
window.location = "http://name.com/" + page; }

我知道你不能在 JS 中运行，所以我从 popup.js 文件中调用了它，但它仍然不起作用。

Answer 1

你不能在Chrome扩展中使用内联JS（输入元素中的

onclick="goToPage();"

被认为是内联Javascript）。您必须将所有您的Javascript代码放在一个单独的文件中。

您将需要使用 chrome.tabs API 来打开新选项卡。例如：

popup.html

<input type="text" id="page" />
<button id="submit">Submit</button>
<script src="popup.js"></script>

popup.js

document.getElementById('submit').onclick = function(){
    var page = document.getElementById('page').value;
    chrome.tabs.create({url:'http://name.com/' + page});
}

Answer 2

这里的聚会晚了 5 年，但如果可能的话，考虑使用它作为快速搜索货运的方法。

我已经有一个不相关的JS书签，它看起来像这样：

javascript:document.body.contentEditable = 'true'; document.designMode='on'; void 0

并想知道是否可以使用 js 输入的 url 方法将用户输入附加到 url，就像 popup.html 和 .js 一样。因此，我单击书签，然后出现一个弹出框，我必须在其中输入数字并按 Enter 键。如果需要，我可以托管自己的 popup.js 文件，并且 chrome.tabs.create 网址将转到搜索网址。