Code clears page instead of going to new site

StackOverflow https://stackoverflow.com/questions/23611851

Pergunta

I've been trying to create this chrome extension that you enter an address and click a button and it goes there. This may sound like a stupid idea but somehow a server block on a site is bypassed by chrome extensions. This is my current code:

<html>
  <head>
    <title>Website Opener</title>
   <style type="text/css">
    body 
    {
  font-family: "Lucida Grande";
      height: 100%;
    }
   </style>
   <script>
      $(document).ready(function() {
      $('#url').change(function() {
        var newurl = $('#url').val();
        $('a.target').attr('href', newurl);
      });
      });
   </script>
  </head>
  <body>
    <form>
      <input type="text" id='url' value='http://'>
      <br>
      <p><a class="target" href="">Go!</a></p>
    </form>
  </body>
</html>

What it currently does is just make the page blank or clear the input box instead of going to the new site.

I have tried javascript .open() method, this is trying jQuery. I'm mainly wondering if there are any other ways to do this or if I'm missing something.

Foi útil?

Solução

This will help you:

  1. Place jQuery to your <head> or in the end of your page, but before your code.

    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

  2. Then rewrite your code to use a keypress event:

    $(document).ready(function() {
    $('#url').keypress(function() {
        $('.target').attr('href', this.value)
    })
});

FYI: change event will happen when you changed a value of your input and set the focus out of it. So if you type an url and place your mouse cursor on the link and press it, change event will trigger AFTER your click. So be careful with those events.

UPDATE: I just saw that you're doing an extension for GC. The best practices tell us to divide application by layers' aim. HTML and JS should be separated.

In your manifest.json you have to add 

"js": ["jquery.js", "content_script.js"]

and move your JavaScript logic from HTML file to the content_script.js.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top