send a post to a Localhost in a chrome extension [closed]

Question

send a post to a Localhost in a chrome extension [closed]

Navigation

#1 by (0 votes)

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>

script.php

    <?php
       var_dump($_POST);
    ?>

When I do the receive test in script.php in the browser it works now when I do the extension does not work.

php html

asked by anonymous 14.09.2017 / 21:25

1 answer

Get path of image and not blob: // How do I persist and update Google's oauth 2.0 Token Access?

score 0 · Accepted Answer

You are forcing the popup to redirect to the address, this is considered "unsafe" in terms of the Chrome extensions and probably the application blocks, or will not work, as this would allow inject external scripts.

What you can do is change the approach and use Ajax, however you are using jQuery Slim 3.2.1 and the

Slim build

Sometimes you do not 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 change jQuery Slim through jQuery normal, download this file: link and save it to same folder as jquery-3.2.1.slim.min.js and edit 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 an example, you can give it any name you want (without 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
     });
});

You will then be asked to do a ajax request, of course it will depend on what you want, if you open a window or tab, then the situation changes.