CODEWITHSUNDEEP
javascripthtmlurlgoogle-chrome-extension
Jaison Brooks
Jaison Brooks

Reputation: 5826

Simple JavaScript Chrome Extension - Opening a URL - modified from Input Text

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?

Upvotes: 0

Views: 2692

Answers (1)

whizzzkid
whizzzkid

Reputation: 1295

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:

  1. the popup.js receives the input text
  2. the popup.js raises an event request a new tab request
  3. the background.js listens to the event and gets data from the request
  4. 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');

Upvotes: 6

Related Questions