Question

我正在尝试按照开发者网站上的选项指南here进行操作，但似乎没有任何结果。它不会保存放入其中的文本数据，也无法从中检索数据。当我在控制台中运行函数时，我得到一个未被捕获的错误。我不确定为什么会这样。

任何建议都将不胜感激。

修改

进一步澄清作为评论中的要求。

通过常规方式加载扩展（在扩展和加载的解压扩展中勾选dev选项），扩展的主要部分工作（单击上下文菜单插入文本）。为了运行选项html，我单击扩展页面上的选项链接并将文本插入输入框。单击“保存”按钮可显示状态JavaScript文本内容（如预期的那样）。但是，重新加载选项菜单时没有检索到任何内容，因此我无法确定其中是否有任何实际运行。所以我从扩展页面打开了背景并选择了控制台部分。这没有显示任何错误，所以我决定从控制台调用这些函数，认为这会运行它们，但是它会导致save_options和restore_options的未被捕获的错误。

options.html

<!DOCTYPE html>
<html>
<head><title>My Test Extension Options</title></head>
<body>
<h4>Your Favorite Statements</h4>
<div class="favDiv1">
<label>Favorite  1: </label><input type="text" name="myFav1" value=""><br>
<label>Favorite  2: </label><input type="text" name="myFav2" value=""><br>
<label>Favorite  3: </label><input type="text" name="myFav3" value=""><br>
<label>Favorite  4: </label><input type="text" name="myFav4" value=""><br>
</div>

<h4>Your Favorite Statements</h4>
<div class="favDiv2">
    <label>Favorite 1: </label><input type="text" name="myFav5" value=""><br>
    <label>Favorite 2: </label><input type="text" name="myFav6" value=""><br>
    <label>Favorite 3: </label><input type="text" name="myFav7" value=""><br>
    <label>Favorite 4: </label><input type="text" name="myFav8" value="">    <br>
</div>

<label id="savedFav"></label>

<div id="status"></div>
<button id="save">Save</button>

<script src="options.js"></script>
</body>

options.js

 // Saves options to chrome.storage

//on dom load run function to restore options
document.addEventListener('DOMContentLoaded', restore_options);
 //on save button click, save new options values
 document.getElementById('save').addEventListener('click', save_options);


//option input text boxes = to a var
var Fav1 = document.getElementByName('myFav1').value;
var Fav2 = document.getElementByName('myFav2').value;
var Fav3 = document.getElementByName('myFav3').value;
var Fav4 = document.getElementByName('myFav4').value;

var Fav5 = document.getElementByName('myFav5').value;
var Fav6 = document.getElementByName('myFav6').value;
var Fav7 = document.getElementByName('myFav7').value;
    var Fav8 = document.getElementByName('myFav8').value;

//runs the save function to store in storage
function save_options() {

chrome.storage.sync.set({
        storedMyFav1: Fav1,
        storedMyFav2: Fav2,
        storedMyFav3: Fav3,
        storedMyFav4: Fav4,
        storedMyFav5: Fav5,
        storedMyFav6: Fav6,
        storedMyFav7: Fav7,
        storedMyFav8: Fav8
    },

    function() {
    // Update status to let user know options were saved.
    var status = document.getElementById('status');
    status.textContent = 'Options saved.';
    setTimeout(function() {
        status.textContent = '';
    }, 750);

});
}

// Restores values stored in chrome.storage.
function restore_options() {

chrome.storage.sync.get(
    ["storedMyFav1", "storedMyFav2", "storedMyFav3", "storedMyFav4", "storedMyFav5", "storedMyFav6", "storedMyFav7", "storedMyFav8"],
    function(items) {
        Fav1 = items.storedMyFav1;
        Fav2 = items.storedMyFav2;
        Fav3 = items.storedMyFav3;
        Fav4 = items.storedMyFav4;

        Fav5 = items.storedMyFav5;
        Fav6 = items.storedMyFav6;
        Fav7 = items.storedMyFav7;
        Fav8 = items.storedMyFav8;
  });

}

Answer 1

您的问题基本上归结为尝试将引用保存到值。简化：

var Fav1 = document.getElementByName('myFav1').value;

function load() {
  chrome.storage.sync.get("storedMyFav1", function(val) {
    Fav1 = val;
  });
}

function save() {
  chrome.storage.sync.set({storedMyFav1: Fav1});
}

第一个语句实际上只是复制 document.getElementByName('myFav1').value的值，因为它是原始值。当您下次设置或阅读Fav1时，它与该元素无关。

JS没有一种机制来存储对原始值的引用。您可以保存非原语：节点本身，然后在使用时附加.value：

var Fav1 = document.getElementByName('myFav1');

function load() {
  chrome.storage.sync.get("storedMyFav1", function(val) {
    Fav1.value = val;
  });
}

function save() {
  chrome.storage.sync.set({storedMyFav1: Fav1.value});
}

将此修复程序应用于实际代码留给读者练习。

Chrome插件 - 包含存储同步的选项页面

1 个答案: