Extension does not execute and does not show which error

Question

Extension does not execute and does not show which error

Asked 4 years, 8 months ago

Viewed 22 times

0

I’m having a problem, I’m trying to create an extension to check the state of emission of Cpfs, but when clicking on the "check" button the extension does nothing, but also does not present the error.

This is the manifest.json: { "manifest_version": 2,

"name": "CPF",
"description": "Verifica o estado de emissão de um CPF",
"version": "1.0",

"browser_action": { "default_icon": "128.png", "default_popup": "index.html"

} }

document.getElementById("btn").addEventListener('click', verificar);

function verificar() {
    let cpf = document.getElementById("cpf").value.substring(8, 9);

    if (cpf == "0") alert("Rio Grande do Sul");
    else if (cpf == "1") alert(" Distrito Federal – Goiás – Mato Grosso – Mato Grosso do Sul – Tocantins ");
    else if (cpf == "2") alert("  Pará – Amazonas – Acre – Amapá – Rondônia – Roraima");
    else if (cpf == "3") alert(" Ceará – Maranhão – Piauí");
    else if (cpf == "4") alert(" Pernambuco – Rio Grande do Norte – Paraíba – Alagoas ");
    else if (cpf == "5") alert(" Bahia – Sergipe   ");
    else if (cpf == "6") alert("Minas Gerais ");
    else if (cpf == "7") alert("Rio de Janeiro – Espírito Santo");
    else if (cpf == "8") alert(`São Paulo`);
    else if (cpf == "9") alert("Paraná – Santa Catarina");
}

body{
    background-color: #F0E68C;
}

#cpf{
    background-color: #FFFFF0;
    width: 200px;
    border-radius: 40px 40px 40px 40px;
    border: 0;
    padding: 10px 15px;
}
#btn{
    width: 200px;
    border-radius: 40px 40px 40px 40px;
    border: 0;
    padding: 10px 15px; 
    text-align:center;
    margin: 10px;
    color: white;
    background-color: #FF8C00;
}
h1{
    color: #FFFFF0;
    font-size: 26px;
    text-align: center;
}
#box{
    text-align: center; 
}

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <link rel="stylesheet" href="style.css">
        <title>CPF</title>
    </head>
    <body>
        <h1>Digite o CPF</h1>
        <input id="cpf" type="text">
        <button id="btn">Verificar</button>
        <div id="res">
            <h1>
                
            </h1>
        </div>
    </body>
</html>

1 answer

Browser other questions tagged javascript json google-chrome-extension

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

by ScrapBench • **634** points · Answer 1 · 2019-10-13T21:08:39+00:00

You’ve tried that already ? Only put the function inside a . js file and reference in HTML And maybe it would be better to check the size of the input and some more error detectors because if my input is 3 chars you will not be able to get substring 8-9.

function verificar() {

     
    let cpf = document.getElementById("cpf").value.substring(8, 9);

    if (cpf == "0") alert("Rio Grande do Sul");
    else if (cpf == "1") alert(" Distrito Federal – Goiás – Mato Grosso – Mato Grosso do Sul – Tocantins ");
    else if (cpf == "2") alert("  Pará – Amazonas – Acre – Amapá – Rondônia – Roraima");
    else if (cpf == "3") alert(" Ceará – Maranhão – Piauí");
    else if (cpf == "4") alert(" Pernambuco – Rio Grande do Norte – Paraíba – Alagoas ");
    else if (cpf == "5") alert(" Bahia – Sergipe   ");
    else if (cpf == "6") alert("Minas Gerais ");
    else if (cpf == "7") alert("Rio de Janeiro – Espírito Santo");
    else if (cpf == "8") alert(`São Paulo`);
    else if (cpf == "9") alert("Paraná – Santa Catarina");
    else alert("Entrou na funcao mas suas condicoes nao sao verificadas.");
}

body{
    background-color: #F0E68C;
}

#cpf{
    background-color: #FFFFF0;
    width: 200px;
    border-radius: 40px 40px 40px 40px;
    border: 0;
    padding: 10px 15px;
}
#btn{
    width: 200px;
    border-radius: 40px 40px 40px 40px;
    border: 0;
    padding: 10px 15px; 
    text-align:center;
    margin: 10px;
    color: white;
    background-color: #FF8C00;
}
h1{
    color: #FFFFF0;
    font-size: 26px;
    text-align: center;
}
#box{
    text-align: center; 
}

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <link rel="stylesheet" href="style.css">
        <title>CPF</title>
        
    </head>
    <body>
        <h1>Digite o CPF</h1>
        <input id="cpf" type="text">
        <button onclick="verificar();" id="btn" >Verificar</button>
        <div id="res">
            <h1>
                
            </h1>
        </div>
    </body>
  <script src="script.js"></script>
</html>