Simple JavaScript Chrome Extension - Opening a URL - modified from Input Text
Question
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?
1 answers
solution1
6 ACCPTED 2013-07-17 04:23:04
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 request -
the 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');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.