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);
    ?>

Quando faço o teste de recebimento no script.php no browser funciona agora quando faço pela extensão não funciona.

1

1 Resposta 1

0

Você está forçando o popup a redirecionar para o endereço, isso é considerado "inseguro" em termos das extensões Chrome e provavelmente a aplicação bloqueia, ou seja não funcionará, pois isto permitiria injetar scripts externos.

O que você pode fazer é mudar a abordagem e usar Ajax, no entanto você está usando jQuery Slim 3.2.1 e conforme o link https://blog.jquery.com/2017/03/20/jquery-3-2-1-now-available/, o slim build não tem 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.

Então troque o jQuery Slim pelo jQuery normal, baixe este arquivo: https://code.jquery.com/jquery-3.2.0.min.js e salve na mesma pasta que esta o jquery-3.2.1.slim.min.js e edite o popup.html para isto:

<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>

E então mude o form para:

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

meuform é só exemplo, pode dar o nome que quiser (sem espaços)

E então dentro do script popup.js adicione isto:

$(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
     });
});

Pronto você fará uma requisição ajax, claro que vai depender do que você deseja, se for abrir uma janela ou aba, então a situação muda de figura.

3
  • Deu erro deu erro Uncaught TypeError: $.ajax is not a function at HTMLFormElement.<anonymous> (popup.js:6) at HTMLDocument.dispatch (jquery-3.2.1.slim.min.js:3) at HTMLDocument.q.handle (jquery-3.2.1.slim.min.js:3) 15/09/2017 às 15:34
  • @VitorHugoSilva editei a resposta, leia por favor.
    – Syzoth
    15/09/2017 às 18:41
  • Muito Obrigado funcionou vou dar uma estudada sobre ajax. 18/09/2017 às 14:11

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .