Neprins TypeError: nu se Poate citi proprietăți de nul (citit addEventListener') Extensia Chrome

Question 1

Fac o completare automată extensia chrome. Și anume, o dată apăsarea unui buton, un formular de intrare în conținutul paginii web va fi populat cu textul din popup.html. Primesc aceasta "nu poate citi proprietăți de nul" eroare la pornire, de la care am adăugat un ascultător eveniment la butonul meu. [Neprins TypeError: nu se Poate citi proprietăți de nul (citit addEventListener')][1]

Aici este dosarul meu 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>

Aici este meu 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);
    }
}

Aici este meu content.js

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

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

În cele din urmă, mi manifest.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"]
      }
    
  }

Am citit pe internet că ar trebui să-mi pun script tag-ul la partea de jos a corpului tag-ul, dar tot primesc aceasta eroare. Mă simt ca și cum sunt supravegherea ceva evident, prin urmare, orice ajutor este apreciat. Multumesc!!!! Atașat este o eroare primesc. [1]: https://i.stack.imgur.com/GyNXO.png

Question 2

Așa cum a spus, scoaterea de fundal de manifest va rezolva aceasta problema, dar nu pare a fi un conceptuale mix-up în proba de cod, care este motivul pentru care aș dori să explic de ce această soluție funcționează.

Scenariul numit app.js pare a fi destinat să fie popup script, dar fiind folosit ca un fundal script în exemplu. Pop-up este diferit de fundal. Aceasta va ajuta să înțeleagă diferența dintre aceste două extensia părți și cazuri de utilizare. Pentru continuitate, următoarea explicație se va referi la BV3 versiune și termeni.

Context: "Un serviciu de fundal lucrător este încărcat atunci când este necesar, și descărcate atunci când merge inactiv [...] Structura fundal script-uri în jurul valorii de evenimente extinderea depinde. Definirea din punct de vedere funcțional evenimente relevante permite script-uri de fundal pentru a află în stare latentă până când aceste evenimente sunt concediat și previne extensia din lipsă de important declanșează." (Gestiona evenimente cu muncitorii de la serviciu) notă Suplimentară: fundalul este literalmente în fundal; nu este vizibil interfață de utilizator. Utilizatorul nu ar fi interactiunea cu butoane în fundal (deși este posibil de a trimite evenimente pentru a fundal pentru manipularea ulterioară prin mesajul trece). Ia în considerare fundal ca un singleton.

Pop-up: Aceasta este una dintre posibilele locuri pentru a oferi o interfață pentru utilizatorul de prelungire. Pop-up este activat de utilizator făcând clic pe pictograma de extindere, și a distrus atunci când pop-up pierde focalizarea (de asemenea, atunci când fila este închisă), și reîncărcate atunci când utilizatorul face clic pe pictograma data viitoare. "Ca fundal script, acest fișier trebuie să fie declarat în manifestul pentru Chrome să-l prezinte în prelungirea lui pop-up. Pentru a face acest lucru, se adaugă un obiect acțiune a manifesta și a stabilit popup.html ca acțiune este default_popup." (Introduce o interfață de utilizator). În popup puteți adăuga butoane și alte elemente pentru utilizator să faceți clic pe. Pop-up este specific pentru fiecare tab. Deschiderea mai multor ferestre de browser și faceți clic pe pictograma, mai multe ferestre pop-up pot fi deschise în același timp.

Pe scurt: eroarea vine de la căutarea pentru butonul element în fundal, atunci când nu există astfel de butoane; eliminarea manifesta cheie va preveni acest lucru.

Minim exemplu de lucru

manifest.json: background cheia scoasă

{
  "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: nici o schimbare

(stil.css va ridica nu a fost găsit de eroare, dar nu un motiv de îngrijorare cu privire la această întrebare)

<!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: log schimbat textul, nici o schimbare semnificativă

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: schimbare jurnal ieșiri un pic, a comentat misiune

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
}

Neea · Answer 1 · 2021-11-21T21:21:52

Așa cum a spus, scoaterea de fundal de manifest va rezolva aceasta problema, dar nu pare a fi un conceptuale mix-up în proba de cod, care este motivul pentru care aș dori să explic de ce această soluție funcționează.

Scenariul numit app.js pare a fi destinat să fie popup script, dar fiind folosit ca un fundal script în exemplu. Pop-up este diferit de fundal. Aceasta va ajuta să înțeleagă diferența dintre aceste două extensia părți și cazuri de utilizare. Pentru continuitate, următoarea explicație se va referi la BV3 versiune și termeni.

Context: "Un serviciu de fundal lucrător este încărcat atunci când este necesar, și descărcate atunci când merge inactiv [...] Structura fundal script-uri în jurul valorii de evenimente extinderea depinde. Definirea din punct de vedere funcțional evenimente relevante permite script-uri de fundal pentru a află în stare latentă până când aceste evenimente sunt concediat și previne extensia din lipsă de important declanșează." (Gestiona evenimente cu muncitorii de la serviciu) notă Suplimentară: fundalul este literalmente în fundal; nu este vizibil interfață de utilizator. Utilizatorul nu ar fi interactiunea cu butoane în fundal (deși este posibil de a trimite evenimente pentru a fundal pentru manipularea ulterioară prin mesajul trece). Ia în considerare fundal ca un singleton.

Pop-up: Aceasta este una dintre posibilele locuri pentru a oferi o interfață pentru utilizatorul de prelungire. Pop-up este activat de utilizator făcând clic pe pictograma de extindere, și a distrus atunci când pop-up pierde focalizarea (de asemenea, atunci când fila este închisă), și reîncărcate atunci când utilizatorul face clic pe pictograma data viitoare. "Ca fundal script, acest fișier trebuie să fie declarat în manifestul pentru Chrome să-l prezinte în prelungirea lui pop-up. Pentru a face acest lucru, se adaugă un obiect acțiune a manifesta și a stabilit popup.html ca acțiune este default_popup." (Introduce o interfață de utilizator). În popup puteți adăuga butoane și alte elemente pentru utilizator să faceți clic pe. Pop-up este specific pentru fiecare tab. Deschiderea mai multor ferestre de browser și faceți clic pe pictograma, mai multe ferestre pop-up pot fi deschise în același timp.

Pe scurt: eroarea vine de la căutarea pentru butonul element în fundal, atunci când nu există astfel de butoane; eliminarea manifesta cheie va preveni acest lucru.

Minim exemplu de lucru

manifest.json: background cheia scoasă

{
  "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: nici o schimbare

(stil.css va ridica nu a fost găsit de eroare, dar nu un motiv de îngrijorare cu privire la această întrebare)

<!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: log schimbat textul, nici o schimbare semnificativă

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: schimbare jurnal ieșiri un pic, a comentat misiune

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
}

mersi, am scos de fundal script de manifest, cu toate acestea, eu sunt încă obtinerea de aceeași eroare. Singura diferenta acum este Contextul ieșiri fila curentă sunt, în contrast cu _generated_background_page.html asta a fost arătat mai înainte. Lectură on-line, cum să-l repara "proprietate setat la null" a unui buton, fie prin verificarea denumire greșeli, sau adăugarea unui eveniment DOMContentLoaded ascultător, din care am făcut-o amândoi și am în continuare aceeași eroare
OK, lasa-ma sa postezi minim exemplu de lucru. Voi edita răspunsul.
Nu există nici un buton în fundal, cu excepția cazului în care este programatic generată în primul rând. getElementById va continua să se întoarcă nedefinit după verificarea de denumire sau de așteptare pentru încărcare de conținut. Fondul ar trebui să fie considerat ca fără cap (deși în mv2 este posibil pentru a vizualiza o pagină generate, dar real utilizatorul nu va vedea).
wow, care a ajutat clarifica o mulțime de lucruri, am luat-o la muncă. Mult mai apreciat!!!! A avut de a face cu mesajul trece (mesaj.numele de utilizator în loc de conținut.numele de utilizator)

Neprins TypeError: nu se Poate citi proprietăți de nul (citit addEventListener') Extensia Chrome

Problema

Cel mai bun răspuns

Minim exemplu de lucru

În alte limbi

Această pagină este în alte limbi

Popular în această categorie

Întrebări frecvente în această categorie