extensiones - habilitar javascript en chrome en windows

Agregar un botón de desactivación a la extensión de Chrome

Question

Estoy buscando agregar un botón de deshabilitar en la ventana emergente de mi extensión de Chrome que tendrá la funcionalidad de pausa como lo hace la extensión de Adblock. Esto permanecería en pausa en todas las pestañas hasta que se haga clic en el botón para volver a habilitarlo. Tengo el siguiente código en su lugar, sin embargo, el botón y la funcionalidad no funcionan actualmente.

Archivo popup.js:

function disableButton() {
var disableButton = document.getElementById("disableButton");
var isExtensionOn = true;
if (disableButton.innerHTML == "Disable") {
isExtensionOn = false;
} else if (disableButton.innerHTML == "Enable") {
isExtensionOn = true;
} else {
alert("Error");
}
}
document.addEventListener(''DOMContentLoaded'', function () {
var singleButton = document.getElementById("singleButton");
var br1 = document.getElementById("br1");
var br2 = document.getElementById("br2");
//Sends message to event.js (background script) telling it to disable the
chrome.extension.sendMessage({ cmd: "setOnOffState", data: {value: isExtensionOn} });
chrome.extension.sendMessage({ cmd: "getOnOffState"}, function(response){
console.log(response);
if (response == true){
disableButton.innerHTML = "Disable";
disableButton.className = "button button3"
disableButton.style.display = "";
br1.style.display = "";
br2.style.display = "";
}
if (response == false){
disableButton.innerHTML = "Enable";
disableButton.className = "button button1"
disableButton.style.display = "";
br1.style.display = "";
br2.style.display = "";
}
});

Hay más código debajo de esto, pero es código de funcionamiento que no se puede compartir.

Popup.html:

<button class="button button1" id="disableButton" style="display:none">Error</button>
<br id="br1" style="display:none">
<br id="br2" style="display:none">

Background.js:

var isExtensionOn = true;
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse){
if (request.cmd == "setOnOffState") {
isExtensionOn = request.data.value;
}
if (request.cmd == "getOnOffState") {
sendResponse(isExtensionOn);
}
});

Cualquier ayuda en esto es muy apreciada!

Answer 1

Después de revisar el código que ha proporcionado, parece que hay algunos errores triviales que sucedieron en el código, lo que llevó a la falla de la funcionalidad.

Estaré señalando los errores que has cometido aquí:

• En Popup.js , la variable isExtensionOn tiene el alcance funcional del disableButton() , y por lo tanto no se puede acceder dentro del document.addEventListener(''DOMContentLoaded'', function () { }) .

  El valor de isExtensionOn dentro de esta función de escucha sería undefined , lo cual no es algo que esperas en tu sistema.

  Para solucionar este problema, solo necesita definir la variable isExtensionOn en un nivel superior (por ejemplo, nivel global), para que sea accesible tanto para la function disableButton() { }) como para el detector de DOMContentLoaded de DOMContentLoaded .

• En Popup.js , el bloque de funciones chrome.extension.sendMessage({cmd: "getOnOffState"}, function (response) { }) contiene un disableButton , que veo que no está definido en el ámbito funcional del detector de DOMContentLoaded de DOMContentLoaded . Y le estás asignando algo, lo que te arrojaría errores en la consola de cualquier navegador que estés usando, que se vería así:

  Uncaught ReferenceError: disableButton is not defined

  Para solucionar este problema, debe definir el botón inhabilitar dentro del alcance del detector de DOMContentLoaded de DOMContentLoaded .

• En Popup.js , dentro del detector de DOMContentLoaded de DOMContentLoaded , ha definido una variable singleButton como var singleButton = document.getElementById("singleButton"); , pero veo que en el archivo Popup.html que ha proporcionado, no hay ningún elemento excepto el id de singleButton .

  Esto le devolvería un valor de null , de nuevo, es algo que no espera tener en su sistema.

  Para solucionar este problema, debe corregir el id mencionado, como document.getElementById("disableButton"); dentro del alcance del detector de DOMContentLoaded de DOMContentLoaded .

NOTA : Menciono algunas convenciones que puede seguir para mejorar las prácticas de codificación.

1. El nombramiento de todos los archivos html debe comenzar con minúsculas .
2. Use === lugar de == para una comparación estricta. Consulte here para más detalles sobre el mismo.
3. Use las sangrías adecuadas para no perderse ningún paréntesis o cometer errores involuntarios. ( DOMContentLoaded perdido un }) en el bloque de código donde DOMContentLoaded detector de eventos para DOMContentLoaded )

Por lo tanto, para resumir, estoy escribiendo el código completo de todos los archivos que mencionó aquí con las correcciones apropiadas :

popup.html :

<button class="button button1" id="disableButton" style="display:none">Error</button>
<br id="br1" style="display:none">
<br id="br2" style="display:none">

Popup.js :

var isExtensionOn = true;
function disableButton() {
var disableButton = document.getElementById("disableButton");
if (disableButton.innerHTML === "Disable") {
isExtensionOn = false;
} else if (disableButton.innerHTML === "Enable") {
isExtensionOn = true;
} else {
alert("Error");
}
}
document.addEventListener(''DOMContentLoaded'', function () {
var disableButton = document.getElementById("disableButton");
var br1 = document.getElementById("br1");
var br2 = document.getElementById("br2");
//Send message to event.js (background script) telling it to disable the extension.
chrome.extension.sendMessage({cmd: "setOnOffState", data: {value: isExtensionOn}});
chrome.extension.sendMessage({cmd: "getOnOffState"}, function (response) {
if (response !== undefined) {
if (response) {
disableButton.innerHTML = "Disable";
disableButton.className = "button button3";
disableButton.style.display = "";
br1.style.display = "";
br2.style.display = "";
}
else {
disableButton.innerHTML = "Enable";
disableButton.className = "button button1";
disableButton.style.display = "";
br1.style.display = "";
br2.style.display = "";
}
}
});
});

Background.js :

chrome.runtime.onMessage.addListener(
function (request, sender, sendResponse) {
if (request.cmd === "setOnOffState") {
isExtensionOn = request.data.value;
}
if (request.cmd === "getOnOffState") {
sendResponse(isExtensionOn);
}
});

Esto debería funcionar según su requisito. Por favor, lea la respuesta y hágame saber si tiene más problemas al respecto.

Answer 2

La parte del script que proporciona tiene un error de alcance. Vea esta línea en el evento DOMContentLoaded :

chrome.extension.sendMessage({ cmd: "setOnOffState", data: {value: isExtensionOn} });

Por lo que puedo decir, no hay ninguna variable llamada isExtensionOn en ese ámbito. Se define en el alcance de la función de disableButton () , pero no en el evento. Por lo tanto, su script le dirá al backend que establezca la variable como undefined .

Cuando luego procede a verificar el valor contra true y false , ninguno de los dos será el valor. Eso podría causar el problema. Para solucionarlo, cambie {value: isExtensionOn} por {value: false} .

En segundo lugar, está utilizando un botón con el ID singleButton , aunque no hay un botón con este ID. Lo está asignando a la variable singleButton , pero más abajo, está usando un botón llamado disableButton , que no está definido.

Además, a su última línea le falta el paréntesis de cierre: }) . Después de solucionar todos estos problemas, el complemento funciona bien, lo he probado.

Propina:

Puede depurar su extensión y ver los errores abriendo la ventana emergente, haciendo clic derecho en ella y luego seleccionando Inspect Element . Cambia a la pestaña de la consola. Tendrá los errores de JavaScript en él.

Answer 3

La ventana emergente puede acceder al script de fondo directamente, a través de chrome.runtime.getBackgroundPage , por lo tanto, lo hace más simple:

popup.js

var backgroundPage;
var theButton = document.querySelector("button");
function updateButton(onOrOff){
theButton.innerHTML = onOrOff ? "Disable" : "Enable";
theButton.className = onOrOff ? "button button3" : "button button1";
}
function toggleButton(){
backgroundPage.isExtensionOn = !backgroundPage.isExtensionOn;
updateButton(backgroundPage.isExtensionOn);
}
chrome.runtime.getBackgroundPage(function(bgPage) {
backgroundPage = bgPage;
updateButton(bgPage.isExtensionOn);
theButton.onclick = toggleButton;
theButton.style.display = "";
document.getElementById("br1").style.display = "";
document.getElementById("br1").style.display = "";
});
//the rest of your code just needs to check backgroundPage.isExtensionOn
//to see if the extension is on or not.

popup.html

<button class="button button1" id="disableButton" style="display:none">Error</button>
<br id="br1" style="display:none">
<br id="br2" style="display:none">
<script src="popup.js"></script>

background.js

var isExtensionOn = true; //this will be changed by popup.js directly.