0

Estoy aprendiendo a desarrollar extensiones de Google Chrome pero no entiendo porque recibo este error cuando tengo declarada el elemento en el HTML.

He encontrado este articulo, pero he intentado de todo y no consigo solucionarlo.

He probado, tal y como esta en el ejemplo, a poner el active.addEventListener dentro del onload para ver si el problema era que cuando la linea de codigo era ejecutada, el elemento no habia sido creado aún.

Tambien he modificado partes del manifest para ver si era algun tema de los permisos, host permitido, etc... y nada.

Este es mi manifest:

{
  "manifest_version": 3,
  "name": "UnderLined Traductor",
  "version": "1.0",
  "author": "Angel Acedo Moreno",
  "description": "Underlined Traductor allows you to traduce automatically underlined texts",
  "permissions": [
    "scripting",
    "tabs",
    "storage",
    "activeTab"
  ],
  "host_permissions": [
    "*://*/"
  ],

  "background": {
    "service_worker": "./background.js"
  },
  "action": {
    "default_icon": {
      "16": "assets/img/icon.png",
      "24": "assets/img/icon.png",
      "32": "assets/img/icon.png"
    },
    "default_title": "Coolest extension",
    "default_popup": "./popup.html"
  }
}

Este es mi background.js:

chrome.runtime.onInstalled.addListener(details =>
{
    chrome.storage.sync.set({ active: true }, () =>
    {
        console.log('Value is set to ' + true);
    });
});

    chrome.tabs.onActivated.addListener(async (info) =>
    {
        await chrome.scripting.executeScript({
            target: { tabId: info.tabId },
            files: ['./popup.js'],
        }).catch(console.error);
    
    });

este mi popup.js:

const setStatus = async (status) =>
{
    await chrome.storage.sync.set({ active: status }, () =>
    {
        console.log('Value is set to ' + status);
    });
};

const getStatus = async (callback) =>
{
    await chrome.storage.sync.get(['active'], callback);

};
/*const getHightLightedText = () =>
{
    document.addEventListener('mouseup', event =>
    {
        if (window.getSelection().toString() != "")
        {
            console.log(window.getSelection().toString());
        }
    });
};*/

window.onload = () =>
{
    const active = document.getElementById('active');
    getStatus((status) =>
    {
        if (status.active)
        {
            active.checked = true;
        } else if (!status.active)
        {
            active.checked = false;
        }
    });

    active.addEventListener('click', () =>
    {
        if (active.checked && active != null)
        {
            setStatus(true);

        } else
        {
            setStatus(false);
        }

        getStatus((status) => { console.log(status.active); });
    });
};

y este el popup.html:

<body>
    <div class="container text-center">

        <div class="check-box-group">
            <label class="custom-checkbox" tab-index="0" aria-label="Checkbox Label">
                <input type="checkbox" id="active">
                <span class="checkmark"></span>
                <span class="label">Enabled</span>
            </label>
        </div>

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

</body>

Gracias por la ayuda

1
  • Mira a ver qué versión de Chrome es. En la versión 17 se llamaba onActiveChanged y en la 18 es onActivated el 16 ago. 2022 a las 17:22

1 respuesta 1

0

La solución era bastante simple. En vez de utilizar window.load, he utilizado el evento DomContentLoaded tal que así:

window.addEventListener('DOMContentLoaded', () =>
{

    getStatus((status) =>
    {
        if (status.active)
        {
            active.checked = true;
            console.log(status.active);
        } else if (!status.active)
        {
            active.checked = false;
            console.log(status.active);

        }
    });

    active.addEventListener('click', () =>
    {

        if (active.checked && active != null)
        {
            setStatus(true);

        } else
        {
            setStatus(false);
        }
        getStatus((status) => { console.log(status.active); });
    });

});

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.