Untitled

{
"name": "MeuSIGA",
"version": "1.1.1",
"manifest_version": 2,
"description": "Meu SIGA",


"icons": { "12": "logo.png" },

"browser_action": {
  "default_icon": "logo.png",
  "default_popup": "new.html"
},

"background": {

    "persistence": false,
    "scripts": [
            "js/background.js"
        ]
},

"permissions": [
    "background",
    "activeTab",
    "http://*.google.com/"
   ],

"content_scripts": [{

          "matches": ["*://* /*"],

        "js": ["js/functions.js", "js/jquery.min.js", "js/bootstrap.min.js"]
    }],

"commands": {
      "_execute_browser_action": {
        "suggested_key": {
          "default": "Ctrl+Shift+F",
          "mac": "MacCtrl+Shift+F"
        }

      }
    }

}

<!DOCTYPE html>

        <html lang="en">
        <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">

          <link rel="stylesheet" href="css/arquivo.css">

          <!-- Funções que tratam as escolhas do usuário-->
          <script src="js/functions.js"></script>

          <!-- Aparencia das abas -->
          <link rel="stylesheet" href="css/bootstrap.min.css">

          <!-- Transição das abas-->
          <script src="../js/jquery.min.js"></script>
          <script src="../js/bootstrap.min.js"></script>

          <title>MS Try1</title>
        </head>

        <body class="layout">

          <h4 class ="titulo">  MeuSIGA - Assistente de Personalização do SIGA Ensino </h4><br>

        <!--Menus -->

          <ul class="nav nav-tabs fonte container" role="tablist">
            <li class="nav-item">
              <a class="nav-link active " data-toggle="tab" href="#biblio">Biblioteca</a>
            </li>

          </ul>

          <!-- Abas -->
          <div class="tab-content tab">

            <!-- Submenus de Biblioteca-->

            <div class=" tab-pane active grid-container" id="biblio" align="center" onclick="ativar()">

              <div id= "consulta0" class="toggle div-inline"  align="center">
                <input type="checkbox" id="consultar-acervo" data-id="consultar-acervo"  name="toggle">
                <label for="consultar-acervo"></label>
                <p class= "nomeToogle"> Consultar Acervos</p>
              </div>

              <div id= "consulta1" class="toggle div-inline" style="display:" >
                <input type="checkbox" id="consultar-reserva" data-id="consultar-reserva" name="toggle">
                <label for="consultar-reserva"></label>
                <p class= "nomeToogle"> Consultar Reservas</p>
              </div>


                <div id = "zoom0" class="div-inline zoom" style="display:none">
                <a href="https://siga.ufvjm.edu.br/index.php?module=biblioteca&action=main:pesquisasimples" data-toggle="tooltip" data-placement="top" title="Consultar Acervo" target=“_blank”>
                  <img src="../images/consultar-acervo.png" style="width:30%" data-id="consultar-acervo" name="icons">
                </a>
                <p class= "nomeToogle"> Consultar Acervos</p>
              </div>

              <div id = "zoom1" class="toggle div-inline zoom" style="display:none">
                <a href="https://siga.ufvjm.edu.br/index.php?module=biblioteca&action=main:pesquisasimples" data-toggle="tooltip" data-placement="top" title="Consultar Reserva" target=“_blank”>
                  <img src="../images/consultar-reserva.png" style="width:30%" data-id="consultar-reserva" name="icons">
                </a>
                <p class= "nomeToogle"> Consultar Reservas</p>
              </div>

            </div>
          </div>

          <div class=" grid-container-all">

           <!--Botão Editar-->
          <div class="item1">
             <button type="button" class="btn btn-warning" id="edita" onclick="retornar()" style="display:none">Editar</button> <!--onclick chama função que retorna todos os checkbox-->
          </div>

          <!--Botão Cancelar-->
          <div class=" item2">
            <button type="button" class="btn btn-danger" id="cancela" onclick="desmarcar()">Cancelar</button> <!-- onclick chama função para desmarcar os ckeckbox-->
          </div>

          <!--Botão Aplicar-->
          <div class=" item1">
            <button type="button" class="btn btn-success" id="aplica" onclick="checar()" disabled> Aplicar</button> <!--onclick chama função que verifica os checkbox e pega as img correspondentes-->
          </div>


        </div>


        </body>

        </html>

//Verifca se os checkbox estão marcados, caso esteja, pega as img correspondentes

        function checar(){

             var checa = document.getElementsByName("toggle");
             var img = document.getElementsByName("icons");


             var numElementos = checa.length;
             var i = 0;

             while (i <= numElementos){

                if(checa[i].checked == true){

                    var dataCheckbox = checa[i].dataset.id;
                    var dataImage = img[i].dataset.id;

                    if (dataCheckbox[i] == dataImage[i]){

                       document.getElementById("zoom"+i).style.display = 'inline-block'; // mostra imagem
                       document.getElementById("consulta"+i).style.display = 'none'; // oculta checkbox marcada
                       document.getElementById("aplica").style.display = 'none'; // oculta botão aplicar
                       document.getElementById("edita").style.display = 'inline'; // mostra botão editar
                       document.getElementById("cancela").style.display = 'none'; // oculta botão cancela


                    }

                }
                else{
                    document.getElementById("consulta"+i).style.display = 'none'; // oculta checkbox marcada
                }

                i++;
             }
        }

        function ativar(){

            var checa = document.getElementsByName("toggle");
            var numElementos = checa.length;
            var bt = document.getElementById("aplica");

            for(var x=0; x<numElementos; x++){
                checa[x].onclick = function(){
                    var cont = document.querySelectorAll("input[name='toggle']:checked").length;
                    bt.disabled = cont ? false : true;
                }
            }
        }