onclick o script inline no está trabajando en extensión

Esto parece ser lo más fácil de hacer, pero no funciona. En un navegador normal los archivos .html y .js funciona perfectamente, pero en la extensión Chrome/Firefox la onClick La función no es realizar lo que se supone que debe hacer.

.js file:

function hellYeah(text) {
  document.getElementById("text-holder").innerHTML = text;
}

.html file:

html

  
    
      Getting Started Extension's Popup
    
    
  
  
    

      ha
    

    

    
      hyhy

Así que básicamente una vez que el usuario haga clic en "hyhyhy", "ha" debe cambiar en "xxx". Y de nuevo - funciona perfectamente en el navegador pero no funciona en la extensión. ¿Sabes por qué? Sólo por si estoy adjuntando el manifiesto. json abajo también.

manifest.json:

{
  "name": "My First Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "http://api.flickr.com/"
  ]
}

Pregunta hecha hace 11 años, 5 meses, 20 días - Por techwizkid

7 Respuestas:

  • Las extensiones de Chrome no le permiten tener JavaScript en línea (documentación).
    Lo mismo ocurre con Firefox WebExtensions (documentación).

    Vas a tener que hacer algo similar a esto:

    Asignar un ID al enlace ( se convierte en ), y uso addEventListener para atar el evento. Ponga lo siguiente en su popup.js archivo:

    document.addEventListener('DOMContentLoaded', function() {
    var link = document.getElementById('link');
    // onClick's logic below:
    link.addEventListener('click', function() {
        hellYeah('xxx');
    });
});

    popup.js debe ser cargado como un archivo de script separado:

    Respondida el Nov 27, 2012 a las 20:04 - por codesculptor

    Votos positivos: 0 | Votos negativos: 0

  • Razón

    Esto no funciona, porque Chrome prohíbe cualquier tipo de código inline en extensiones a través de la Política de Seguridad de Contenidos.

    Inline JavaScript no será ejecutado. Esta restricción prohíbe ambas inlineaciones

    Alternativa si usas jQuery:

    // jQuery
$(document).ready(function() {
  $("#click-this").click(handler);
});

    Relajar la política

    Q: El error menciona formas de permitir código inline. No quiero / no puedo cambiar mi código, ¿cómo puedo activar scripts inline?

    A: A pesar de lo que dice el error, usted no habilitar script inline:

    No hay mecanismo para relajar la restricción contra ejecutar JavaScript inline. En particular, establecer una política de script que incluya 'unsafe-inline' no tendrá efecto.

    Actualización: Desde Chrome 46, es posible para los bloques de código de inline específicos de la lista blanca:

    A partir de Chrome 46, los scripts inline se pueden codificar especificando el hash de base64 del código fuente en la política. Este hash debe ser prefijado por el algoritmo hash usado (sha256, sha384 o sha512). See Uso de Hash para

    Respondida el Nov 27, 2012 a las 20:09 - por debugdragon

    Votos positivos: 0 | Votos negativos: 0

  • Tenía el mismo problema, y no quería reescribir el código, así que escribí una función para modificar el código y crear los eventos declarados inline:

    function compile(qSel){
    var matches = [];
    var match = null;
    var c = 0;

    var html = $(qSel).html();
    var pattern = /(<(.*?)on([a-zA-Z]+)\s*=\s*('|")(.*)('|")(.*?))(>)/mg;

    while (match = pattern.exec(html)) {
        var arr = [];
        for (i in match) {
            if (!isNaN(i)) {
                arr.push(match[i]);
            }
        }
        matches.push(arr);
    }
    var items_with_events = [];
    var compiledHtml = html;

    for ( var i in matches ){
        var item_with_event = {
            custom_id : "my_app_identifier_"+i,
            code : matches[i][5],
            on : matches[i][3],
        };
        items_with_events.push(item_with_event);
        compiledHtml = compiledHtml.replace(/(<(.*?)on([a-zA-Z]+)\s*=\s*('|")(.*)('|")(.*?))(>)/m, "<$2 custom_id='"+item_with_event.custom_id+"' $7 $8");
    }

    $(qSel).html(compiledHtml);

    for ( var i in items_with_events ){
        $("[custom_id='"+items_with_events[i].custom_id+"']").bind(items_with_events[i].on, function(){
            eval(items_with_events[i].code);
        });
    }
}

$(document).ready(function(){
    compile('#content');
})

    Esto debe eliminar todos los eventos en línea del nodo seleccionado, y recrearlos con jquery en su lugar.

    Respondida el Nov 27, 2012 a las 20:18 - por syntaxsculptor

    Votos positivos: 0 | Votos negativos: 0

  • Decidí publicar mi ejemplo que usé en mi caso. Traté de reemplazar el contenido en div usando un script. Mi problema era que Chrome no reconoció / no ejecutar ese script.

    En más detalle Lo que quería hacer: Para hacer clic en un enlace, y ese enlace para "leer" un archivo html externo, que se cargará en una sección div.

    • Me enteré de que colocando el script antes del DIV con ID que fue llamado, el guión no funcionó.
    • Si el script estaba en otro DIV, también no funciona

    • El script debe ser codificado usando document.addEventListener('DOMContentLoaded', function() como se le dijo

          
     loving   

        
    

  
      
        "here is loaded the external html file when the loving link will 
         be  clicked. "

    Respondida el Nov 27, 2012 a las 20:23 - por scriptsorcererf493

    Votos positivos: 0 | Votos negativos: 0

  • Como ya se ha mencionado, Chrome Extensiones no permiten tener JavaScript inline debido a razones de seguridad para que pueda probar este workaround también.

    Archivo HTML

    html
    
        
            
                Getting Started Extension's Popup
            
            
        
        
            
    ha

    
            
                  hyhy
            
        
    
html

    popup.js

    window.onclick = function(event) {
    var target = event.target ;
    if(target.matches('.clickableBtn')) {
        var clickedEle = document.activeElement.id ;
        var ele = document.getElementById(clickedEle);
        alert(ele.text);
    }
}

    O si usted está teniendo un archivo Jquery incluido entonces

    window.onclick = function(event) {
    var target = event.target ;
    if(target.matches('.clickableBtn')) {
        alert($(target).text());
    }
}

    Respondida el Nov 27, 2012 a las 20:28 - por devgeek

    Votos positivos: 0 | Votos negativos: 0

  • El problema que estás experimentando se debe a las políticas de seguridad de Chrome y Firefox que restringen la ejecución de scripts inline en extensiones. Para solucionar este problema, puedes realizar los siguientes ajustes en tu código:

    • En lugar de usar `onclick` en el HTML para llamar a la función `hellYeah(text)`, puedes registrar el evento de clic de manera programática en el archivo JavaScript. Así es como se vería el código modificado:

    popup.js:

    js
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('text-holder').innerHTML = 'ha';

  document.getElementById('hyhy').addEventListener('click', function() {
    hellYeah('xxx');
  });
});

function hellYeah(text) {
  document.getElementById('text-holder').innerHTML = text;
}

    popup.html:

    html

  
    Getting Started Extension's Popup
    
  
  
    
    
    
    
    hyhy
    1. En el

    Respondida el Nov 28, 2012 a las 20:03 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Posibles causas del problema:

    Restricciones de seguridad en las extensiones: Las extensiones tienen restricciones de seguridad más estrictas que los navegadores normales, lo que podría estar bloqueando la ejecución de scripts inline. Contexto aislado: El código de la extensión se ejecuta en un contexto aislado, separado del código de la página web que se muestra en la ventana emergente. Esto significa que los scripts inline en la página web pueden no poder acceder a las funciones y variables de la extensión. Errores de sintaxis o permisos: Revisa cuidadosamente tu código para detectar cualquier error de sintaxis o falta de permisos que puedan estar impidiendo que el código se ejecute correctamente.

    Soluciones propuestas:

    • Utiliza mensajes de eventos: En lugar de utilizar scripts inline, considera el uso de mensajes de eventos para comunicar entre el código de la página web y la extensión. Esto implica enviar mensajes desde la página web a la extensión y procesarlos allí.
    • Inyecta código desde la extensión: Inyecta el código de la extensión en la página web utilizando un script de contenido. Esto te permitirá acceder a las funciones y variables de extensión desde la página web.
    • Utiliza una API de extensión: Comprueba si hay una API de extensión que proporcione la funcionalidad que necesitas. Las API de extensión están diseñadas para ser usadas dentro de las extensiones y pueden proporcionar un acceso más confiable a las funciones del navegador.
    • Revisa los permisos: Asegúrate de que tu extensión tenga los permisos necesarios para acceder a las partes del navegador que necesitas. Verifica el manifiesto de tu extensión para asegurarte de que has solicitado los permisos correctos.
    • Depura el código: Utiliza las herramientas de depuración del navegador para depurar tu código y encontrar cualquier error. Esto te ayudará a identificar dónde se está produciendo el problema.

    Ejemplo de código utilizando mensajes de eventos:

    Página web (popup.html):

    html

    Extensión (background.js):*

    javascript
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === "hello") {
    document.getElementById("text-holder").innerText = request.text;
  }
});

    Este código envía un mensaje desde la página web a la extensión y luego la extensión procesa el mensaje y realiza la acción solicitada (en este caso, cambiar el texto del elemento "text-holder").

    Respondida el Nov 28, 2012 a las 20:04 - por Gemini

    Votos positivos: 0 | Votos negativos: 0