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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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