Uncaught TypeError: Impossibile leggere la proprietà è null (lettura 'addEventListener') Estensione di google Chrome

0

Domanda

Sto facendo una compilazione automatica estensione di google chrome. Cioè, una volta che la pressione di un pulsante, un modulo di immissione nel contenuto della pagina web sarà popolato da il testo del popup.html. Ricevo questo "non può leggere le proprietà di null" errore durante l'avvio, dal quale ho aggiunto un listener di eventi per il pulsante. [Uncaught TypeError: Impossibile leggere la proprietà è null (lettura 'addEventListener')][1]

Ecco il mio file 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>

Qui è il mio 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);
    }
}

Qui è il mio content.js

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

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

Infine, il mio manifesto.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"]
      }
    
  }

Ho letto online che dovrei mettere il mio tag script in fondo il tag body, ma ho ancora questo errore. Mi sento come sto sorvegliando qualcosa di ovvio, di conseguenza, qualsiasi aiuto è molto apprezzato. Grazie!! In allegato l'errore che sto ottenendo. [1]: https://i.stack.imgur.com/GyNXO.png

1

Migliore risposta

0

Come detto, rimuovere lo sfondo da manifesto risolvere questo problema, ma sembra che ci sia un concettuale mix-up nel codice di esempio, che è il motivo per cui vorrei spiegare perché questa soluzione funziona.

Lo script chiamato app.js sembra essere destinato ad essere la comparsa di script, ma essere utilizzata come sfondo script nell'esempio. Popup è diverso da sfondo. Vi aiuterà a capire la differenza tra questi due estensione parti e i loro casi di utilizzo. Per la continuità, la seguente spiegazione farà riferimento a MV3 versione e termini.

Sfondo: "Un servizio in background lavoratore viene caricato quando è necessario, e scaricato quando va in idle [...] Struttura di sfondo script intorno a eventi estensione dipende. Definire funzionalmente rilevanti eventi permette di sfondo script per giacciono dormienti fino a quando tali eventi vengono generati e impedisce l'estensione da perdere importanti trigger". (Gestire gli eventi con gli operai di servizio) nota Aggiuntiva: sfondo è letteralmente in background; non è visibile interfaccia utente. L'utente non sarebbe interagire con i pulsanti in background (anche se è possibile inviare gli eventi a sfondo per un ulteriore trattamento, attraverso il passaggio di messaggi). In considerazione di sfondo come un singleton.

Popup: Questo è uno dei luoghi possibili per fornire un'interfaccia utente per l'utente dell'interno. Il popup è attivato dall'utente, cliccando l'estensione icona, e distrutti quando il popup perde la messa a fuoco (anche quando la scheda è chiuso), e ricaricato di nuovo quando l'utente fa clic su questa icona per la prossima volta. "Come sfondo script, questo file deve essere dichiarato nel manifesto in ordine per Chrome per presentare l'estensione del popup. Per fare questo, aggiungere un'azione oggetto del manifesto e impostare popup.html come l'azione default_popup." (Introdurre un'interfaccia utente). Popup, è possibile aggiungere pulsanti e altri elementi per l'utente a fare clic su. Popup è specifico per ogni scheda. L'apertura di più finestre del browser e fare clic sull'icona, più popup possono essere aperti allo stesso tempo.

In breve: l'errore proviene dal cercare pulsante, elemento sullo sfondo, quando non ci sono pulsanti; la rimozione del manifesto chiave di evitare questo.


Minima di esempio

manifesto.json: background chiave disinserita

{
  "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: nessun cambiamento

(stile.css alzerà non trovato errore, ma non è una preoccupazione per quanto riguarda questa domanda)

<!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: modificato il testo della registrazione, nessun cambiamento 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: cambiare registro uscite un po ' il commento di assegnazione

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

grazie, ho tolto lo sfondo script dal manifesto, tuttavia sto ancora ricevendo lo stesso errore. L'unica differenza ora è il Contesto uscite della scheda attuale in cui mi trovo, in contrasto con _generated_background_page.html che è stato mostrato prima. Lettura on-line, il modo per risolvere il "impostata a null" di un pulsante, mediante il controllo di denominazione di errori, o l'aggiunta di un DOMContentLoaded listener di eventi, di cui ho fatto entrambi e ho ancora lo stesso errore
Chris Wu

OK, fammi postare minima di esempio. Vorrei modificare la risposta.
Neea

Non c'è nessun pulsante in background a meno che non sia a livello di codice generato per primo. getElementById continuerà a tornare indefinito dopo il controllo di denominazione o di attesa per il caricamento di contenuti. Sfondo deve essere pensato come headless (anche se in mv2 è possibile visualizzare la mia pagina, ma il reale utilizzatore non vedere).
Neea

wow che hanno contribuito a chiarire un sacco di cose, ho preso a lavorare. Molto apprezzato!!!! Aveva a che fare con il passaggio di messaggi (message.nome utente invece che di contenuti.nome utente)
Chris Wu

In altre lingue

Questa pagina è in altre lingue

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