Uncaught TypeError: नहीं पढ़ सकते हैं के गुण अशक्त (पढ़ना 'addEventListener') क्रोम एक्सटेंशन

0

सवाल

मैं कर रहा हूँ एक स्वत: भरण क्रोम एक्सटेंशन है. अर्थात्, एक बार एक बटन दबाने, एक इनपुट के रूप में सामग्री वेब पेज द्वारा पॉपुलेटेड हो जाएगा पाठ से popup.html. मैं यह हो रही है नहीं पढ़ सकते हैं "के गुण शून्य" त्रुटि से शुरू, जहां मैं एक घटना श्रोता के लिए मेरे बटन. [Uncaught TypeError: नहीं पढ़ सकते हैं के गुण अशक्त (पढ़ना 'addEventListener')][1]

यहाँ अपने 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>

यहाँ है मेरी 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);
    }
}

यहाँ है मेरी content.js

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

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

अन्त में, मेरे 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"]
      }
    
  }

मैं ऑनलाइन पढ़ा है कि मैं चाहिए मेरी स्क्रिप्ट टैग के तल पर शरीर टैग, लेकिन मैं अभी भी इस त्रुटि मिलती है. मुझे लगता है जैसे मैं कर रहा हूँ की देखरेख के कुछ स्पष्ट है, इसलिए किसी भी मदद की बहुत सराहना की है. धन्यवाद!! संलग्न त्रुटि मैं हो रही हूँ. [1]: https://i.stack.imgur.com/GyNXO.png

1

सबसे अच्छा जवाब

0

कहा के रूप में, पृष्ठभूमि को हटाने से प्रकट होगा, यह तय है, लेकिन प्रतीत होता है एक वैचारिक मिश्रण में कोड नमूना है, जो है क्यों मैं की तरह करने के लिए समझाने के लिए क्यों यह समाधान काम करता है.

स्क्रिप्ट कहा जाता है app.js लगता है के लिए इरादा किया जा करने के लिए पॉपअप स्क्रिप्ट है, लेकिन इस्तेमाल किया जा रहा है एक पृष्ठभूमि के रूप में स्क्रिप्ट उदाहरण में. पॉपअप से अलग है पृष्ठभूमि. यह आपकी मदद करेंगे को समझने के लिए इन दोनों के बीच अंतर विस्तार भागों और उनके उपयोग के मामलों. निरंतरता के लिए, निम्न विवरण का उल्लेख होगा करने के लिए MV3 संस्करण और शर्तों है ।

पृष्ठभूमि: "एक पृष्ठभूमि सेवा कार्यकर्ता भरी हुई है जब यह आवश्यक है, और उतार चला जाता है जब यह निष्क्रिय [...] संरचना पृष्ठभूमि लिपियों के आसपास की घटनाओं के विस्तार पर निर्भर करता है. परिभाषित कार्यात्मक प्रासंगिक घटनाओं की अनुमति देता है पृष्ठभूमि करने के लिए स्क्रिप्ट को निष्क्रिय झूठ जब तक उन घटनाओं निकाल रहे हैं रोकता है और विस्तार से लापता महत्वपूर्ण हो सके." (घटनाओं का प्रबंधन के साथ सेवा के कार्यकर्ताओं के साथ) अतिरिक्त ध्यान दें: पृष्ठभूमि सचमुच पृष्ठभूमि में, वहाँ है कोई स्पष्ट यूजर इंटरफेस है. उपयोगकर्ता नहीं होगा के साथ बातचीत में बटन पृष्ठभूमि (हालांकि यह संभव है करने के लिए भेजने के लिए घटनाओं के लिए पृष्ठभूमि के आगे से निपटने के माध्यम से संदेश गुजर रहा है). पर विचार पृष्ठभूमि के रूप में एक सिंगलटन.

पॉपअप: यह एक संभावित स्थानों प्रदान करने के लिए एक यूआई विस्तार के लिए उपयोगकर्ता. पॉपअप सक्रिय होता है उपयोगकर्ता द्वारा क्लिक एक्सटेंशन आइकन, और नष्ट कर दिया जब पॉपअप ध्यान केंद्रित खो देता है (जब भी टैब बंद कर दिया है), और फिर से पुनः लोड जब उपयोगकर्ता क्लिक के आइकन अगली बार. "की तरह पृष्ठभूमि स्क्रिप्ट, इस फ़ाइल में घोषित किया जाना चाहिए में प्रकट क्रम में क्रोम के लिए पेश करने के लिए यह विस्तार में है पॉपअप । ऐसा करने के लिए जोड़ने के लिए, एक कार्रवाई के लिए वस्तु प्रकट और सेट popup.html के रूप में कार्रवाई के default_popup." (परिचय एक उपयोगकर्ता इंटरफ़ेस). पॉपअप में आप कर सकते हैं बटन जोड़ने के लिए और अन्य तत्वों के लिए उपयोगकर्ता के लिए क्लिक करें. पॉपअप के लिए विशिष्ट है प्रत्येक टैब. उद्घाटन एकाधिक ब्राउज़र विंडो और क्लिक आइकन, कई पॉपअप किया जा सकता है एक ही समय में खुला.

संक्षेप में: त्रुटि से आ रहा है की तलाश के लिए बटन तत्व पृष्ठभूमि में, जब वहाँ कोई नहीं कर रहे हैं इस तरह के बटन; को हटाने के प्रकट कुंजी को रोकने जाएगा ।


कम से कम काम के उदाहरण

manifest.json: background कुंजी हटा दिया

{
  "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: कोई परिवर्तन नहीं

( । सीएसएस बढ़ा देंगे नहीं मिला त्रुटि, लेकिन एक चिंता का विषय नहीं इस बारे में सवाल)

<!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: बदल लॉग पाठ, कोई महत्वपूर्ण परिवर्तन

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: परिवर्तन लॉग outputs के एक बिट, बाहर टिप्पणी की असाइनमेंट

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

धन्यवाद, मैं हटा दिया है पृष्ठभूमि स्क्रिप्ट से प्रकट, लेकिन मैं अभी भी एक ही त्रुटि हो रही. फर्क सिर्फ इतना है अब के संदर्भ आउटपुट वर्तमान टैब में, इसके विपरीत करने के लिए _generated_background_page.html है कि दिखाया गया था । ऑनलाइन पढ़ने, जिस तरह से ठीक करने के लिए "संपत्ति अशक्त करने के लिए सेट" का एक बटन है, तो जाँच नामकरण गलतियों, या जोड़ने के एक DOMContentLoaded घटना श्रोता, जो की मैं दोनों किया है और मैं अभी भी एक ही त्रुटि प्राप्त
Chris Wu

ठीक है, मुझे पोस्ट कम से कम काम के उदाहरण है । मैं संपादित करेंगे जवाब ।
Neea

वहाँ है कोई बटन पृष्ठभूमि में है जब तक कि यह प्रोग्राम के रूप में उत्पन्न होता है । getElementById करने के लिए जारी रहेगा अपरिभाषित वापसी की जाँच के बाद नामकरण या इंतजार कर के लिए सामग्री लोड. पृष्ठभूमि के बारे में सोचा जाना चाहिए के रूप में कोई मुखिया (हालांकि mv2 यह देखने के लिए संभव है उत्पन्न पृष्ठ है, लेकिन वास्तविक उपयोगकर्ता इसे देख नहीं होगा).
Neea

वाह मदद की है कि स्पष्ट चीजों की एक बहुत कुछ है, मैं यह मिल गया के लिए काम करते हैं. बहुत सराहना की है!!!! यह करने के लिए किया था के साथ क्या संदेश गुजर (संदेश.उपयोगकर्ता नाम के बजाय सामग्री.उपयोगकर्ता नाम)
Chris Wu

अन्य भाषाओं में

यह पृष्ठ अन्य भाषाओं में है

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

इस श्रेणी में लोकप्रिय

लोकप्रिय सवाल इस श्रेणी में