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

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

转载作者：行者123 更新时间：2023-11-29 17:19:55

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

list [ list .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] 的最佳方式是什么，以及您建议我如何更改值 (true/false) 在 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

最佳答案

这是我的贡献。
这样做是因为我讨厌做 html/css ;)
自动保存选项，因此不需要保存按钮。
注释掉弹出式按键上清除内容的位，不想清除任何内容。
list .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
}

options.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>

options.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();

关于javascript - 在 localStorage 中为 GoogleChrome 扩展选项面板保存数据并访问数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13617257/

文章推荐： Javascript 继承 - "this"关键字丢失绑定(bind)？

文章推荐： Android - 从内部存储文件夹中选择文件

javascript - javascript localstorage 和 Angular localstorage($localstorage) 之间的区别？
我是 Angular 新手。使用 $localstorage(ngStorage) 是否有任何特定的原因而不是常规的 javascript localstorage 有什么区别。谁能给我解释一下吗？
javascript - 使用 : localStorage(), window.localStorage() 或 document.localStorage() 哪个更好？
这个问题说明了一切。我意识到所有选项都可以在最新的浏览器中使用，但是语义上最好的选择是什么？为什么？最佳答案根据 W3C 标准，正确的是 window.localStorage，因为 localS
javascript - 超过 localStorage 配额(localStorage 大小!= 文件下载大小)& 如何检查 localStorage 大小
我想不出一个好的标题，所以希望可以。我正在做的是创建一个离线 HTML5 webapp。 “出于某些原因”我不希望将某些文件放在缓存 list 中，而是希望将内容放在 localStorage 中。
javascript - localStorage.getItem ('item' ) 是否优于 localStorage.item 或 localStorage ['item' ]？
我最近问了a question about LocalStorage .使用 JSON.parse(localStorage.item) 和 JSON.parse(localStorage['item
javascript - localStorage.getItem ('item' ) 是否优于 localStorage.item 或 localStorage ['item' ]？
我最近问了a question about LocalStorage .使用 JSON.parse(localStorage.item) 和 JSON.parse(localStorage['item
javascript - localStorage.getItem ('item' ) 比 localStorage.item 或 localStorage ['item' ] 更好吗？
我最近问过a question about LocalStorage 。使用 JSON.parse(localStorage.item) 和 JSON.parse(localStorage['item
javascript - localStorage 项与其他 localStorage 项冲突
我在将本地存储的定价添加到其他字段时遇到问题。如果我将 beforeNoonNPSlot 的价格设置为 2，但我将 matineeNPSlot 的字段留空(它应该保留分配给的任何价格)最后)。然后在我
javascript - 从 localStorage 对象变量中删除对象键而不从 localStorage 中删除
我需要从 localStorage 对象变量中删除对象键而不从 localStorage 中删除键 let obj = localStorage; let keys = Object.keys(loc
javascript - 将 localStorage 设置为现有的 localStorage 变量
根据我所读到的内容，我希望以下代码能够工作。此代码是函数的一部分，该函数应该通过用下一个更高的 localStorage 变量覆盖它来删除 localStorage 变量。一旦没有更多内容可供复制，
javascript - localStorage ["something"] vs localStorage.something
这个问题已经有答案了: 已关闭10 年前。 Possible Duplicate: JavaScript property access: dot notation vs. brackets? 我是
javascript - localStorage.property 与 localStorage ['property' ]
编写localStorage['key'] = value或localStorage.setItem('key', value)有区别吗？我看到了this question标记为重复，但在开发人员工
javascript - : window. localStorage 和 localStorage 有什么区别吗？
我一直在做以下事情: var store = window.localStorage; store.setItem() 但现在我看到代码是这样做的: localStorage.setItem() 两者
jquery - 未捕获的 Backbone.localStorage : Environment does not support localStorage.
我在 Chrome 上遇到此错误。不知道为什么会发生。任何帮助!我正在使用 Backbone.localStorage 插件和 Backbone。我在以下行中收到错误: localStorage: B
javascript - 如何使用 Backbone.LocalStorage 在 localStorage 中存储值
如果我尝试以下代码: var c = new Backbone.Collection(); c.localStorage = new Backbone.LocalStorage("items");
javascript - 为什么我的 localStorage.setItem() 和 localStorage.getItem() 没有存储值？
我想使用 localStorage 存储用户输入值，然后在倒计时器中使用该值。这是用户输入数据的 HTML: Work Time
javascript - window.localStorage.setItem 和 localStorage.setItem 之间应该有什么区别吗？
我有一个适用于 Mac 和 Linux 用户但不适用于 Windows 用户的 Chrome 扩展程序。当我进入控制台并在 localStorage 中设置一个项目时，它工作正常，但是当用户尝试使用扩
javascript - In IE10 ('localStorage' in window) condition is true but localStorage is undefined?
在这里浏览所有问题/答案，但找不到解决我的问题的方法。条件('localStorage' in window)返回 true但是 localStorage 的对象本身仍然是 undefined . 设
javascript - localstorage 在 localstorage[key] += 1 上返回 11
使用下面的代码，我创建一个 localstorage 变量，如果未定义，则其键为 quote = 1。然而，当最终使用相同的引号键再次调用它时，即使使用了 Number() 函数，它也会变成 11 而
javascript - 为什么 localStorage ["..."] 未定义，但 localStorage.getItem ("...") 为空？
我上次检查时，以下两行返回 true: null == localStorage["foo"]; null == localStorage.getItem("foo"); 将 null 替换为 und
next.js - 静态 NextJS 站点中的 localStorage : ReferenceError: localStorage is not defined
我正在尝试在 NextJS 静态站点上使用 localStorage，但遇到 localStorage 未定义错误。我的错误显示组件的代码是: export default function Cat

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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