简单的JavaScript Chrome扩展程序 - 打开URL - 从输入文本修改 [英] Simple JavaScript Chrome Extension - Opening a URL - modified from Input Text
问题描述
我试图使用下面的代码来做一个简单的扩展名，有输入文本和一个按钮，当点击一个按钮时，我想拉起一个特定的URL。我在编写代码时遇到了麻烦。我是相当新的JavaScript。
<！doctype html>
< html>
< head>
< title>标题名称< / title>
< style>
body {
min-width：357px;
overflow-x：hidden;
}
img {
margin：5px;
border：2px纯黑色;
vertical-align：middle;
width：75px;
height：75px;
}
< / style>
< / head>
< body>
< input type =textname =enterclass =entervalue =67id =lolz/>
< button type =buttonid =the_button> LookUp Site ID< / button>
< script src =popup.js>< / script>
< / body>
< / html>
popup.js - 已更新
var VanillaRunOnDomReady = function（）{
document.getElementById（'the_button'）。addEventListener（'click'，myFunction）;
函数myFunction（）{
var siteid = document.getElementById（'lolz'）value
//window.location =https://www.websiteimusing.com/siteid+ SITEID;
chrome.tabs.create（{url：https://www.websiteimusing.com/siteid+ siteid}）;
}
}
}
Manifest.json
{
manifest_version：2，
name：ID URL opener，
description：输入ID并且它会拉出正确的URL，
version：1.0，
browser_action：{
default_icon：icon.png，
default_popup：popup.html
}，
permissions：[标签]
}
当前错误 - 已更新
它没有填充错误，只是在按钮点击时没有实际加载URL，有什么想法？ p
>好的，实现起来非常简单。 您只需添加一个background.js文件即可。
以下是扩展名的流程：
- popup.js接收输入文本
- popup.js引发
事件请求a新的标签请求 -
background.js监听事件并从请求中获取数据 -
然后background.js创建一个新的选项卡，以src作为url + input
完成后，你会愿意为我写这段代码吗？
编辑： strong>
最好的部分是，现在您不需要按照最新的Chrome扩展将消息传递给background.js docs可以从弹出窗口访问标签权限。以下代码将在弹出窗口中输入一个字符串，并将在新的选项卡中发送用户，其中在谷歌上搜索输入字符串。大部分代码都是自我解释的，知道你是否无法解决问题，我会向你发送crx +源代码。
manifest.json：
{
name：简单搜索，
version ：$ 0.1，
manifest_version：2，
description：简单搜索插件，
browser_action：{$ b $default_icon：{
19：images / icon_48.png
}，
default_title：简单搜索，
default_popup：popup.html
}，
权限：
[
标签
]，
content_security_policy：script-src'self'https://ajax.googleapis.com ; object-src'self'
}
popup.html
< html>
< head>
< style>
body {
font-family：lucida grande，tahoma，verdana，arial，sans-serif;
}
< / style>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js>< / script>
< script src =popup.js>< / script>
< / head>
< body style =width：300px;>
< center>
< h1>简单搜寻< / h1>
< input type =textid =q>< / input>
< input type =buttonid =svalue =search>
< / center>
< / body>
< / html>
$（function（）{
$（'＃s'）。click（function（）{
var url =https://www.google.com/search？ q =+ $（'＃q'）。val（）;
chrome.tabs.create（{url：url}）;
}）;
}）;
document.addEventListener（'DOMContentLoaded'）;
I'm trying to use the code below to make a simple chrome extension, to have input text, and a button, and upon a button click, I want to pull up a specific URL. I'm having trouble writing the code. I'm fairly new to JavaScript.
<!doctype html>
<html>
<head>
<title>Title Name</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="67" id="lolz" />
<button type="button" id="the_button">LookUp Site ID</button>
<script src="popup.js"></script>
</body>
</html>
popup.js - Updated
var VanillaRunOnDomReady = function() {
document.getElementById('the_button').addEventListener('click', myFunction);
function myFunction() {
var siteid = document.getElementById('lolz').value
//window.location = "https://www.websiteimusing.com/siteid" + siteid;
chrome.tabs.create({ url: "https://www.websiteimusing.com/siteid" + siteid});
}
}
}
Manifest.json
{
"manifest_version": 2,
"name": "ID URL opener",
"description": "Enter ID and it will pull up the correct URL",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": ["tabs"]
}
Current Error - Updated
It is not populating a error, just never actually loading the URL upon button click, any ideas?
okay, it's actually very simple to implement. you just need to add to this a background.js file.
Here is the flow of the extension:
- the popup.js receives the input text
- the popup.js raises
an event requesta new tab request the background.js listens to the event and gets data from the requestthe background.js then creates a new tab with the src as url+input
you're done, will you be willing for me to write this code?
EDIT: The Code
The best part is, now you will not need to pass messages to background.js as per latest chrome extension docs the tab permission can be accessed from popups. The following code will take an input string in popup and will send the user in a new tab where the input string is searched on google. Most of the code is self explanatory, Lemme know if you're not able to work it out, i will send you the crx + source
manifest.json:
{
"name" : "Simple Search",
"version" : "0.1",
"manifest_version" : 2,
"description" : "Simple Search Plugin",
"browser_action": {
"default_icon": {
"19": "images/icon_48.png"
},
"default_title": "Simple Search",
"default_popup": "popup.html"
},
"permissions" :
[
"tabs"
],
"content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'"
}
popup.html
<html>
<head>
<style>
body{
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="popup.js"></script>
</head>
<body style="width:300px;">
<center>
<h1>Simple Search</h1>
<input type="text" id="q"></input>
<input type="button" id="s" value="search">
</center>
</body>
</html>
popup.js
$(function() {
$('#s').click(function() {
var url = "https://www.google.com/search?q=" + $('#q').val();
chrome.tabs.create({url: url});
});
});
document.addEventListener('DOMContentLoaded');
这篇关于简单的JavaScript Chrome扩展程序 - 打开URL - 从输入文本修改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
