Question

我使用此文档构建了一个带有选项页面的Firefox扩展 Implement a settings page

在此设置页面上，用户可以输入用户名和密码，然后存储在localStorage中。

function saveOptions() {

localStorage.setItem("hbz_username", document.querySelector("#username").value);
localStorage.setItem("hbz_pass", Aes.Ctr.encrypt(document.querySelector("#password").value, '12345678910111213', 128));

}

插件操纵网站的DOM并生成HTML元素中的REST Web服务链接，这些链接包含与特定正则表达式模式匹配的字符串。当单击该链接时，扩展程序应从localStorage

加载用户凭据

var username= localStorage.getItem("hbz_username");
var passwd = localStorage.getItem("hbz_pass");

但这不起作用。当我按照上面列出的文档中描述的方式尝试时，我在F12控制台中收到“浏览器未定义”错误。

function restoreOptions() {

function setCurrentChoice(result) {
username = result.username;
}

function onError(error) {
console.log(`Error: ${error}`);
}

var getting = browser.storage.local.get("hbz_username");
getting.then(setCurrentChoice, onError);
}

所以我的问题是：如何从我的扩展程序访问localStorage？

编辑：在帖子上添加了我之前回答的内容。

很抱歉等待，但我不得不准备一个缩小版本的插件而没有任何加密等。

的package.json

{
"title": "Addon From Scratch",
  "name": "addon-from-scratch",
  "version": "0.0.1",
  "description": "A basic add-on",
  "main": "index.js",
  "author": "Chris",
  "engines": {
    "firefox": ">=38.0a1",
    "fennec": ">=38.0a1"
  },
  "license": "MIT",
  "keywords": [
    "jetpack"
  ]
}

index.js

var self = require("sdk/self");

// a dummy function, to show how tests work.
// to see how to test this function, look at test/test-index.js
function dummy(text, callback) {
  callback(text);
}

exports.dummy = dummy;

var tag = "body"
var buttons = require('sdk/ui/button/action');
var tabs = require("sdk/tabs");
var pageMod = require("sdk/page-mod");
var data = require("sdk/self").data;


var button = buttons.ActionButton({
  id: "mozilla-link",
  label: "Visit Mozilla",
  icon: {
    "16": "./icon-16.png",
    "32": "./icon-32.png",
    "64": "./icon-64.png"
  },
  onClick: handleClick
});

function handleClick(state) {
  tabs.open("login.html")
}

function onOpened() {
  console.log(`Options page opened`);
}

function onError(error) {
  console.log(`Error: ${error}`);
}

pageMod.PageMod({
  include: "*",
  contentScriptFile: data.url("modify-content.js"),
  onAttach: function(worker) {
    worker.port.emit("getElements", tag);
    worker.port.on("gotElement", function(elementContent) {
      console.log(elementContent);
    });
  }
});

修改 - content.js

self.port.on("getElements", function() {


    var username= localStorage.getItem("hbz_username");
    var passwd = localStorage.getItem("hbz_pass");
    //here is where usually the DOM Manipulation takes place and the link to the REST Service is created. The link contains the username and the encrypted password as param
    alert(username + passwd);


});

options.js

function saveOptions() {

    localStorage.setItem("hbz_username", document.querySelector("#username").value);
    localStorage.setItem("hbz_pass", document.querySelector("#password").value);

}

function restoreOptions() {

  function setCurrentChoice() {
    document.querySelector("#username").value = localStorage.getItem("hbz_username");
    document.querySelector("#password").value = localStorage.getItem("hbz_pass");
  }

  function onError(error) {
    console.log(`Error: ${error}`);
  }

  setCurrentChoice();
}

document.addEventListener("DOMContentLoaded", restoreOptions);
document.querySelector("form").addEventListener("submit", saveOptions);

的login.html

<form>
Username:<input type="text" id="username" />
Password:<input type="password" id="password" />
<input type="submit" Value="Submit" />
</form> 
<script src="options.js"></script>

正如我所提到的，我已经尝试过上述文档中的解决方案。这是实际的代码。我希望这会有所帮助。

从扩展程序访问Firefox的LocalStorage

0 个答案: