Question

对于一个简单的Chrome扩展程序，我发现并替换了一个文本字符串，我尝试添加一个选项，以便在替换后的文本后添加星号。我有一个bloolean变量showAsterisk，它在options.html对话框的options.js中设置。我可以从控制台看到正确设置了值，但是没有使用chrome.storage.sync.get检索它。不确定我做错了什么。以下是相关代码：

的manifest.json

"permissions": ["storage"],
"options_ui": {
    "page": "options.html",
    "chrome_style": true
    },

options.html

<h1>Options</h1>
<p><input type="checkbox" id="showAsterisk"> Add an asterisk after each instance of replaced text.</p>
<button id="save">Save</button>
<script src="options.js"></script>

options.js

function save_options() {
  var showAsterisk = document.getElementById('showAsterisk').checked;
  chrome.storage.sync.set({ showAsterisk: showAsterisk }, function() {
    window.close();
  });
}

function restore_options() {
  chrome.storage.sync.get({ showAsterisk: false }, function(items) {
    document.getElementById('showAsterisk').checked = items.showAsterisk;
  });
}

document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click', save_options);

content.js

var elements = document.getElementsByTagName("*");

var showAsterisk = false;

chrome.storage.sync.get("showAsterisk", function(items) {
    if(typeof items.showAsterisk !== "undefined") showAsterisk = items.showAsterisk;
})

for (var i = 0; i < elements.length; i++) {
    var element = elements[i];

    for (var j = 0; j < element.childNodes.length; j++) {
        var node = element.childNodes[j];

        if (node.nodeType === 3) {
            var text = node.nodeValue;

            if (showAsterisk === true) {
              var replacedText = text.replace(/Moda Center/gi, "Rose Garden*");
            }

            if (showAsterisk === false) {
              var replacedText = text.replace(/Moda Center/gi, "Rose Garden");
            }

            if (replacedText !== text) {
                element.replaceChild(document.createTextNode(replacedText), node);
            }
        }
    }
}

Answer 1

我对扩展正常工作没有任何问题。

在开发人员工具中，您要确保打开选项页面运行的框架，否则在调试和测试时，您将询问扩展程序网页，而不是选项页面。

当我点击“保存”时，运行以下内容会给我false，并在选项中取消选中该框：

chrome.storage.sync.get({'showAsterisk' : '0'}, function(items){console.log(items.showAsterisk)});

当我再次运行时，但是经过检查，我得到了真的。

似乎正在按预期获取数据，就在您使用开发人员工具进行测试时，您可能处于错误的框架中。即使在google搜索结果等随机页面上运行此功能，我也可以获取数据。但是，如果我不切换控制台显示的帧，我将收到错误。请参阅下面的图片我正在谈论的内容：

你想要这个：

不是此默认框架：

修改

参考为什么你没有看到星号。我相信这是因为你的扩展实际上没有注入任何页面。在网页上我无法在列表中看到它。但是，我将清单中的权限行更改为以下内容：

"permissions": ["storage","http://*/*","https://*/*"],

现在它加载在网页上：

无法从chrome.storage.sync.get

1 个答案: