Question

我试图将Chrome扩展程序的默认弹出作为设置页面

到目前为止

代码

[的manifest.json]

{

    "name" : "test",

    "description" : "it just works",

    "version" : "1.0",

    "manifest_version" : 2,

    "permissions": [
        "activeTab",
        "declarativeContent",
        "storage"
    ],

    "icons": {
        "16"  : "icon_016.png"
    },

    "options_page": "options.html",

    "content_scripts": [
        {
            "matches": [""],
            "js": ["jquery.js", "script.js"]
        }
    ],

    "background": {
        "scripts": ["background.js","options.js"],
        "persistent": false
    },



    "browser_action":{

        "default_icon": "icon_016.png",
        "default_popup": "popup.html"
    }
}

[popup.html]

    <!DOCTYPE html>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title></title>
    <base target="_blank" />
    <script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='jquery-ui.min.js'></script>
<script src='spectrum.js'></script>

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel='stylesheet' href='spectrum.css' />

    <script type="text/javascript" src="options.js"></script>
    <style type='text/css'>

        body {
            width: 300px;
            height: 50px;
        }

        .bc {
            text-align: center;
            height: 60px;
        }

    </style>

</head>
<body onload="loadOptions()">
    <div class="bc container well">

                                <div class="input-group-addon">Refresh time (s)</div>
                                <input class="input" type="number" id="refresh">
                                    <br /><br />
                                <div class="input-group-addon">Max Buy</div>
                                <input class="input" type="number" id="maxBuy">
                                    <br /><br />
                                <div class="input-group-addon">Min Buy</div>
                                <input class="input" type="number" id="minBuy">
                                    <br /><br />
                                <div class="input-group-addon">Buy at (%) discount</div>
                                <input class="input" type="number" id="discount">
                                    <br /><br />

                                <button onclick="saveOptions()">Save</button>
                                    <br />

                                <button onclick="eraseOptions()">Restore default</button>
    </div>
</body>
</html>

[options.js]

var defmax = 999999;
var defmin = 0;
var defdisc = 30;
var defref = 10;



function loadOptions() {

   var maxBuy = localStorage["maxBuy"];
   var minBuy = localStorage["minBuy"];
   var discount = localStorage["discount"];
   var refresh = localStorage["refresh"];


    // value is not void/null

    if (maxBuy == undefined) {

        maxBuy = defmax;

    }

    if (minBuy == undefined) {

        minBuy = defmin;

    }

    if (discount == undefined) {

        discount = defdisc;

    }

    if (refresh == undefined) {

        refresh = defref;

    }

}


function saveOptions() {

   var select1 = document.getElementById("maxBuy").value;
   var select2 = document.getElementById("minBuy").value;
   var select3 = document.getElementById("discount").value;
   var select4 = document.getElementById("refresh").value;

    localStorage["maxBuy"] = select1;
    localStorage["minBuy"] = select2;
    localStorage["discount"] = select3;
    localStorage["refresh"] = select4;

     chrome.storage.sync.set({
           maxBuy: $('#maxBuy').val(),
           minBuy: $('#minBuy').val(),
           discount: $('#discount').val(),
           refresh: $('#refresh').val()
        });
}



function eraseOptions() {

    localStorage.removeItem("maxBuy");
    localStorage.removeItem("minBuy");
    localStorage.removeItem("discount");
    localStorage.removeItem("refresh");

    location.reload();

}

这个想法是默认弹出窗口作为一个设置页面工作，而不是说它应该显示当前的设置值，你应该能够更改它们。请记住，我是新手，这只是来自各种项目的各种代码的混杂代码。

问题是为什么它不起作用，它没有保存值，当你打开弹出窗口时它也没有显示默认值

Answer 1

您必须存储

localStorage.setItem("lastname", "Arun");
localStorage.getItem("lastname");

Chrome本地存储问题

1 个答案: