Uncaught TypeError: nemôžem čítať vlastnosti null (čítanie "addEventListener') Rozšírenie prehliadača Chrome

0

Otázka

Robím automatického dopĺňania a rozšírenie prehliadača chrome. Totiž, akonáhle stlačíte tlačidlo, vstupný formulár v obsahu webovej stránky bude obývaný text z popup.html. Som stále to "nie je možné čítať vlastnosti z null" chyba pri spúšťaní z miesta, kde som pridané udalosť poslucháča do svojho tlačidlo. [Uncaught TypeError: nemôžem čítať vlastnosti null (čítanie "addEventListener')][1]

Tu je môj html súboru

<!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>

Tu je môj 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);
    }
}

Tu je môj content.js

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

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

Napokon, môj 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"]
      }
    
  }

Ja si on-line že by som mal dať moje značky skriptu v dolnej časti tela značku, ale stále som si to chyba. Mám pocit, že som dohľad nad niečo jasné, preto každá pomoc je veľmi ocenil. Vďaka!! Pripojený je chyba som dostať. [1]: https://i.stack.imgur.com/GyNXO.png

1

Najlepšiu odpoveď

0

Ako povedal, odstránenie pozadia z nákladu bude vyriešiť tento problém, zdá sa však, že koncepčný mix-up v kód vzorky, čo je dôvod, prečo by som chcel vysvetliť, prečo sa toto riešenie funguje.

Skript s názvom app.js zdá sa, určené na popup skript, ale používa ako pozadie skript v príklade. Popup je odlišné od pozadia. To pomôže pochopiť rozdiel medzi týmito dvoma rozšírenie časti, súčasti a ich prípady použitia. Pre kontinuitu, nasledujúce vysvetlenie sa bude týkať MV3 verziu a podmienok.

Pozadie: "Na pozadí, služby pracovníka sa načíta, keď je to potrebné, a vykladá, keď to ide nečinnosti [...] Štruktúra pozadie, skripty okolo udalostí rozšírenie závisí na. Vymedzujú funkčne relevantné udalosti umožňuje pozadie, skripty ležať ladom, pokým sa tieto udalosti sú vystrelil a zabraňuje rozšírenie chýbajúce dôležité spúšťače". (Spravovať udalosti s servisní pracovníci) Ďalšie poznámka: pozadie je doslova v pozadí, nie je viditeľné používateľské rozhranie. Užívateľ by nemal byť v interakcii s tlačidlami v pozadí (aj keď to je možné posielať udalosti na pozadí pre ďalšie manipulácia prostredníctvom správy absolvovanie). Zvážte pozadí ako singleton.

Popup: Toto je jeden z možných miestach poskytujú UI pre rozšírenie užívateľa. Dav sa aktivuje kliknutím na položku používateľské rozšírenie ikonu, a zničená, keď popup stratí zameranie (aj keď karta je zatvorené), a reloaded znova, keď používateľ klikne na ikonu nabudúce. "Ako pozadie skript, tento súbor sa musí uviesť v zjavne, aby prehliadač Chrome prezentovať rozšírenie je popup. Ak to chcete urobiť, pridajte akciu objekt nákladu a nastaviť popup.html ako akcie je default_popup." (Zaviesť používateľské rozhranie). V pop-up môžete pridať tlačidlá a ďalšie prvky pre užívateľa kliknite na tlačidlo. Popup je špecifické pre každú kartu. Otvorenie viacerých okien prehliadača a kliknutím na ikonu, viac vyskakovacích okien, ktoré môžu byť otvorené súčasne.

V skratke: chyba pochádza z hľadáte tlačidlo prvok v pozadí, keď nie sú žiadne takéto tlačidlá; odstránenie zjavne kľúčom sa tomu zabránilo.


Minimálny pracovný príklad

zoznam lodného nákladu.json: background tlačidlo odstrániť

{
  "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: bez zmeny

(štýl.css bude zvyšovať zistené chyby, ale nie je záujem o túto otázku)

<!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: zmeniť denník text, žiadna významná zmena

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: zmena log výstupy trochu, okomentované mimo priradenie

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

vďaka, odstránil som pozadí skript z nákladu, ale ja som stále rovnaká chyba. Jediný rozdiel je teraz Kontexte výstupy aktuálnu kartu som, na rozdiel _generated_background_page.html to bolo uvedené predtým. Čítanie on-line, spôsob, ako opraviť "majetku nastaviť na hodnotu null" tlačidla je buď kontrola pomenovanie chyby, alebo pridaním DOMContentLoaded prípade poslucháč, ktorý som si obaja a ja som ešte dostať rovnakú chybu
Chris Wu

OK, dovoľte mi, post minimálne pracovné príklade. Budem upraviť odpoveď.
Neea

Nie je tam žiadne tlačidlo do pozadia, ak nie je programovo generovaný prvý. getElementById bude naďalej vrátiť neurčená po kontrole pomenovanie alebo čaká na obsah načítať. Pozadie by malo byť považované za bezhlavé (hoci v mv2 je možné zobraziť generované stránky, ale skutočné užívateľ nebude vidieť).
Neea

wow, ktoré pomohli objasniť veľa vecí, dostal som sa do práce. Veľmi ocenil!!!! To musel urobiť s prechode správy (správy.meno namiesto obsahu.užívateľské meno)
Chris Wu

V iných jazykoch

Táto stránka je v iných jazykoch

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