Chrome 扩展本地存储值未在主页上运行答案

【问题标题】：Chrome Extension Local Storage Values Not Running on Main PageChrome 扩展本地存储值未在主页上运行
【发布时间】：2015-03-14 12:54:02
【问题描述】：

所以我设置了一个 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');
}

【问题讨论】：

标签： javascript html google-chrome google-chrome-extension local-storage

【解决方案1】：

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

【讨论】：