Question

所以我设置了一个options.html页面和我的新标签页。选项页面功能齐全，可以使用，保存和加载本地存储的值。在我的主页面上，我已经让它访问了所有本地存储内容的settings.js文件，它说所有值都是未定义的 - 有什么办法可以从选项页面本地存储中获取值到我的新标签页？

清单：

{
"background": {
   "persistent": false,
   "scripts": [ "script/background.js" ]
},
"chrome_url_overrides": {
   "newtab": "dashboard.html"
},
"description": "Upgrade Your New Tab to SearchTab",
"icons": {
"16": "images/icons/icon16.jpg",
"48": "images/icons/icon48.jpg",
"128": "images/icons/icon128.jpg"
},
"manifest_version": 2,
"name": "SearchTab",
"options_page": "options.html",
"offline_enabled": true,
"content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",
"permissions": ["unlimitedStorage", "tabs"],
"version": "1.0.0"
}

settings.js

var defaultSearchPanel = "open";
var defaultBarBackground = "#000000";
var defaultBarColor = "#ffffff";

function loadOptions() {

    var searchPanel = localStorage["searchPanel"];
    var barBackground = localStorage["barBackground"];
    var barColor = localStorage["barColor"];

    if (searchPanel == undefined || (searchPanel != "open" && searchPanel != "closed")) {
        searchPanel = defaultSearchPanel;
    } else if(barBackground == undefined || (barBackground != "#000000" && barBackground != "#ffffff" && barBackground != "#333333" && barBackground != "#006633" && barBackground != "#336699" && barBackground != "#990000" && barBackground != "#CC6600")) {
        barBackground = defaultBarBackground;
    } else if(barColor == undefined || (barColor != "#000000" && barColor != "#ffffff" && barColor != "#333333" && barColor != "#006633" && barColor != "#336699" && barColor != "#990000" && barColor != "#CC6600")) {
        barColor = defaultBarColor;
    }

    var xSearchPanel = document.getElementById("searchPanel");
    var xBarBackground = document.getElementById("barBackground");
    var xBarColor = document.getElementById("barColor");

    for (var i = 0; i < xSearchPanel.children.length; i++) {
        var child = xSearchPanel.children[i];
        if (child.value == searchPanel) {
            child.selected = "true";
            break;
        }
    }
    for (var i = 0; i < xBarBackground.children.length; i++) {
        var child = xBarBackground.children[i];
        if (child.value == barBackground) {
            child.selected = "true";
            break;
        }
    }
    for (var i = 0; i < xBarColor.children.length; i++) {
        var child = xBarColor.children[i];
        if (child.value == barColor) {
            child.selected = "true";
            break;
        }
    }
}

function saveOptions() {
    var xSearchPanel = document.getElementById("searchPanel");
    var xBarBackground = document.getElementById("barBackground");
    var xBarColor = document.getElementById("barColor");

    var searchPanelDisplay = xSearchPanel.children[xSearchPanel.selectedIndex].value;
    var barBackgroundDisplay = xBarBackground.children[xBarBackground.selectedIndex].value;
    var barColorDisplay = xBarColor.children[xBarColor.selectedIndex].value;

    localStorage["searchPanel"] = searchPanelDisplay;
    localStorage["barBackground"] = barBackgroundDisplay;
    localStorage["barColor"] = barColorDisplay;
    localStorage.setItem('searchPanel', searchPanelDisplay);
    localStorage.setItem('barBackground', barBackgroundDisplay);
    localStorage.setItem('barColor', barColorDisplay);
    alert('Your Settings Have Been Saved');
}

function eraseOptions() {
    localStorage.removeItem("searchPanel");
    location.reload();
}

/* PAGE OPTIONS */
/* OPTIONS */
var searchPanelDisplay = localStorage["searchPanel"];
var searchBarBackground = localStorage["barBackground"];
var searchBarColor = localStorage["barColor"];

if(localStorage["searchPanel"] == 'closed') {
    alert('hello');
} else {
    alert('nope');
}

Answer 1

Chrome扩展程序中执行的脚本受CSP (content security policy)保护。为了从不同的“沙盒”组件的localStorage中读取，您必须使用some sort of messaging，并且很可能使用后台页面来回显组件之间的localStorage数据。我建议做的只是处理一次性请求，在你习惯了之后感觉到你想要的，你可以切换到任何其他方法。

Chrome扩展程序本地存储值未在主页上运行

1 个答案: