Uncaught TypeError: Cannot read vlastnosti null (reading 'addEventListener') Rozšíření prohlížeče Chrome

0

Otázka

Já dělám automatického vyplňování chrome rozšíření. Totiž, jakmile stisknutím tlačítka, vstupní formulář v obsahu webové stránky bude obydlený text z popup.html. Už jsem to "nelze přečíst vlastnosti null," chyba při spuštění z místa, kde jsem přidal posluchač události, aby se moje tlačítko. [Uncaught TypeError: Cannot read vlastnosti null (reading 'addEventListener')][1]

Tady je můj html souboru

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

Tady 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);
    }
}

Tady 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
    
}

A konečně, 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"]
      }
    
  }

Četl jsem na netu, že bych měl dát můj script tag v dolní části těla, tag, ale já si stále tuto chybu. Mám pocit, že jsem dohlížel na něco, co je zjevné, a proto jakákoliv pomoc je velmi ceněn. Díky!!!! Připojen je chyba jsem stále. [1]: https://i.stack.imgur.com/GyNXO.png

1

Nejlepší odpověď

0

Jak řekl, odstranění pozadí z manifestu se to napravit, ale tam se zdá být koncepční mix-up v kódu vzorek, což je důvod, proč bych chtěl vysvětlit, proč toto řešení funguje.

Scénář tzv. app.js se zdá být v úmyslu být popup script, ale být použit jako pozadí skript v příkladu. Popup je odlišné od pozadí. To vám pomůže pochopit rozdíl mezi těmito dvěma prodlužovací díly a jejich využití. Pro kontinuitu, následující vysvětlení se týkají MV3 verze a podmínek.

Pozadí: "služba Na pozadí pracovník je načten, když je to potřeba, a uvolněn, až to přejde nečinnosti [...] Struktura pozadí skripty události kolem prodloužení závisí na. Definování funkčně relevantní události umožňuje pozadí skripty ležet ladem, dokud tyto události jsou vypalovány a zabraňuje rozšíření z chybí důležité triggery." (Spravovat události s pracovníky služeb) Další poznámka: pozadí je doslova v pozadí; tam je žádné viditelné uživatelské rozhraní. Uživatel by neměl být v interakci s tlačítky v pozadí (i když je možné posílat události na pozadí pro další manipulaci prostřednictvím předávání zpráv). Zvažte pozadí jako singleton.

Popup: To je jeden z možných místech, aby poskytují ROZHRANÍ pro rozšíření uživatele. Popup je aktivován uživatele kliknutím na ikonu rozšíření, a zničena, když okno ztratí focus (i když na kartě je uzavřen), a znovu načíst znovu, když uživatel klepne na ikonu příště. "Jako pozadí skript, tento soubor musí být deklarovány v manifest v pořadí pro Chrome, a předložit ji na rozšíření pop-up. K tomu, přidat akci, objekt seznamu a nastavit popup.html jako akce je default_popup." (Zavést uživatelské rozhraní). V pop-up můžete přidat tlačítka a další prvky pro uživatele ke kliknutí. Popup je specifické pro každý tab. Otevření více oken prohlížeče a kliknutím na ikonu, více vyskakovacích oken, může být otevřen ve stejnou dobu.

Stručně řečeno: chyba pochází z hledám tlačítko prvek v pozadí, když tam nejsou žádná taková tlačítka; odstranění manifest klíč se zabránilo to.


Minimální pracovní příklad

manifest.json: background klíč odstraněny

{
  "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: žádná změna

(styl.css zvýší nebyla nalezena chyba, ale ne znepokojení ohledně této otázky)

<!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: změnil protokolu text, žádné významné změny

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: změna log výstupy bit, zakomentovány úkol

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

díky, jsem odstranil pozadí skript z manifestu, nicméně jsem stále stejná chyba. Jediný rozdíl je v Kontextu výstupy na aktuální kartě jsem, na rozdíl od _generated_background_page.html to bylo uvedeno dříve. Čtení on-line, jak opravit "vlastnost nastavena na hodnotu null" tlačítka je buď kontrolou pojmenování chyby, nebo přidání události DOMContentLoaded posluchač, který udělal jsem obě a já si stále stejné chyby
Chris Wu

OK, dovolte mi, abych po minimální pracovní příklad. Budu upravit odpověď.
Neea

Není tam žádné tlačítko na pozadí, pokud je programově generované první. getElementById bude i nadále k návratu nedefinované po kontrole pojmenování nebo čekání na obsah zatížení. Pozadí by mělo být myšlenka jako bezhlavý (i když v mv2 je možné zobrazit generované stránky, ale skutečný uživatel nebude vidět).
Neea

wow, že pomohl objasnit spoustu věcí, mám to do práce. Moc díky!!!!!! To má co dělat s předávání zpráv (message.uživatelské jméno namísto obsahu.uživatelské jméno)
Chris Wu

V jiných jazycích

Tato stránka je v jiných jazycích

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