redirect page to URL Jquery Google Chrome Extension

Question

Really new to HTML, JavaScript, and Jquery, but I am looking to learn and eventually hoping to make a "shoe bot" program by way of a google chrome extension.

Right now, I just want to link my "Go!" button to take the user to google.com. It works when I load my HTML document into Chrome directly, however when I try to do the same inside the extension I created, nothing happens.

Here's my manifest file:

 {
  "manifest_version": 1,

  "name": "Shoe bot",
  "description": "This extension will provides an ATC & purchase service
               for shoes",
  "version": "1.0",

  "browser_action": {
   "default_icon": "yeezy.png",
   "default_popup": "popup.html"
  },

  "content_scripts":[{

  "js": ["jquery.js","popup.js"],
  "matches": ["http://*/*", "https://*/*"]
  }]
}

And then my HTML (popup.html):

<!doctype html>
<html>
  <head>
  <script src="jquery.js"></script>
  <script src="popup.js"></script>
    <h1>Size</h1>
    <p>
    </p>
    <select>
      <option value = "5.0">5.0</option>
      <option value = "6.0">6.0</option>
      <option value = "7.0">7.0</option>
      <option value = "8.0">8.0</option>
      <option value = "9.0">9.0</option>
      <option value = "10.0">10.0</option>
      <option value = "11.0">11.0</option>
      <option value = "12.0">12.0</option>
    </select>
    <p>
    </p>
  </head>
  <body>
  <p>
  </p>
    <button>Go!</button>
  </body>
</html>

And then my JavaScript file (popup.js):

  $(document).ready(function(){
    $("button").click(function(){
        window.location.href = "http://www.google.com";
    });
});

Any tips/help is appreciated

score 1 · Answer 1 · answered May 18 '16 at 01:44

I agree with the first answer, that HTML should be used instead of JavaScript for redirection purposes:

<a href="http://www.google.com">Go!</a>

However, if you want to use JavaScript for this (since you said you want to learn), I have listed a few issues I noticed in your code:

Head tag

There are user controls inside the head tag, instead of the body tag. Inside the headtag, there should only be stuff invisible to the user, but relevant to the browser, such as title, scriptand link. Therefore, move your </head> and <body>tag up like so:

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <title>Size</title>
</head>
<body>
    <!--Site content begins here-->
    <h1>Size</h1>

External URLs

For any URL to an external website, should always start with "http://" or "https://". Otherwise you will end up on http://example.com/google.com. For the function, change into this:

window.location.href = "http://google.com";

Bonus debugging tips

Use the console in your browser to check any errors. This is usually accessible by hitting F12 in your browser. Check all the red errors and try to make sense of them. In my experience, the best way to learn to code is to analyze the errors.

Thanks! Any idea why it's not working as a google chrome extension? — brownmamba, May 18 '16 at 21:14
Can you describe exactly what isn't working as a google chrome extension? The whole thing, debugging or just the `window.location.href`? — Puppetmupp, May 18 '16 at 21:23
So the code I have given works just fine when I load the popup.html file into Chrome. It redirects to google.com after clicking the go button. However, in the extension I have created that is the same code, after clicking the go button. nothing happens. Is that more clear? It definitely has to do with the code acting as a google chrome extension now — brownmamba, May 18 '16 at 21:35

score 0 · Answer 2 · answered May 17 '16 at 22:37

if the only function of the button is to redirect the user to another page - the have it as a link and style it like a button using css:

<a href="http://google.com" id="runBot">Go!</a>

if you are using Bootstrap - you can incoroporate button styling into the link

<a href="http://google.com" id="runBot" class="button btn btn-primary">Go!</a>

score 0 · Answer 3 · answered May 17 '16 at 22:38

0

Just use html for this. I created a simple working JSfiddle to demonstrate: https://jsfiddle.net/tnw78uvc/

simply wrap an <a> tag with your link around your <button>

answered May 17 '16 at 22:38

Maxwelll

2,174
1
17
22

score 0 · Answer 4 · edited May 23 '17 at 11:59

There is something about the button tag you'll need to know, it causes a page reload natively. Basically what you're doing with $('#runBot').click(function () { ... }) is assigning a function (event handler) to the event click of the button. You're doing good this far, but button already has an event handler assigned to it by the browser, and it causes the page to reload before your event handler gets its stuff done.

Thankfully browsers provide a way of preventing native event handlers from firing (running themselves)

When you do

$('#runBot').on('click', function () { ... });

That function you're declaring, gets a parameter called the event parameter, which has properties and methods that let you know more about what happened (a click) and manipulate how the browser handles that click, let's call it ev.

$('#runBot').on('click', function (ev) { 
    window.location = "google.com";
});

ev has a method called preventDefault which makes exactly what you need, prevent the browser from firing it's default event handler for the event you just received.

So you have to do this:

$('#runBot').on('click', function (ev) { 
    window.location = "google.com";
    ev.preventDefault();
});

NOTE ev in jQuery is not the native event from the browser, but it makes things easier fixing incompatibilities between browsers that do whatever they want with the event, specially IE.

Hope you got that! Now let's look on why your code is not working. Basically window.location is not how you redirect to another page, you have two ways of doing that, let's use one of them window.location.href

$('#runBot').on('click', function (ev) { 
    window.location.href = "google.com";
    ev.preventDefault();
});

score 0 · Answer 5 · answered May 17 '16 at 23:13

0

This may be as easy as changing your markup:

<button type=button id="runBot">Go!</button>

The default type for a button, "submit" tries to submit a form.

answered May 17 '16 at 23:13

Xavier J

4,326
1
14
25

score 0 · Answer 6 · answered May 18 '16 at 02:26

You should write the link completely if not it will only redirect as your local page ! You also linked the jquery file path in <script> tag .Look like that path https:// don't forget also to add .href to anchor link....

$(document).ready(function(){   
$('#runBot').click(function() {    
    window.location.href = "https://google.com";
   });
 });

redirect page to URL Jquery Google Chrome Extension

6 Answers6

Head tag

External URLs

Bonus debugging tips