Não identificada TypeError: não é Possível ler as propriedades de null ('leitura addEventListener') Extensão do google Chrome

Question 1

Eu estou fazendo um autopreenchimento extensão do google chrome. Ou seja, uma vez de pressionar um botão, um formulário de entrada no conteúdo de página da web será preenchida pelo texto do popup.html. Estou recebendo este "não é possível ler as propriedades de null," erro ao iniciar a partir de onde eu adicionei um ouvinte de evento para o meu botão. [Não identificada TypeError: não é Possível ler as propriedades de null ('leitura addEventListener')][1]

Aqui é o meu arquivo 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>

Aqui é o 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);
    }
}

Aqui é o meu content.js

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

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

Por fim, o meu 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"]
      }
    
  }

Tenho lido on-line que eu deveria colocar minha tag de script na parte inferior da tag body, mas eu ainda recebo este erro. Eu sinto como eu estou supervisionando algo óbvio, portanto, qualquer ajuda é muito apreciada. Obrigado!! Em anexo, é o erro que eu estou chegando. [1]: https://i.stack.imgur.com/GyNXO.png

Question 2

Como disse, a remoção de plano de fundo do manifesto irá corrigir isso, mas não parece ser um conceitual mix-up no código de exemplo, que é por isso que eu gostaria de explicar por que esta solução funciona.

O script chamado app.js parece estar destinado a ser o pop-up de script, mas está sendo usado como um fundo de script no exemplo. Pop-up é diferente do fundo. Ele vai ajudar a entender a diferença entre estes dois extensão partes e seus casos de uso. Para a continuidade, a seguinte explicação consulte MV3 versão e termos.

Plano de fundo: "Um plano de trabalho do serviço é carregado quando for necessário, e descarregado quando ele fica ocioso [...] a Estrutura de plano de fundo scripts em torno de eventos de extensão depende. Definir funcionalmente relevantes eventos permite que scripts de segundo plano para permanecer dormente até que esses eventos são disparados e impede a extensão da falta importantes gatilhos". (Gerir eventos com serviço de trabalhadores) nota Adicional: o plano de fundo é, literalmente, no fundo; não é visível interface do usuário. Usuário não interagir com os botões no plano de fundo (o que é possível para enviar eventos para o plano de fundo para posterior tratamento através de passagem de mensagens). Considere o plano de fundo como um singleton.

Pop-up: Este é um dos lugares possíveis para fornecer uma INTERFACE para a extensão de utilizador. O pop-up é ativado pelo usuário clicar a extensão ícone, e destruído quando o popup perde o foco (também quando o guia é fechado), e recarregado novamente quando o usuário clica no ícone da próxima vez. "Como o plano de fundo de script, este arquivo deve ser declarado no manifesto para o google Chrome, para apresentá-lo na extensão do pop-up. Para fazer isso, adicione um objecto de acção para o manifesto e conjunto popup.html como a ação do default_popup." (Apresentar uma interface de usuário). No pop-up, você pode adicionar botões e outros elementos para que o usuário clique. Pop-up é específico para cada guia. A abertura de várias janelas do navegador e clicando o ícone, vários pop-ups podem ser abertos ao mesmo tempo.

Em suma: o erro é proveniente procurando elemento de botão no fundo, quando não existem botões; remover o manifesto chave irá impedir isso.

O mínimo de trabalho de exemplo

manifesto.json: background chave removida

{
  "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: sem alteração

(estilo.css irá aumentar não encontrado erro, mas não uma preocupação quanto a esta questão)

<!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: mudou de log de texto, sem alteração significativa

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: alteração de registo de saídas um pouco, comentou a atribuição

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

Como disse, a remoção de plano de fundo do manifesto irá corrigir isso, mas não parece ser um conceitual mix-up no código de exemplo, que é por isso que eu gostaria de explicar por que esta solução funciona.

O script chamado app.js parece estar destinado a ser o pop-up de script, mas está sendo usado como um fundo de script no exemplo. Pop-up é diferente do fundo. Ele vai ajudar a entender a diferença entre estes dois extensão partes e seus casos de uso. Para a continuidade, a seguinte explicação consulte MV3 versão e termos.

Plano de fundo: "Um plano de trabalho do serviço é carregado quando for necessário, e descarregado quando ele fica ocioso [...] a Estrutura de plano de fundo scripts em torno de eventos de extensão depende. Definir funcionalmente relevantes eventos permite que scripts de segundo plano para permanecer dormente até que esses eventos são disparados e impede a extensão da falta importantes gatilhos". (Gerir eventos com serviço de trabalhadores) nota Adicional: o plano de fundo é, literalmente, no fundo; não é visível interface do usuário. Usuário não interagir com os botões no plano de fundo (o que é possível para enviar eventos para o plano de fundo para posterior tratamento através de passagem de mensagens). Considere o plano de fundo como um singleton.

Pop-up: Este é um dos lugares possíveis para fornecer uma INTERFACE para a extensão de utilizador. O pop-up é ativado pelo usuário clicar a extensão ícone, e destruído quando o popup perde o foco (também quando o guia é fechado), e recarregado novamente quando o usuário clica no ícone da próxima vez. "Como o plano de fundo de script, este arquivo deve ser declarado no manifesto para o google Chrome, para apresentá-lo na extensão do pop-up. Para fazer isso, adicione um objecto de acção para o manifesto e conjunto popup.html como a ação do default_popup." (Apresentar uma interface de usuário). No pop-up, você pode adicionar botões e outros elementos para que o usuário clique. Pop-up é específico para cada guia. A abertura de várias janelas do navegador e clicando o ícone, vários pop-ups podem ser abertos ao mesmo tempo.

Em suma: o erro é proveniente procurando elemento de botão no fundo, quando não existem botões; remover o manifesto chave irá impedir isso.

O mínimo de trabalho de exemplo

manifesto.json: background chave removida

{
  "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: sem alteração

(estilo.css irá aumentar não encontrado erro, mas não uma preocupação quanto a esta questão)

<!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: mudou de log de texto, sem alteração significativa

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: alteração de registo de saídas um pouco, comentou a atribuição

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
}

obrigado, eu remover o plano de fundo de script a partir de manifestar-se, no entanto, eu ainda estou recebendo o mesmo erro. A única diferença, agora, é o Contexto saídas de corrente guia eu sou, em contraste com _generated_background_page.html que foi mostrado antes. Leitura online, a maneira de corrigir "propriedade definida para null" de um botão é por verificar erros de nomenclatura, ou a adição de um DOMContentLoaded ouvinte de evento, o que me fez e eu ainda tenho o mesmo erro
OK, deixe-me postar um mínimo exemplo de trabalho. Vou editar a resposta.
Não há nenhum botão no fundo, a menos que por meio de programação é gerada em primeiro lugar. getElementById vai continuar para retornar indefinido após a verificação de nomeação ou de espera para o conteúdo de carga. Plano de fundo deve ser pensado como sem cabeça (apesar de que no mv2 é possível visualizar a página gerada, mas de usuário real não se vê).
uau, que ajudou a esclarecer um monte de coisas, eu tenho que trabalhar. Muito apreciado!!!! Ele tinha a ver com a passagem de mensagens (mensagem.nome de usuário em vez do conteúdo.nome de usuário)

Não identificada TypeError: não é Possível ler as propriedades de null ('leitura addEventListener') Extensão do google Chrome

Pergunta

Melhor resposta

O mínimo de trabalho de exemplo

Em outros idiomas

Esta página está em outros idiomas

Popular nesta categoria

Perguntas populares nesta categoria