Question

我正在研究小型Chrome扩展程序。在这里，我想要跟随：

1）当用户点击我的分机时，当前标签页将保存到浏览器的本地存储。我使用以下代码执行此操作：

   **popup.html**
   <body>
   <input type="url" id="urlfield" value="">
   <button class="submit">Save</button>
   <script src="popup.js"></script>
   </body>

   **popup.js**
   var storage = chrome.storage.local;
   chrome.tabs.query({'active': true}, function (tabs) {
   var url = tabs[0].url;
   document.getElementById('urlfield').value = res;  
  });

  var submitButton = document.querySelector('button.submit');
  submitButton.addEventListener('click', saveChanges);

  function saveChanges() {
    var result=document.getElementById('urlfield').value ;
    if (!result) {
    message('No Url specified');
    return;
  }

  // Save it using the Chrome extension storage API.
  storage.set({'urlname': result}, function(all) {
  // Notify that we saved.
  //alert(result);
  });

这很好。

2）现在我尝试将选项页面上存储在本地存储中的所有网址显示为iframe。我使用以下代码执行此操作：

**options.html**
<body>
<iframe id="link" src=""></iframe>
<script type="text/javascript" src="options.js"></script>
</body>

**options.js**
var storage = chrome.storage.local;
loadChanges();

function loadChanges() {
storage.get(null, function(items) {
document.getElementById('link').src =items.urlname;
});
}

从上面只有一个网址显示为iframe。我想显示存储中保存的所有网址。你能否建议我如何从存储中获取所有内容。

Answer 1

使用storage.set({'urlname': result}将result保存在storage.local中的密钥urlname下，然后覆盖存储在同一密钥下的先前值。

如果要保留URL列表，可以将它们保存在数组中：

function saveChanges() {
    ...
    // Save it using the Chrome extension storage API.
    // First fetch the array of saved URLs
    storage.get({ urlList: [] }, function (items) {
        // Push the new URL in it.
        // You should also check that it is not already saved. 
        items.urlList.push(result);


        // Save the array back
        storage.set({ urlList: items.urlList }, function () {
            if (chrome.runtime.lastError) {
                alert('ERROR: ' + chrome.runtime.lastError.message);
            } else {
                alert('Operation completed successfully !');
            }
        });
    });
}

function loadChanges() {
    // Retrieve the whole list
    storage.get({ urlList: [] }, function (items) {
        // Process the URLs one-by-one
        for (var i = 0; i < items.urlList.length; i++) {
            var url = items.urlList[i];
            // Do something with this URL, e.g. create an iframe:
            var iframe = document.createElement('iframe');
            iframe.src = url;
            document.body.appendChild(iframe);
        }
    });
}

如何从chrome存储中获取所有项目

1 个答案: