Good evening guys, I made an extension to chrome but the javascript does not want to work, I already loaded it in developer mode, I already uploaded a google store version for testing and nothing, could you help me please?
Manifest.json
{
"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"
}
}
}
}
interface.html
<!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>
functions.js
//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;
}
}
}
background.js
// When the user clicks the browser-action button...
chrome.browserAction.onClicked.addListener(function(tab) {
// ...inject 'jquery.min.js' and...
chrome.tabs.executeScript(tab.id, {
file: "functions.js",
allFrames: true,
runAt: "document_idle"
});
chrome.tabs.executeScript(tab.id, {
file: "js/jquery.min.js",
allFrames: true,
runAt: "document_idle"
});
});