Uncaught TypeError: No se puede leer las propiedades de null (leyendo 'addEventListener') Extensión de Chrome

0

Pregunta

Estoy haciendo un autocompletar extensión de chrome. Es decir, una vez que pulsando un botón, un formulario de entrada en el contenido de la página web se rellenará con el texto de la popup.html. Yo estoy haciendo esto "no se puede leer las propiedades de null" error de partida desde donde yo añade un detector de eventos para el botón. [Uncaught TypeError: No se puede leer las propiedades de null (leyendo 'addEventListener')][1]

Aquí está mi archivo html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Autofill</title>
    <link rel="stylesheet" href="style.css">
    
  </head>
  <body>

    <p id="testText">Text to put</p>
  
    <button id="fillForm">Fill!</button>

    
    <script src="app.js" ></script>
  </body>
  
</html>

Aquí está mi app.js

console.log('background running!!!')
let testtext = document.getElementById('testText')

let button = document.getElementById('fillForm')
button.addEventListener('click', buttonClick);

function buttonClick(){
    params = {
        active: true,
        currentWindow: true
    }
    chrome.tabs.query(params, gotTabs);

    function gotTabs(tabs){
        let text = testtext.innerHTML
        let content = {
        username: text
        } 
        chrome.tabs.sendMessage(tabs[0].id, content);
    }
}

Aquí está mi content.js

console.log("Receiving message...")
chrome.runtime.onMessage.addListener(gotMessage);

function gotMessage(message, sender, sendReponse){
    document.getElementById('email').value = content.username
    
}

Por último, mi manifiesto.json

{
    "name": "Resume Autofiller",
    "description": "Build an Extension!",
    "version": "1.0",
    "manifest_version": 2,
    "browser_action":{
        "default_popup": "index.html"
    },
    "permissions": [
        "activeTab",
        "<all_urls>"
    ],
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": [ "content.js" ]
        } 
    ],
    "background": {
        "scripts": ["app.js"]
      }
    
  }

He leído en línea que debo poner mi etiqueta de secuencia de comandos en la parte inferior de la etiqueta body, pero me sigue apareciendo este error. Me siento como que estoy supervisando algo obvio, por lo que cualquier ayuda es muy apreciada. Gracias!! Adjunto es el error que estoy consiguiendo. [1]: https://i.stack.imgur.com/GyNXO.png

1

Mejor respuesta

0

Como se dijo, la eliminación del fondo de manifiesto de voluntad de solucionar este problema, pero parece ser conceptual de la mezcla en el ejemplo de código, que es la razón por la que me gustaría explicar por qué esta solución funciona.

El script se llama app.js parece ser la intención de estar en la ventana de comandos, pero se utiliza como fondo de secuencia de comandos en el ejemplo. Emergente es diferente de la de fondo. Esto ayudará a entender la diferencia entre estos dos la extensión de las partes y sus casos de uso. Por la continuidad, la explicación siguiente se hará referencia a MV3 versión y términos.

De fondo: "Un servicio en segundo plano trabajador se carga cuando es necesario, y se descargan cuando se va inactivo [...] la Estructura de fondo de secuencias de comandos en torno a los eventos de la extensión depende. Definir funcionalmente relevantes eventos permite a fondo los scripts que se encuentran latentes hasta que esos eventos son despedidos y previene la extensión de la falta de importantes factores desencadenantes". (Gestión de eventos con los trabajadores del servicio) nota Adicional: antecedentes es, literalmente, en el fondo; no es visible de la interfaz de usuario. El usuario no interactúa con los botones en el fondo (aunque es posible enviar eventos a fondo para su posterior manejo a través de paso de mensajes). Considerar la experiencia como un singleton.

Emergente: Este es uno de los lugares posibles para proporcionar una interfaz de usuario para el usuario de extensión. El emergente es activado por el usuario haga clic en el icono de la extensión de, y destruido cuando la ventana emergente que se pierde el foco (también cuando la pestaña está cerrado), y se vuelve a cargar de nuevo cuando el usuario hace clic en el icono de la próxima vez. "Como el fondo de la secuencia de comandos, este archivo debe ser declarada en el manifiesto en orden para Chrome para que se presente en la extensión de la ventana emergente. Para ello, agregue un objeto de la acción para el manifiesto y el conjunto de popup.html como la acción del default_popup." (Introducir una interfaz de usuario). En la ventana emergente que se puede agregar botones y otros elementos para que el usuario haga clic en. Emergente es específico para cada ficha. La apertura de varias ventanas del navegador y hacer clic en el icono, múltiples ventanas emergentes pueden estar abiertos al mismo tiempo.

En resumen: el error viene buscando elemento de botón en el fondo, cuando no hay ningún tipo de botones; quitando el manifiesto clave para prevenir esta situación.


Mínimo ejemplo de trabajo

de manifiesto.json: background quitar llave

{
  "name": "Resume Autofiller",
  "description": "Build an Extension!",
  "version": "1.0",
  "manifest_version": 2,
  "browser_action":{
    "default_popup": "index.html"
  },
  "permissions": [
    "activeTab",
    "<all_urls>"
  ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": [ "content.js" ]
    }
  ]
}

index.html: sin cambio

(el estilo.css se plantean no se encuentra el error, pero no una preocupación con respecto a esta pregunta)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Autofill</title>
    <link rel="stylesheet" href="style.css">
    
  </head>
  <body>

    <p id="testText">Text to put</p>
  
    <button id="fillForm">Fill!</button>

    
    <script src="app.js" ></script>
  </body>
  
</html>

app.js: se ha cambiado el texto de registro, ningún cambio significativo

console.log('popup running!!!')
let testtext = document.getElementById('testText')

let button = document.getElementById('fillForm')
button.addEventListener('click', buttonClick);

function buttonClick(){
    params = {
        active: true,
        currentWindow: true
    }
    chrome.tabs.query(params, gotTabs);

    function gotTabs(tabs){
        let text = testtext.innerHTML
        let content = {
            username: text
        }
        chrome.tabs.sendMessage(tabs[0].id, content);
    }
}

content.js: cambio de registro de salidas un poco, comentó la tarea

chrome.runtime.onMessage.addListener(gotMessage);

function gotMessage(message, sender, sendResponse){
    console.log("Receiving message...")
    console.log('message', JSON.stringify(message));
    // next line has undefined references, commenting out
    // document.getElementById('email').value = content.username
}
2021-11-21 21:21:52

gracias, he quitado el fondo de secuencia de comandos de manifiesto, sin embargo, yo todavía estoy recibiendo el mismo error. La única diferencia es que ahora el Contexto salidas de la pestaña actual en el que estoy, en contraste con _generated_background_page.html que fue mostrado antes. La lectura en línea, la manera de arreglar "la propiedad se establece en null" de un botón, ya sea mediante la comprobación de errores de nomenclatura, o la adición de un evento DOMContentLoaded oyente, lo cual hice y me sigue apareciendo el mismo error
Chris Wu

OK, me permito publicar un mínimo ejemplo de trabajo. Voy a editar la respuesta.
Neea

No hay ningún botón en el fondo, a menos que se generadas en primer lugar. getElementById seguirá retorno definido tras la comprobación de nomenclatura o de espera para la carga de contenido. El fondo debe ser pensado sin cabeza (aunque en mv2 es posible ver la página generada, sino que el usuario no se vea).
Neea

wow que ayudaron a aclarar un montón de cosas, yo tengo que trabajar. Muy apreciada!!!! Tenía que ver con el paso de mensajes (message.nombre de usuario en lugar de contenido.nombre de usuario)
Chris Wu

En otros idiomas

Esta página está en otros idiomas

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Slovenský
..................................................................................................................