Uncaught TypeError:ไม่สามารถอ่านคุณสมบัติของโพรโทคอล aimcomment(การอ่าน'addEventListener')Chrome ส่วนขยาย

Question 1

ฉันกำลังชดเชยวันคืนการเติมเต็มอัตโนมัติ chrome เลื่อนเวลาออกไปหน่อย คือเมื่อกดปุ่มการนำเข้ารูปแบบอยู่ในเนื้อหาภายในหน้าเว็บจะเป็น populated โดยข้อความจาก popup.html. ฉันจะพานี่"ไม่สามารถอ่านคุณสมบัติของโพรโทคอล aimcomment"เกิดข้อผิดพลาดเริ่มจากที่ไหนฉันเพิ่มเหตุการณ์การเป็นนักฟังที่ต้องของฉันปุ่ม [Uncaught TypeError:ไม่สามารถอ่านคุณสมบัติของโพรโทคอล aimcomment(การอ่าน'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
    
}

Lastly ของรายการlanguage

{
    "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"]
      }
    
  }

ฉันอ่านออนไลน์ที่ฉันควรจะวาสคริปต์ของฉันป้ายกำกับที่อยู่ด้านล่างของร่างป้ายกำกับแต่ผมยังได้ข้อผิดพลาดนี้ด้วย ฉันรู้สึกเหมือนฉันในการดูแลอย่างชัดเจนดังนั้นมีความช่วยเหลือ greatly นเกียรติอย่างยิ่ง ขอบคุณ!! ติดเป็นข้อผิดพลาดฉันกำลังจะ. [1]: https://i.stack.imgur.com/GyNXO.png

Question 2

ที่บอกว่าการเอาออกพื้นหลังจากปรากฏออกจะแก้ไขเรื่องนี้แต่มันดูเหมือนจะเป็น conceptual วุ่นวายในรหัสตัวอย่างซึ่งก็คือทำไมฉันต้องการจะอธิบายเรื่องนี้ทางออกได้ผล

สคริปต์โทรมา app.js ดูเหมือนจะเป็นความตั้งใจที่จะเป็นคนสคริปต์ป๊อปอัพแต่โดนยอมถูกใช้เป็นพื้นหลังของสคริปต์ในวอย่างเช่นดวง แบบแสดงเป็นเมนูให้เลือกต่างจากเบื้องหลัง มันจะช่วยให้เข้าใจความแตกต่างระหว่างทั้งสองส่วนขยายบางส่วนและพวกเขาใช้คดี สำหรับ continuity งตามคำอธิบายจะเรียก MV3 เวอร์ชั่นและข้อตกลงแล้ว

พื้นหลัง: "ประวัติการทำงานถูกโหลดเมื่อต้องการและคนลงพาเดินตอนที่มันไปไม่ได้ทำงานอยู่[...]โครงสร้างพื้นหลังของสคริปต์อยู่เหตุการณ์ที่ส่วนขยายขึ้นอยู่กับ. Defining อมูลที่เกี่ยวข้องเหตุการณ์อนุญาตให้พื้นหลังของสคริปต์จะต้องโกหกพักนึงจนกว่าพวกนั้นเป็นเหตุการณ์ถูกไล่ออกและจะปกป้องส่วนขยายแฟ้มจากหายตัวไปสำคัญตัวกระตุ้น." (จัดการเหตุการณ์กับการดิ้นรน)เพิ่มเติมข้อควรจำ:พื้นหลังเป็นจริง อยู่เบื้องหลั;ไม่มีแสดงของผู้ใช้ส่วนติดต่อ. ของผู้ใช้คงไม่ปฏิสัมพันธ์กับท่อนอยู่ในเบื้องหลัง(แม้ว่ามันจะเป็นไปได้ว่าเพื่อส่งเหตุการณ์ต้องพื้นหลังสำหรับต่อการจัดการผ่านข้อความส่ง). พิจารณาเบื้องหลังเป็น singleton.

แบบแสดงเป็นเมนูให้เลือก: นี่คือหนึ่งในเป็นไปได้ที่จะให้ส่วนติดต่อผู้ใช้สำหรับคนนามสกุลของผู้ใช้. คนแบบแสดงเป็นเมนูให้เลือกคือเปิดใช้งานโดยใช้การคลิกในส่วนขยายภาพไอคอนและทำลายตอนที่ป๊อปอัพสูญเสียโฟกัส(รวมถึงตอนที่แท็บปิด)และ reloaded อีกครั้งเมื่อผู้ใช้ลิกที่ไอคอนในครั้งต่อไป "เหมือนพื้นหลังของสคริปต์,แฟ้มนี้ต้องเป็นประกาศอยู่ในใบรายการในการสั่งซื้อสำหรับ Chrome ต้องของขวัญมันอยู่ในส่วนขยายแฟ้มเป็นแบบแสดงเป็นเมนูให้เลือก. ต้องทำเรื่องนี้เพิ่มการกระทำสิ่งต้องใบรายการตั้งค่าแล้ว popup.html เป็นการกระทำขอ default_popup." (แนะนำให้รู้จักเป็นส่วนติดต่อผู้ใช้). ในแบบผุดขึ้นคุณสามารถเพิ่มปุ่มและอีกส่วนประกอบสำหรับผู้ใช้คลิก. ย่อแบบป๊อปอับเป็นเฉพาะกับแต่ละแท็บ. การเปิดหลายๆหน้าต่างเบราว์เซอร์และการคลิกที่ไอคอนหลายป๊อปอับเป็นสามารถจะเปิดในเวลาเดียวกัน

ใน:ข้อผิดพลาดคือมาจากมองหาปุ่มธาตุอยู่เบื้องหลังตอนที่มันไม่มีปุ่ม;ลบใบรายการกุญแจจะป้องกันไม่ให้เรื่องนี้

ขนาดเล็กที่สุดทำงานตัวอย่างเช่น

รายการlanguage: 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:ไม่มีการเปลี่ยนแปลง

(สไตล์วิคทอเรียหรอกcss จะเลี้ยงไม่พบข้อผิดพลาด,แต่ไม่ใช่กังวลเกี่ยวกับเรื่องนี้คำถาม)

<!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:เปลี่ยนปูมบันทึกแสดงผลหน่อยหยักภารกิจ

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

ที่บอกว่าการเอาออกพื้นหลังจากปรากฏออกจะแก้ไขเรื่องนี้แต่มันดูเหมือนจะเป็น conceptual วุ่นวายในรหัสตัวอย่างซึ่งก็คือทำไมฉันต้องการจะอธิบายเรื่องนี้ทางออกได้ผล

สคริปต์โทรมา app.js ดูเหมือนจะเป็นความตั้งใจที่จะเป็นคนสคริปต์ป๊อปอัพแต่โดนยอมถูกใช้เป็นพื้นหลังของสคริปต์ในวอย่างเช่นดวง แบบแสดงเป็นเมนูให้เลือกต่างจากเบื้องหลัง มันจะช่วยให้เข้าใจความแตกต่างระหว่างทั้งสองส่วนขยายบางส่วนและพวกเขาใช้คดี สำหรับ continuity งตามคำอธิบายจะเรียก MV3 เวอร์ชั่นและข้อตกลงแล้ว

พื้นหลัง: "ประวัติการทำงานถูกโหลดเมื่อต้องการและคนลงพาเดินตอนที่มันไปไม่ได้ทำงานอยู่[...]โครงสร้างพื้นหลังของสคริปต์อยู่เหตุการณ์ที่ส่วนขยายขึ้นอยู่กับ. Defining อมูลที่เกี่ยวข้องเหตุการณ์อนุญาตให้พื้นหลังของสคริปต์จะต้องโกหกพักนึงจนกว่าพวกนั้นเป็นเหตุการณ์ถูกไล่ออกและจะปกป้องส่วนขยายแฟ้มจากหายตัวไปสำคัญตัวกระตุ้น." (จัดการเหตุการณ์กับการดิ้นรน)เพิ่มเติมข้อควรจำ:พื้นหลังเป็นจริง อยู่เบื้องหลั;ไม่มีแสดงของผู้ใช้ส่วนติดต่อ. ของผู้ใช้คงไม่ปฏิสัมพันธ์กับท่อนอยู่ในเบื้องหลัง(แม้ว่ามันจะเป็นไปได้ว่าเพื่อส่งเหตุการณ์ต้องพื้นหลังสำหรับต่อการจัดการผ่านข้อความส่ง). พิจารณาเบื้องหลังเป็น singleton.

แบบแสดงเป็นเมนูให้เลือก: นี่คือหนึ่งในเป็นไปได้ที่จะให้ส่วนติดต่อผู้ใช้สำหรับคนนามสกุลของผู้ใช้. คนแบบแสดงเป็นเมนูให้เลือกคือเปิดใช้งานโดยใช้การคลิกในส่วนขยายภาพไอคอนและทำลายตอนที่ป๊อปอัพสูญเสียโฟกัส(รวมถึงตอนที่แท็บปิด)และ reloaded อีกครั้งเมื่อผู้ใช้ลิกที่ไอคอนในครั้งต่อไป "เหมือนพื้นหลังของสคริปต์,แฟ้มนี้ต้องเป็นประกาศอยู่ในใบรายการในการสั่งซื้อสำหรับ Chrome ต้องของขวัญมันอยู่ในส่วนขยายแฟ้มเป็นแบบแสดงเป็นเมนูให้เลือก. ต้องทำเรื่องนี้เพิ่มการกระทำสิ่งต้องใบรายการตั้งค่าแล้ว popup.html เป็นการกระทำขอ default_popup." (แนะนำให้รู้จักเป็นส่วนติดต่อผู้ใช้). ในแบบผุดขึ้นคุณสามารถเพิ่มปุ่มและอีกส่วนประกอบสำหรับผู้ใช้คลิก. ย่อแบบป๊อปอับเป็นเฉพาะกับแต่ละแท็บ. การเปิดหลายๆหน้าต่างเบราว์เซอร์และการคลิกที่ไอคอนหลายป๊อปอับเป็นสามารถจะเปิดในเวลาเดียวกัน

ใน:ข้อผิดพลาดคือมาจากมองหาปุ่มธาตุอยู่เบื้องหลังตอนที่มันไม่มีปุ่ม;ลบใบรายการกุญแจจะป้องกันไม่ให้เรื่องนี้

ขนาดเล็กที่สุดทำงานตัวอย่างเช่น

รายการlanguage: 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:ไม่มีการเปลี่ยนแปลง

(สไตล์วิคทอเรียหรอกcss จะเลี้ยงไม่พบข้อผิดพลาด,แต่ไม่ใช่กังวลเกี่ยวกับเรื่องนี้คำถาม)

<!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:เปลี่ยนปูมบันทึกแสดงผลหน่อยหยักภารกิจ

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
}

ขอบคุณฉันเอาพื้นหลังของสคริปต์จากบัญชีสินค้าอย่างไรก็ตามฉันยังคงได้รับเดียวกับข้อผิดพลาด ความแตกต่างเพียงอย่างเดียวตอนนี้คือการแสดงผลในแท็บปัจจุบันฉันอยู่ในความเปรียบต่างของให้ _generated_background_page.html นั่นเป็นการแสดมาก่อน อ่านออนไลน์ที่ทางออกให้เรื่อง"ทรัพย์สินตั้งค่าโพรโทคอล aimcomment"ของปุ่มคือเหมือนกันโดยตรวจการตั้งชื่อความผิดพลาดหรือเพิ่มเป็น DOMContentLoaded เหตุการณ์เป็นนักฟังที่ที่ฉันทำทั้งสองและฉันยังคงได้เกิดข้อผิดพลาด
โอเคยอมให้ฉันยื่นขนาดเล็กที่สุดทำงานตัวอย่าง ฉันจะแก้ไขคำตอบ
มันไม่มีปุ่มอยู่เบื้องหลังเว้นแต่ว่ามันเป็น programmatically ที่ถูกสร้างก่อน getElementById จะกลับมาทำดัชนีเทียบสีหลังจากตรวจการตั้งชื่อหรือรออยู่สำหรับเนื้อหาลง พื้นหลังควรจะคิดว่าของที่ในศพไม่มีหัว(ถึงแม้ว่าอยู่ใน mv2 มันเป็นไปได้ต้องมุมมองที่ถูกสร้างหน้าแต่แท้จริงของผู้ใช้จะไม่เห็นมัน).
ว้าวนั่นช่วยความชัดเจนมากมายของสิ่งที่ฉันได้มันไปทำงานแล้ว ขอบคุณมากครั!!!! มันจะต้องทำยังไงกับข้อความส่ง(ข้อความไว้ชื่อผู้ใช้งานแทนที่จะเป็นของเนื้อหาได้ที่นี่ชื่อผู้ใช้)

Uncaught TypeError:ไม่สามารถอ่านคุณสมบัติของโพรโทคอล aimcomment(การอ่าน'addEventListener')Chrome ส่วนขยาย

คำถาม

คำตอบที่ดีที่สุด

ขนาดเล็กที่สุดทำงานตัวอย่างเช่น

ในภาษาอื่นๆ

หน้านี้อยู่ในภาษาอื่นๆ

ดังอยู่ในนี้หมวดหมู่

ดังคำถามอยู่ในนี้หมวดหมู่