Yakalanmamış TypeError: Null ('addEventListener' okunuyor) Chrome Uzantısının özellikleri okunamıyor

0

Soru

Otomatik doldurma chrome uzantısı yapıyorum. Yani, bir düğmeye bastıktan sonra, içerik web sayfasındaki bir giriş formu açılır pencereden gelen metinle doldurulacaktır.html. Düğmeme bir olay dinleyicisi eklediğim yerden başlayarak bu "null özelliklerini okuyamıyor" hatasını alıyorum. [Yakalanmamış TypeError: Null özellikleri okunamıyor ('addEventListener'okunuyor)][1]

İşte benim html dosyam

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

İşte benim uygulamam.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);
    }
}

İşte benim içeriğim.js

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

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

Son olarak, manifestom.jsonname

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

Komut dosyası etiketimi gövde etiketinin altına koymam gerektiğini çevrimiçi okudum, ancak yine de bu hatayı alıyorum. Açık bir şeyi denetliyormuşum gibi hissediyorum, bu nedenle herhangi bir yardım büyük beğeni topluyor. Teşekkürler!! Ekli, aldığım hatadır. [1]: https://i.stack.imgur.com/GyNXO.png

1

En iyi cevabı

0

Söylendiği gibi, arka planı manifest'ten kaldırmak bunu düzeltir, ancak kod örneğinde kavramsal bir karışıklık var gibi görünüyor, bu yüzden bu çözümün neden çalıştığını açıklamak istiyorum.

Komut dosyası app olarak adlandırıldı.js, pop-up komut dosyası olması amaçlanmış gibi görünüyor, ancak örnekte bir arka plan komut dosyası olarak kullanılıyor. Pop-Up arka plandan farklıdır. Bu iki uzatma parçası ile kullanım durumları arasındaki farkı anlamaya yardımcı olacaktır. Süreklilik için, aşağıdaki açıklama MV3 sürümüne ve terimlerine atıfta bulunacaktır.

Arka plan: "Bir arka plan hizmeti çalışanı gerektiğinde yüklenir ve boşta kaldığında boşaltılır [...] Uzantının bağlı olduğu olaylar etrafında arka plan komut dosyalarını yapılandırın. İşlevsel olarak ilgili olayları tanımlamak, arka plan komut dosyalarının bu olaylar tetiklenene kadar uykuda kalmasına izin verir ve uzantının önemli tetikleyicileri kaçırmasını önler."(Olayları servis çalışanlarıyla yönetin) Ek not: arka plan tam anlamıyla arka plandadır; görünür bir kullanıcı arabirimi yoktur. Kullanıcı arka plandaki düğmelerle etkileşime girmeyecektir (ancak ileti geçişi yoluyla daha fazla işlem için olayları arka plana göndermek mümkündür). Arka planı bir singleton olarak düşünün.

Açılır pencere: Bu, uzantı kullanıcısı için bir kullanıcı arabirimi sağlamak için olası yerlerden biridir. Açılır pencere, kullanıcı uzantı simgesini tıklatarak etkinleştirilir ve açılır pencere odağı kaybettiğinde (sekme kapatıldığında da) yok edilir ve kullanıcı bir dahaki sefere simgeyi tıklattığında yeniden yüklenir. "Arka plan komut dosyası gibi, Chrome'un uzantının açılır penceresinde sunabilmesi için bu dosyanın bildirimde bildirilmesi gerekir. Bunu yapmak için bildirime bir eylem nesnesi ekleyin ve açılır pencereyi ayarlayın.eylemin default_popup olarak html."(Bir kullanıcı arayüzü tanıtın). Açılan pencerede, kullanıcının tıklaması için düğmeler ve diğer öğeler ekleyebilirsiniz. Açılır pencere her sekmeye özgüdür. Birden fazla tarayıcı penceresi açıp simgeye tıkladığınızda, aynı anda birden fazla açılır pencere açılabilir.

Kısacası: hata, böyle bir düğme olmadığında arka planda düğme öğesini aramaktan geliyor; bildirim anahtarının kaldırılması bunu önleyecektir.


Minimal çalışma örneği

manifesto.jsonname: background anahtar kaldırıldı

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

indeks.html: değişiklik yok

(stil.css bulunamadı hatasına neden olur, ancak bu soruyla ilgili bir endişe yaratmaz)

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

uygulama.js: günlük metni değiştirildi, önemli bir değişiklik yok

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

içerik.js: günlük çıktılarını biraz değiştir, atamayı yorumladı

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

teşekkürler, arka plan komut dosyasını manifest'ten kaldırdım, ancak yine de aynı hatayı alıyorum. Şimdi tek fark, Bağlamın _generated_background_page'in aksine içinde bulunduğum geçerli sekmeyi çıkarmasıdır.daha önce gösterilen html. Çevrimiçi okurken, bir düğmenin "özellik kümesi null" değerini düzeltmenin yolu, adlandırma hatalarını kontrol etmek veya her ikisini de yaptığım ve hala aynı hatayı aldığım bir DOMContentLoaded olay dinleyicisi eklemektir
Chris Wu

Tamam, en az çalışma örneği göndermeme izin verin. Cevabı düzenleyeceğim.
Neea

Önce programlı olarak oluşturulmadıkça arka planda düğme yok. getElementById adlandırmayı kontrol ettikten veya içerik yüklenmesini bekledikten sonra tanımsız döndürmeye devam eder. Arka plan başsız olarak düşünülmelidir (mv2'de oluşturulan sayfayı görüntülemek mümkün olsa da, gerçek kullanıcı bunu görmeyecektir).
Neea

wow yardım açıklık bir sürü şey aldım işe. Çok takdir!!!! Mesajın iletilmesi ile ilgisi vardı (mesaj.içerik yerine kullanıcı adı.kullanıcı)
Chris Wu

Diğer dillerde

Bu sayfa diğer dillerde

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