将页面保存到 chrome.storage.sync

Question

I'm making a chrome extenstion to save and load an webpage page. (Eg. You want to store a page before it gets changed, or you've modified the page yourself and want to save it).

What I've done right now is I am running code in the activetab to save the innerHTML of the page in localstorage with the key of the page URL.

'use strict';


let saveButton = document.getElementById('saveButton');

saveButton.onclick = function(element) {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  chrome.tabs.executeScript(
      tabs[0].id,
      {code: 'localStorage[window.location.href] = document.documentElement.innerHTML;'});
});
};


let loadButton = document.getElementById('loadButton');

loadButton.onclick = function(element) {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  chrome.tabs.executeScript(
      tabs[0].id,
      {code: 'document.documentElement.innerHTML = localStorage[window.location.href];'});
});
};

This works okay, but I want it to be chrome.storage.sync so that it will be synced to the user's Google Account. (and also this would not interfere with the page if it uses its url as a key)

How can I accomplish this?

I've tried to use chrome.storage.sync.set inside of the tab, but that doesn't work (I'm assuming it has to somehow be done in the popup.js

Thanks.

Answer 1

This isn't an appropriate way to do this. chrome.storage.sync has major restrictions.