Chrome exention option page not saving value

StackOverflow https://stackoverflow.com/questions/21558640

سؤال

I am trying to work on what I thought would be a fairly basic chrome extension. I have an option page where users can choose a color, then, from a content script, on every other page there would be a box, of the chosen color, in the upper left corner. For some reason the content script page will work with the default value, but the option page is not working. Can you tell me why? It's worth mentioning that for the option page, nothing is being printed to the log.

Manifest.json:

{
    "name": "Iframe",
    "description": "",
    "version": "1",
    "manifest_version": 2,
    "options_page": "options.html",
    "background": { "scripts": ["background.js"] },
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "anotherscript.js"
            ],
            "all_frames": true
        }
    ],
    "permissions": [
        "<all_urls>"
    ]
}

Options.html:

<html>
<head>
    <title>Options for Color Chooser</title>

</head>
<body id="body">
    <h1>Favorite Color</h1>
    <select id="color">
        <option value="blue">Blue</option>
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="yellow">Yellow</option>
    </select>
    <br />
    <button id="save">Save</button>
    <br />
    <button id="default">Restore default</button>
    <script type="text/javascript" src="options.js"></script>
</body>
</html>

Option.js:

var defaultColor = "blue";

document.getElementById('body').addEventListener(function loadOptions() {
    var favColor = localStorage["favColor"];

    // valid colors are red, blue, green and yellow
    if (favColor == undefined || (favColor != "red" && favColor != "blue" && favColor != "green" && favColor != "yellow")) {
        favColor = defaultColor;
    }

    var select = document.getElementById("color");
    for (var i = 0; i < select.children.length; i++) {
        var child = select.children[i];
            if (child.value == favColor) {
            child.selected = "true";
            break;
        }
    }
});

document.getElementById('save').addEventListener(function saveOptions() {
    var select = document.getElementById("color");
    var color = select.children[select.selectedIndex].value;
    localStorage["favColor"] = color;
    consol.log("saved");
});

document.getElementById('default').addEventListener(function eraseOptions() {
    localStorage.removeItem("favColor");
    location.reload();
    consol.log("reloaded");
});

Background.js:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.method == "getLocalStorage")
      sendResponse({data: localStorage[request.key]});
    else
      sendResponse({}); // snub them.
});

Content_script.js:

color = "blue";
chrome.runtime.sendMessage({method: "getLocalStorage", key: "favColor"}, function(response) {
  color = response.data;
    consol.log(response.data);
});

a = document.createElement("div");
a.style.width = "50%";
a.style.height = "50%";
a.style.position = "absolute"
a.style.top = "0px"
a.style.left = "0px"
a.style.backgroundColor = color;
a.style.zIndex = 9999999;
a.style.opacity = 0.1;
document.body.appendChild(a);
هل كانت مفيدة؟

المحلول

You've got consol.log without "e" and no error? That's unlikely. Are your event handlers even called? Consider your code:

document.getElementById('default').addEventListener(function () { ... });

What is the event name/type here? I suppose "click"? Try:

document.getElementById('default').addEventListener('click', function () { ... });

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top