javascript - 在 localStorage 中为 GoogleChrome 扩展选项面板保存数据并访问数据

Question

我正在为 Google Chrome 制作扩展程序，当用户单击它时，该扩展程序会删除所有浏览数据，该扩展程序工作正常，但现在我尝试添加一个选项面板，用户可以在其中选择要删除的数据，我的问题是用户在选项面板中所做的选项没有被保存（或者我无法正确检索存储在 localStorage 中的数据），因为当我在保存并关闭后再次访问选项面板时，复选框再次为空白。

清单 [manifest.json]

{
  "name": "TEST TITLE",
  "version": "1.0",
  "manifest_version": 2,
  "description": "TEST DESCRIPTION",
  "options_page": "options.html",
  "icons": { "16": "icon-small.png",
            "48": "icon-medium.png",
            "128": "icon-big.png" },
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "storage",
    "browsingData"
  ]
}

HTML [popup.html]

<!DOCTYPE html>
<html>
  <head>
  <script src="script.js"></script>
  </head>
  <body>
  </body>
</html>

HTML [选项.html]

<!DOCTYPE html>
<html>
  <head>
  <script src="script-options.js"></script>
  <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body onLoad="loadOptions()">
  <div id="wrapper-options">
  <div id="header-options">OPTIONS</div>
  <div id="content-options">
  <div id="checkbox-options">
  <input name="" id="protectedWeb-checkbox" type="checkbox" value="">Websites that have been installed as hosted applications
  </div>
  <div id="checkbox">
  <input name="" id="unprotectedWeb-checkbox" type="checkbox" value="">Normal websites
  </div>
  <div id="checkbox">
  <input name="" id="extension-checkbox" type="checkbox" value="">Extensions and packaged applications a user has installed
  </div>
  <div id="checkbox">
  <input name="" id="appcache-checkbox" type="checkbox" value="">Websites appcaches
  </div>
  <div id="checkbox">
  <input name="" id="cache-checkbox" type="checkbox" value="">Browser's cache
  </div>
  <div id="checkbox">
  <input name="" id="cookies-checkbox" type="checkbox" value="">Browser's cookies
  </div>
  <div id="checkbox">
  <input name="" id="downloads-checkbox" type="checkbox" value="">Browser's download
  </div>
  <div id="checkbox">
  <input name="" id="fileSystems-checkbox" type="checkbox" value="">Websites file systems
  </div>
  <div id="checkbox">
  <input name="" id="formData-checkbox" type="checkbox" value="">Browser's stored form data
  </div>
  <div id="checkbox">
  <input name="" id="history-checkbox" type="checkbox" value="">Browser's history
  </div>
  <div id="checkbox">
  <input name="" id="indexedDB-checkbox" type="checkbox" value="">Websites IndexedDB data
  </div>
  <div id="checkbox">
  <input name="" id="localStorage-checkbox" type="checkbox" value="">Websites local storage data
  </div>
  <div id="checkbox">
  <input name="" id="pluginData-checkbox" type="checkbox" value="">Plugins data
  </div>
  <div id="checkbox">
  <input name="" id="passwords-checkbox" type="checkbox" value="">Stored passwords
  </div>
  <div id="checkbox">
  <input name="" id="webSQL-checkbox" type="checkbox" value="">Websites WebSQL data
  </div>
  <div id="button-option">
  <input name="" type="button" value="SAVE" onClick="saveOptions()">
  <input name="" type="button" value="CANCEL" onClick="">
  </div>
  </div>
  </div>
  </body>
</html>

JavaScript [脚本.js]

// JavaScript Document

function browsingdata(){
chrome.browsingData.remove({
  "originTypes": {
    "protectedWeb": true, // Set to true or false as per your requirement / Websites that have been installed as hosted applications
    "unprotectedWeb":true, // Set to true or false as per your requirement / Normal websites
    "extension":true // Set to true or false as per your requirement / Extensions and packaged applications a user has installed
  }
}, {
  "appcache": true, // Set to true or false as per your requirement / Websites appcaches
  "cache": true, // Set to true or false as per your requirement / Browser's cache
  "cookies": true, // Set to true or false as per your requirement / Browser's cookies
  "downloads": true, // Set to true or false as per your requirement / Browser's download
  "fileSystems": true, // Set to true or false as per your requirement / Websites file systems
  "formData": true, // Set to true or false as per your requirement / Browser's stored form data
  "history": true, // Set to true or false as per your requirement / Browser's history
  "indexedDB": true, // Set to true or false as per your requirement / Websites IndexedDB data
  "localStorage": true, // Set to true or false as per your requirement / Websites local storage data
  "pluginData": true, // Set to true or false as per your requirement / Plugins data
  "passwords": true, // Set to true or false as per your requirement / Stored passwords
  "webSQL": true // Set to true or false as per your requirement / Websites WebSQL data
}, function (){
    console.log("All data Deleted");
});
}
window.onload=browsingdata;

JavaScript [脚本选项.js]

// JavaScript Document

function saveOptions() {
    if (document.getElementById('protectedWeb-checkbox').checked) {
        localStorage.setItem('protectedWeb-checkbox', "true");
    } else {
        localStorage.setItem('protectedWeb-checkbox', "false");
    }
}

function loadOptions() {
    if (localStorage.getItem('protectedWeb-checkbox') == "true") {
        console.log("its checked");
        document.getElementById("protectedWeb-checkbox").checked=true;
    } else {
        console.log("its not checked");
    }
}

除了主要问题之外，我还想知道您认为将其他 14 个选项添加到 JavaScript [script-options.js] 的最佳方式，以及您建议我如何更改值（真/假） JavaScript [script.js] 也使用 JavaScript，任何关于整个扩展代码的建议或建议也将不胜感激。

一如既往地提前感谢您花时间阅读本文，下面的列表是我迄今为止阅读的所有 StackOverflow 问题和网站。

https://stackoverflow.com/questions/3033829/google-chrome-extension-local-storage
https://stackoverflow.com/questions/2153070/do-chrome-extensions-have-access-to-local-storage
https://stackoverflow.com/questions/11679967/remember-checkbox-with-localstorage-onclick
http://julip.co/2010/01/how-to-build-a-chrome-extension-part-2-options-and-localstorage/
https://developer.chrome.com/stable/extensions/storage.html

score 4 · Accepted Answer

这是我的贡献。
这样做是因为我讨厌做 html/css ;)
自动保存选项，所以不需要保存按钮。
注释掉在弹出新闻中清除内容的位，不想清除任何内容。
清单.json

{
  "name": "ProtectedWeb",
  "description" : "http://stackoverflow.com/questions/13617257/saving-data-in-localstorage-for-a-googlechrome-extension-options-panel-and-acces/",
  "version": "1.0",
  "permissions": [
    "tabs", "<all_urls>","storage","browsingData"
  ],
  "browser_action": {
      "default_title": "Clear stuff",
      "default_icon": "icon.png",
      "default_popup": "popup.html"
  },
  "options_page": "options.html",
  "manifest_version":2
}

选项.html

<html>
  <head>
  <script src="options.js"></script>
  </head>
  <body>
  <div id="wrapper-options">
  <div id="header-options">OPTIONS</div>
  <div id="content-options">
    <br />
    Origin Type
    <div id="originTypes">
    </div>
  <div id="checkbox-options">
    <br />
    Options
    <div id="options">
    </div>
  </div>
  </div>
  </div>
  </body>
</html>

选项.js

// This is where we store the default options if there aren't any options saved and it gets replaced with what is saved on load if there is anything in storage
var Options = {
    "originTypes": {
        "protectedWeb": false,
        // Set to false or false as per your requirement / Websites that have been installed as hosted applications
        "unprotectedWeb": true,
        // Set to true or false as per your requirement / Normal websites
        "extension": false
        // Set to true or false as per your requirement / Extensions and packaged applications a user has installed
    },
    options: {
        "appcache": true,
        // Set to false or false as per your requirement / Websites appcaches
        "cache": true,
        // Set to false or false as per your requirement / Browser's cache
        "cookies": true,
        // Set to false or false as per your requirement / Browser's cookies
        "downloads": true,
        // Set to false or false as per your requirement / Browser's download
        "fileSystems": true,
        // Set to false or false as per your requirement / Websites file systems
        "formData": true,
        // Set to false or false as per your requirement / Browser's stored form data
        "history": true,
        // Set to false or false as per your requirement / Browser's history
        "indexedDB": true,
        // Set to false or false as per your requirement / Websites IndexedDB data
        "localStorage": true,
        // Set to false or false as per your requirement / Websites local storage data
        "pluginData": true,
        // Set to false or false as per your requirement / Plugins data
        "passwords": true,
        // Set to false or false as per your requirement / Stored passwords
        "webSQL": true
        // Set to false or false as per your requirement / Websites WebSQL data
    }
}


var optionsTemplate = {
    originTypes: [{
        name: "appcache",
        title: "appcache",
        description: "Websites appcaches"

    }, {
        name: "unprotectedWeb",
        title: "Unprotected Web",
        description: "Normal websites"

    }, {
        name: "extension",
        title: "Extension",
        description: "Extensions and packaged applications a user has installed"

    }],
    options: [{
        name: "appcache",
        title: "appcache",
        description: "Websites appcaches"

    }, {
        name: "cache",
        title: "cache",
        description: "Browser's cache"

    }, {
        name: "cookies",
        title: "cookies",
        description: "Browser's cookies"

    }, {
        name: "downloads",
        title: "downloads",
        description: "Browser's download"

    }, {
        name: "fileSystems",
        title: "fileSystems",
        description: "Websites file systems"

    }, {
        name: "formData",
        title: "formData",
        description: "Browser's stored form data"

    }, {
        name: "history",
        title: "history",
        description: "Browser's history"

    }, {
        name: "indexedDB",
        title: "indexedDB",
        description: "Websites IndexedDB data"

    }, {
        name: "localStorage",
        title: "localStorage",
        description: "Websites local storage data"

    }, {
        name: "pluginData",
        title: "pluginData",
        description: "Plugins data"

    }, {
        name: "passwords",
        title: "passwords",
        description: "Stored passwords"

    }, {
        name: "webSQL",
        title: "webSQL",
        description: "Websites WebSQL data"
    }]
}

var optionsTemplateSelectors = {
    originTypes: '#originTypes',
    options: '#options'
}


renderHTML = function(template, targets) {
    var key, keys, elements = {};
    keys = Object.keys(targets);
    for(var i = 0; i < keys.length; i++) {
        key = keys[i];
        elements[key] = document.querySelector(targets[key]);
        if (elements[key]===null) console.debug('Couldn\'t find "'+key+'"" using the querySelector "'+targets[key]+'"');
    }

    var sections = Object.keys(template),
        section;
    var item;
    var checkbox, div, text;
    for(var z = 0; z < sections.length; z++) {
        section = sections[z];
        for(var i = 0; i < template[section].length; i++) {
            item = template[section][i];
            div = document.createElement('div');
            text = document.createTextNode(item.title);
            checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.id = item.name + '-checkbox';
            checkbox.dataset['section'] = section;
            checkbox.dataset['key'] = item.name;
            checkbox.title = item.description;
            if(Options[section][item.name] === true) checkbox.checked = true;
            checkbox.addEventListener('change', checkboxChanged);
            div.id = item.name;
            div.appendChild(checkbox);
            div.appendChild(text);
            elements[section].appendChild(div);
        }
    }
}


checkboxChanged = function(evt) {
    var src = evt.srcElement;
    var checked = src.checked;
    Options[src.dataset['section']][src.dataset['key']] = checked;
    chrome.storage.local.set({
        'options': Options
    });
}


init = function() {
    chrome.storage.local.get('options', function(options) {
        if(Object.keys(options).length === 0) {
            chrome.storage.local.set({
                'options': Options
            });
        } else {
            Options = options.options;
        }
        renderHTML(optionsTemplate, optionsTemplateSelectors);
    })
}


window.addEventListener('load', init);

popup.html

<!doctype html>
<html>
  <head>
    <script src="popup.js"></script>
  </head>
  <body>
  </body>
</html>

popup.js

chrome.storage.local.get('options', function(data) {
    chrome.browsingData.remove({
  "originTypes":data.options.originTypes
},data.options.options);
});

//window.close();

score 1 · Accepted Answer

您删除了 popup.html 中的所有本地存储数据。因此，每次打开它时，您的设置都会消失。如果你不打开它，设置并没有真正的用处。

score 1 · Accepted Answer

浏览完您的代码后，我准备了一个结构，您可以进一步扩展所有复选框；

我已经在以下情况下对其进行了测试，如果您仍然有困难，请告诉我：

页面开头：

在此处输入图像描述

选择后

在此处输入图像描述

页面加载后：

在此处输入图像描述

刷新：

在此处输入图像描述

您可以使用 chrome 存储 API 而不是本地存储

清单.json

{
  "name": "TEST TITLE",
  "version": "1.0",
  "manifest_version": 2,
  "description": "TEST DESCRIPTION",
  "options_page": "options.html",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "storage",
    "browsingData"
  ]
}

popup.html

<html>
  <head>
  <script src="scripts.js"></script>
  </head>
  <body>
  </body>
</html>

选项.html

<html>
  <head>
  <script src="script-options.js"></script>
  </head>
  <body>
  <div id="wrapper-options">
  <div id="header-options">OPTIONS</div>
  <div id="content-options">
  <div id="checkbox-options">
  <input name="" id="protectedWeb" type="checkbox" value="">Websites that have been installed as hosted applications
  </div>
  <div id="button-option">
  <input name="" type="button" value="SAVE" id="save" >
  </div>
  </div>
  </div>
  </body>
</html>

脚本.js

// JavaScript Document

function browsingdata(){

var protectedWeb;
chrome.storage.local.get('protectedWeb',function (obj){
    console.log(obj.protectedWeb);
    protectedWeb = obj.protectedWeb;
});

chrome.browsingData.remove({
  "originTypes": {
        "protectedWeb": protectedWeb, // Set to false or false as per your requirement / Websites that have been installed as hosted applications
        "unprotectedWeb":true, // Set to true or false as per your requirement / Normal websites
        "extension":true // Set to true or false as per your requirement / Extensions and packaged applications a user has installed

    }}, {
  "appcache": false, // Set to false or false as per your requirement / Websites appcaches
  "cache": false, // Set to false or false as per your requirement / Browser's cache
  "cookies": false, // Set to false or false as per your requirement / Browser's cookies
  "downloads": false, // Set to false or false as per your requirement / Browser's download
  "fileSystems": false, // Set to false or false as per your requirement / Websites file systems
  "formData": false, // Set to false or false as per your requirement / Browser's stored form data
  "history": false, // Set to false or false as per your requirement / Browser's history
  "indexedDB": false, // Set to false or false as per your requirement / Websites IndexedDB data
  "localStorage": false, // Set to false or false as per your requirement / Websites local storage data
  "pluginData": false, // Set to false or false as per your requirement / Plugins data
  "passwords": false, // Set to false or false as per your requirement / Stored passwords
  "webSQL": false // Set to false or false as per your requirement / Websites WebSQL data
}, function (){
    console.log("All data Deleted");
});

}
window.onload=browsingdata;

脚本选项.js

// JavaScript 文档 var storage = chrome.storage.local;

function saveOptions() {
    console.log("Clicked ... ");
//Use document.querySelectorAll() function when you all multiple check boxes and iterate over them instead of huge if-else chains
    if (document.getElementById('protectedWeb').checked) {
        // Save it using the Chrome extension storage API.
        storage.set({'protectedWeb': 'true'}, function() {
            // Notify that we saved.
            console.log('Settings saved');
        });

    } else {
        // Save it using the Chrome extension storage API.
        storage.set({'protectedWeb': 'false'}, function() {
            // Notify that we saved.
            console.log('Settings saved');
        });
    }
}

function getSelectedData() {
    chrome.storage.local.get('protectedWeb',function (obj){
    if(obj.protectedWeb == "true"){
    document.getElementById('protectedWeb').checked = true;
}else{
    document.getElementById('protectedWeb').checked = false;
}
});
}

window.onload = function (){
    getSelectedData();
    document.getElementById('save').onclick=saveOptions;
}

javascript - 在 localStorage 中为 GoogleChrome 扩展选项面板保存数据并访问数据

3 回答 3

Related

Reference