Question

所以我试图制作一个chrome扩展来存储像“Name”这样的东西并将它们列为按钮，这样我就可以将当前页面分享给列表中的任何人。现在，我正在尝试从chrome.storage（云）写/读，但我的JS并没有真正做任何事情！代码似乎很好，它只是没有做任何事情！

window.load = myJs;

function myJs() {

    document.addEventListener('DOMContentLoaded', function () {
        var link = document.getElementById('get');
        link.addEventListener('click', function () {
            function getValues() {
                chrome.storage.local.get('Name', function (result) {
                    Name = result;
                    alert(result);
                });
            }
        });
    });
    document.addEventListener('DOMContentLoaded', function () {
        var link = document.getElementById('savechanges');
        link.addEventListener('click', function () {
            function saveChanges() {
                var newname = getElementById("newname");
                var newemail = getElementById("newmail");
                if (!newname) {
                    message('Error: No name specified');
                    return;
                }
                if (!newemail) {
                    message('Error: No E-mail specified');
                    return;
                }
                chrome.storage.sync.set({
                    'Name': newname
                }, {
                    'Email': newemail
                }, function () {
                    message('New contact added');
                    window.location.href = "popup.html";
                });
            }
        });
    });
}

所以我的扩展程序有2个页面，一个用于添加有2个输入的新人，另一个用于绘制值（至少现在，我计划在找到后立即将它们列为按钮）

以下是

的html

page.html

 <body>
   <input type="text" id="newname" placeholder="Enter new contact name">
    <input type="text" id="newemail" placeholder="Enter new contact email">
    <button name="Add" id="savechanges" class="m-btn">Add new contact</button>
    <script src="popup.js"></script>
  </body>

popup.html

 <body>
   <button type="button" id="get" class="m-btn">Get</button>
    <script src="popup.js"></script>
    <a href="page.html"><input type="submit" name="add" value="Add" class="m-btn"></a>
  </body>

Answer 1

首先，您的事件侦听器声明了两个从不调用的本地函数getValues和saveChanges。你可以删除这些外部函数声明，并让这两个函数的主体成为事件处理程序的主体，如下所示：

document.addEventListener('DOMContentLoaded', function () {
  var link = document.getElementById('get');
  link.addEventListener('click', function () {
    chrome.storage.local.get('Name', function (result) {
      // Check chrome.runtime.lastError to see if there was an error
      Name = result;
      alert(result);
    });
  });
});

您应该能够在Chrome的开发者工具的“源”标签中检查弹出/背景页面以调试脚本。我会在这些事件处理程序中设置一些断点，并确保它们被正确击中。

对于两个，StorageArea.set(object items, function callback)是set方法的签名。要设置两个值，您需要传递单个对象而不是两个不同的对象：

chrome.storage.sync.set({
    'Name': newname,
    'Email': newemail
  }, function() {
    // Check chrome.runtime.lastError to see if there was an error
    ...
  });

最后，没有真正的理由使用window.onload（我认为你的意思是在这里使用window.onload，对吧？）或两个不同的DOMContentLoaded听众;为什么不将它们合并为一个（不要忘记检查getElementById返回null，因为看起来你在两个页面之间共享这个脚本）？

编辑：另外，您似乎分别为您的set / get混合同步/本地存储。

chrome.storage保存值

1 个答案: