Chrome扩展程序将输入追加到URL. [英] Chrome Extension Append Input to URL.

问题描述

我当前正在创建一个带有popup.html的Chrome扩展程序，在该弹出窗口中有两件事.输入字段和提交"按钮.

I'm currently creating a Chrome Extension that has a popup.html and in that pop up is 2 things. An input field and Submit button.

输入"字段从用户那里获取一个EXTN编号，当按下提交按钮时，我需要将用户导航到一个新选项卡，将用户的输入追加到末尾.

The Input field takes a EXTN number from a user and when submitted is pressed I need to then navigate the user to a new tab appending the Input from the user to the end.

当按下提交按钮时，输入= 9999用户被带到:提交= http://name.com/9999

Input = 9999 when submit is pressed user is taken to: Submit = http://name.com/9999

仅使用HTML文件时，我就可以使用它，但是当将其作为扩展程序加载到Chrome中时，它似乎没有任何作用.

I have this working with when just use the HTML file but it doesn't seem to do anything when loaded into Chrome as an Extension.

这是我用于输入和onClick的代码:

Here is my code for the input and onClick:

Popup.HTML

Popup.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文件中将其调出，但它仍然无法正常工作.

I understand that you can't run in line JS so I've called it out from the popup.js file but its still not working.

推荐答案

您无法使用Chrome扩展程序中的内联JS (将input元素中的onclick="goToPage();"视为内联Javascript).您必须全部将Javascript代码放在单独的文件中.

You can't use inline JS in Chrome extension (the onclick="goToPage();" in the input element is considered inline Javascript) . You have to put all your Javascript code in a separate file.

您将需要使用 chrome.tabs API来打开新标签.例如:

You will need to use chrome.tabs API to open a new tab. For example:

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});
}

这篇关于Chrome扩展程序将输入追加到URL.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！