2016-12-27 4 views
0

Ich versuche, eine Optionsseite für meine erste Erweiterung zu erstellen. Ich bin ganz neu in der Programmierung, also bin ich mir sicher, dass ich einen einfachen Faux-pas gemacht habe. Leider habe ich Probleme mit einigen grundlegenden Funktionen, die ich in meiner Basis-Erweiterung für einige Zeit und ohne Problem gearbeitet habe. Ich habe die Syntax überprüft und überall nach mir gesucht, warum dies nicht funktioniert UND gibt keinen Fehler darüber, warum es fehlschlägt. Ich habe das Verhalten in jsfiddle reproduziert. Jede Hilfe würde sehr geschätzt werden..click() auf Schaltfläche kann nicht verarbeitet werden (keine Fehler)

--HTML--

<title>Options for My Extension</title> 

<script src="jquery-3.1.1.js"></script> 
<body> 
<h1>Toggle Menu to "Default = Out"?</h1> 
<select id="Menu_Hide"> 
<option value="No">No</option> 
<option value="Yes">Yes</option> 
</select> 
<br /> 
<button id="Save">Save</button> 
<br /> 
<button id="Reset">Reset</button> 
</body> 

--JS--

function save_data(){ 
    var ob = document.getElementById("Menu_Hide"); 
    var txt = ob.children[ob.selectIndex].value; 
    localStorage["Menu_Hide"] = txt; 
} 

function load_data(){ 
    console.log("This loads just fine!") 
    var data = localStorage["Menu_Hide"]; 
    if (!data){ 
     return; 
    } 
var select = document.getElementById("Menu_Hide"); 
var found = false; 
for (var i = 0; i < select.children.length && !found; i++){ 
    var child = select.children[i]; 
    if (child.value == data) { 
     child.selected = "true"; 
     found = true; 
    } 
}  
} 

window.onLoad = load_data(); 

$('#Save').click(function() { 
    alert('Settings Saved!'); 
    save_data(); 
}) 

--manifest.json-- (Update)

{ 
    "manifest_version": 2, 
    "name": "My first attempt at being useful.", 
    "description": "This extension will add additional functionality to some pages.", 
    "version": "1.5", 
    "options_page": "options.html", 
    "content_scripts": [{ 
    "js": ["start.js"], 
    "matches": 
     [ 
     "https://<url1>" 
     "https://<url2>", 

     ] 
    }], 
"web_accessible_resources": ["run.js"], 
    "permissions": [ 
    "activeTab", 
    "tabs", 
] 
} 
+0

Tippfehler: es ist ['selectedIndex'] (https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedIndex) nicht' selectIndex'. Auch die Geige gibt Fehler, erstens ist jQuery nicht definiert, da Sie es nicht korrekt für die Geige aufgenommen haben, und dann ein Fehler 'Kann den Eigenschaft 'Wert' von undefiniert nicht lesen für die Zeile, in der Sie die falsche Eigenschaft verwendet haben name –

+1

'window.onLoad = load_data();' sollte 'window.onLoad = load_data;' sein. Sie rufen die Funktion sofort auf, anstatt einen Verweis auf die Funktion – charlietfl

+0

Ok zuzuweisen, also funktioniert die Geige nach den obigen Empfehlungen tatsächlich auf der Geige. Beim Laden dieses exakt gleichen Codes in einer Chrome-Erweiterung tritt jedoch eine "options_page" auf. Hat jemand einen Einblick, warum das scheitern würde? Es wird nichts auf der Konsole protokolliert. Ich kann nicht sehen, warum die "save_data" -Funktion nicht ausgelöst wird, wenn auf die Schaltfläche "save" geklickt wird. – technicallynick

Antwort

0

Ich kann nicht finden jede unterstützende Dokumentation, aber ich habe festgestellt, dass die ".click()" -Funktionalität funktioniert nicht für eine "Optionen" -Seite in einer Erweiterung. Anstatt jedoch eine separate Seite insgesamt zu verwenden, können Sie eine Browseraktion "default_popup" verwenden und die Klickfunktionalität (sowie andere Ereignislistener) hier arbeiten.

Ich hoffe, das hilft jemandem in der Zukunft!

Verwandte Themen