0

Mein Kumpel und ich erstellen unsere erste Chrome-Erweiterung als Klassenprojekt, können aber nicht über diesen Buckel hinwegkommen. Nachdem Sie oben rechts auf das Erweiterungssymbol geklickt haben, haben wir ein Dropdown-Menü mit einer Schaltfläche und beim Klicken sollte es eine JavaScript-Funktion auslösen. An der Spitze beginnend, haben wir eine Dummy-Schaltfläche mit einer Testfunktion erstellt, die ein console.log auslösen sollte, aber egal, was wir tun, nichts wird in der Konsole (oder der inspect-Popup-Konsole) angezeigt.Chrome Extension Javascript löst keine Aktion aus

JS + HTML:

document.getElementById("DOMContentLoaded", function() { 
 
    var btnStart = document.getElementById('startSc'); 
 
    btnStart.addEventListener('click', function() { 
 
     console.log("hi"); 
 
    }); 
 
});
<!doctype html> 
 
<html> 
 

 
<head> 
 
    <title>First Extension</title> 
 
    <script src="popup.js"></script> 
 
    <link rel='stylesheet' href="TBStyle.css"> 
 
</head> 
 

 
<body> 
 
    <h1>Go Chrome!</h1> 
 
    <a href="#" id="startSc">Start</a> 
 
</body> 
 

 
</html>

Manifest:

{ 
 
    "name": "My First Extension", 
 
    "version": "1.0", 
 
    "manifest_version": 2, 
 
    "description": "The first extension that I made.", 
 
    "browser_action": { 
 
    "default_icon": "icon.png", 
 
    "default_popup": "popup.html" 
 
    }, 
 
}

Jede Hilfe wird sehr geschätzt, danke im Voraus!

Antwort

1

getElementById funktioniert nicht so.

glaube ich, was Sie suchen ist dies:

document.addEventListener("DOMContentLoaded", function() { 
 
    var btnStart = document.getElementById('startSc'); 
 
    btnStart.addEventListener('click', function() { 
 
     console.log("hi"); 
 
    }); 
 
});
<!doctype html> 
 
<html> 
 

 
<head> 
 
    <title>First Extension</title> 
 
    <script src="popup.js"></script> 
 
    <link rel='stylesheet' href="TBStyle.css"> 
 
</head> 
 

 
<body> 
 
    <h1>Go Chrome!</h1> 
 
    <a href="#" id="startSc">Start</a> 
 
</body> 
 

 
</html>