0

Intente hacer una extension a modo de prueba usando un tutorial, pero por alguna razón no funciona la parte de js

Este es el tutorial

Yo hice todo el procedimiento de codigo igual, pero no se si hubo alguna actualización en Firefox que rompe el codigo javascript. Porque el html funciona.

Esto es lo que tengo en manifest.json

{

    "manifest_version": 2,
    "name": "Sepia",
    "version": "1.0",
  
    "description": "Gives everything a sepia like tone.",
  
    "content_scripts": [
      {
        "matches": [ "<all_urls>" ],
        "js": ["content_script.js"]
          }
    ],

    "browser_action": {
      "browser_style": true,
      "default_icon": {
        "48": "sepia.png"
      },
      "default_title": "Sepia",
      "default_popup": "popup.html"
    },
    
    "permissions": [
      "storage"
    ]
  }

Esto es lo que tengo en popup.html

<!DOCTYPE html>

<head>

<style>

body{
 padding: 1em;
}

input{
 margin-left: 1em;
}


</style>


</head>
    <meta charset="utf-8"></meta>
    <meta name="viewport" content="width=device-width"></meta>
<body>

    <label>Sepia Control
        <input type="range" min="0" max="100" width="100">
    </label>

    <script src="popup.js"></script>
</body>

</html>

Esto es lo que tengo en popup.js, que agarra el valor actual del color

let input = document.querySelector('input'); //

input.addEventListener('change', e => setValue(e.target.value));

async function setValue(value){
    await browser.storage.local.set({value})
}

async function init(){
    let { value } = browser.local.storage.get('value');
    if(!value){
        value = 0;
    }

    input.value = value;
    setValue(value);

}

init().catch(e => console.error(e));

Esto es lo que tengo en content_script.js, que es el codigo que deberia en teoria cambiar todo

    let style = document.createElement('style');
    document.body.appendChild(style);
    
    browser.storage.onChanged.addListener((changes, area) => {
    
        if(area === 'local' && value in changes) {
            update(changes.value.NewValue);
        }
    });
    
    function update(value){
        style.innerText = 'html {filter: sepia($[value]%) !important }';
    
    }
    
    let style = document.createElement('style');
document.body.appendChild(style);

browser.storage.onChanged.addListener((changes, area) => {

    if(area === 'local' && value in changes) {
        update(changes.value.NewValue);
    }
});

function update(value){
    style.innerText = 'html {filter: sepia($[value]%) !important }';

}

browser.storage.local.get('value').then(result => update(result.value));
3
  • Tutorial de hace 2 años y con los comentarios desactivados, creo que tiene todo lo que se necesita como para no fiarse de esa información. Esto es cuestión de ponerse a comprobar código hasta que se descubra que no está haciendo el trabajo o ver que error devuelve
    – ICIM
    el 29 jul. 2021 a las 22:56
  • No devuelve ningun error, el console.log parece no funcionar
    – Shredder
    el 30 jul. 2021 a las 3:15
  • En las extensiones únicamente funciona el console.error()
    – ICIM
    el 30 jul. 2021 a las 6:51

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.