Uncaught TypeError: Cannot read propriétés de null (en train de lire "la méthode addEventListener') Extension Chrome

0

La question

Je fais un remplissage automatique extension chrome. À savoir, une fois en appuyant sur un bouton, un formulaire de saisie dans le contenu de la page web sera complétée par le texte de l'popup.html. Je suis cela "ne peut pas lire les propriétés de la valeur null," erreur lors du démarrage à partir d'où j'ai ajouté un écouteur d'événement à mon bouton. [Uncaught TypeError: Cannot read propriétés de null (en train de lire "la méthode addEventListener')][1]

Voici mon fichier 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>

Voici mon 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);
    }
}

Voici mon content.js

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

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

Enfin, mon manifeste.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"]
      }
    
  }

J'ai lu en ligne que je devrais mettre mon script étiquette au bas de la balise body, mais j'ai toujours cette erreur. J'ai l'impression que je suis la supervision de quelque chose d'évident, par conséquent, toute aide est grandement appréciée. Merci!! Ci-joint l'erreur que j'obtiens. [1]: https://i.stack.imgur.com/GyNXO.png

1

La meilleure réponse

0

Comme l'a dit, la suppression d'arrière-plan de manifester allons résoudre ce problème, mais il semble y avoir un conceptuelle mélange dans l'exemple de code, c'est pourquoi je tiens à expliquer pourquoi cette solution fonctionne.

Le script appelé app.js semble être destiné à être le popup script, mais à être utilisé comme arrière-plan de script dans l'exemple. Popup est différent de l'arrière-plan. Il vous aidera à comprendre la différence entre ces deux extension les parties et leurs cas d'utilisation. Pour la continuité, l'explication suivante va se référer à MV3 version et les conditions.

Contexte: "Un service d'arrière-plan travailleur est chargé lorsque c'est nécessaire, et déchargé lorsqu'il passe inactif [...] la Structure de fond de scripts d'événements autour de l'extension dépend. La définition fonctionnelle des événements pertinents permet d'arrière-plan des scripts pour rester en sommeil jusqu'à ce que ces événements sont déclenchés et empêche l'extension de l'absence de déclencheurs importants." (Gestion des événements avec les ouvriers de service) remarque Supplémentaire: le fond est littéralement en arrière-plan; il n'est pas visible de l'interface utilisateur. L'utilisateur ne serait pas interagir avec des boutons à l'arrière-plan (si il est possible d'envoyer des événements à fond pour traitement complémentaire par le biais de la transmission de messages). Envisager d'arrière-plan comme un singleton.

Pop-up: C'est l'un des endroits possibles pour fournir une INTERFACE utilisateur pour l'extension de l'utilisateur. Le pop-up est activé par l'utilisateur en cliquant sur l'extension de l'icône, et détruit lors de la popup perd le focus (également lorsque l'onglet est fermé), et rechargées lorsque l'utilisateur clique sur l'icône, la prochaine fois. "Comme le fond de script, ce fichier doit être déclaré dans le manifeste pour Chrome pour le présenter à l'extension de la popup. Pour ce faire, ajoutez un objet d'action pour le manifeste et l'ensemble popup.html comme l'action default_popup." (Présenter une interface utilisateur). Dans la fenêtre contextuelle, vous pouvez ajouter des boutons et d'autres éléments pour l'utilisateur à cliquer. Popup est spécifique à chaque onglet. L'ouverture de plusieurs fenêtres de navigateur et en cliquant sur l'icône, plusieurs fenêtres ouvertes en même temps.

En bref: l'erreur est venue de chercher un élément de bouton dans le fond, quand il n'y a pas les boutons; enlever le manifeste clé de l'en empêcher.


De travail minimale exemple

le manifeste.json: background clé supprimée

{
  "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: pas de changement

(de style.css s'élever ne trouve pas d'erreur, mais pas d'inquiétudes à l'égard de cette question)

<!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: modifié le texte du journal, aucun changement significatif de la

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: changement du journal des sorties un peu, a commenté affectation

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

merci, j'ai enlevé le fond de script de manifestes, mais je reçois toujours le même message d'erreur. La seule différence aujourd'hui, c'est le Contexte sorties de l'onglet actuel je suis, contrairement à _generated_background_page.html qui a été montré avant. La lecture en ligne, la façon de fixer la propriété "null" d'un bouton est par un contrôle de nommage des erreurs, ou l'ajout d'un écouteur d'événement DOMContentLoaded, de qui j'ai fait les deux et j'obtiens toujours la même erreur
Chris Wu

OK, permettez-moi de poste de travail minimale exemple. Je vais modifier la réponse.
Neea

Il n'y a pas de bouton dans le fond, sauf s'il est généré par programmation de la première. getElementById continuera de retour indéfini après vérification de nommage ou d'attente pour le chargement de contenu. Arrière-plan doit être considéré comme sans tête (même si, en mv2 il est possible d'afficher la page générée, mais réelle de l'utilisateur ne sera pas le voir).
Neea

wow qui a permis de clarifier beaucoup de choses, je l'ai eu à travailler. Beaucoup apprécié!!!! Cela avait à voir avec la transmission de message (message.nom d'utilisateur au lieu du contenu.nom d'utilisateur)
Chris Wu

Dans d'autres langues

Cette page est dans d'autres langues

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