send a post to a Localhost on a Chrome extension

Question

send a post to a Localhost on a Chrome extension

Asked 7 years, 2 months ago

Viewed 487 times

0

manifest.json

"manifest_version": 2,
"name": "Sample Extension",
"description": "Sample Extension",
"version": "1.0",
"browser_action": {
  "default_popup": "popup.html"
},
"background":{
   "scripts":["background.js"]
},
"permissions": [
  "http://localhost/*"
]

popup.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="bootstrap-3.3.7-
    dist/css/bootstrap.min.css">
    <script src="jquery-3.2.1.slim.min.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <style>
    .container{
     padding: 5px;
     min-width: 250px;
     }
    </style>
    <script src="popup.js"></script>
    </head>
    <body>
    <div class="container">
    <form action = "http://localhost/db1/script.php" method="post">
        <div class="form-group">
        <label for="usr">Usuário:</label>
        <input type="text" id="usuario" name="usuario"  class="form-control" 
        value="vitor">
    </div>
    <div class="form-group">
        <label for="snh">Senha:</label>
        <input type="password" name="senha"  class="form-control" >
    </div>
    <div class="form-group">
    <button class="btn ">
              <localized name="btnEntrar">Entrar</localized>
    </button>
    </div>
    </form>
    </div>
    </body>
    </html>

php script.

    <?php
       var_dump($_POST);
    ?>

When I do the receiving test in the.php script in the browser it works now when I do by extension it doesn’t work.

Welcome to Stack Overflow! You need to demonstrate the problem in the question itself (please [Edit]), instead of posting these links. See I can only show a link to my website with problems? and the tips on minimum example. Thank you.

– UzumakiArtanis

2017/09/14 at 19:37

1 answer

Browser other questions tagged php html google-chrome-extension

You are not signed in. Login or sign up in order to post.

by Guilherme Nascimento • **98,651** points · Answer 1 · 2017-09-14T20:37:11+00:00

You are forcing the popup to redirect to the address, this is considered "insecure" in terms of Chrome extensions and probably the application blocks, IE will not work because this would allow injecting external scripts.

What you can do is change the approach and use Ajax, however you are using jQuery Slim 3.2.1 and as the link https://blog.jquery.com/2017/03/20/jquery-3-2-1-now-available/, slim build has no Ajax:

Slim build

Sometimes you don’t need ajax, or you prefer to use one of the Many standalone Libraries that Focus on ajax requests. And often it is Simpler to use a Combination of CSS and class Manipulation for all your web animations. Along with the regular version of jQuery that includes the ajax and effects modules, we’ve Released a "slim" version that excludes These modules. The size of jQuery is very rarely a load performance Concern These days, but the slim build is about 6k gzipped bytes smaller than the regular version - 23.6k vs 30k.

Then exchange jQuery Slim for normal jQuery, download this file: https://code.jquery.com/jquery-3.2.0.min.js and save in the same folder as this jquery-3.2.1.slim.min.js and edit the popup.html for this:

<link rel="stylesheet" href="bootstrap-3.3.7-
dist/css/bootstrap.min.css">
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

And then change the form to:

<form id="meuform" action = "http://localhost/db1/script.php" method="post">

meuform is just example, can give the name you want (no spaces)

And then inside the popup.js script add this:

$(document).on("submit", "#meuform",function (e) {
      e.preventDefault();

      var meuform = $(this);

      $.ajax({
         type: "POST",
         url: meuform.attr("action"), //Pega o action do FORM
         data: meuform.serialize() //Pega os campos do FORM
     }).done(function (resposta) {
          alert(resposta); //Exibe a resposta
     }).fail(function (xhr, status) {
          alert("erro:" + status); //Exibe na requisição Ajax
     });
});

Ready you will make a request ajax, of course it will depend on what you want, if you open a window or tab, then the situation changes of figure.