Единое локальное хранилище данных в автономном режиме как для веб-сайта, так и для расширения в Chrome?

Задний план

Привет, в настоящее время я разрабатываю веб-сайт и расширение в Chrome.

В настоящее время каждый из них локально поддерживает массив объектов в автономном режиме. Веб-сайт использует localStorage, а расширение использует chrome.storage.

Проблема

Теперь я хочу синхронизировать между двумя массивами. Он выходит с некоторыми решениями:

1) Создайте конечную точку на сервере для получения/отправки массива

2) Напишите код для синхронизации между двумя массивами, т.е. каждый раз, когда мы меняем 1 массив, мы заносим изменения в другой массив и наоборот.

3) Храните только один экземпляр этого массива локально, в автономном режиме.

=> Я пытаюсь реализовать это решение.

Я наткнулся на это и это. Но это решение для передачи сообщений не то, что я ищу.

Вопрос

Итак, есть ли способ сохранить объект в автономном режиме, локально, который может использоваться как веб-сайтом, так и расширением в Chrome?

Обновлять

  • Проблема при использовании скрипта содержимого с локальным хранилищем:

    • if my site is abc.com. When user visit other site def.com, use the extension and modify the array, the array will be stored in the local storage of def.com.
    • Теперь, если пользователь вернется на мой сайт abc.com, я не смогу получить последний массив, так как он хранится в локальном хранилище def.com.

  • Текущий вариант использования:

    • I need to store user history search when user search on my website, and also history search when user search on the extension in Chrome
    • Теперь массив поиска по истории 2 должен быть синхронизирован между веб-сайтом и расширением, что означает, что всякий раз, когда пользователь выполняет поиск по расширению при просмотре другого сайта def.com, xyz.com, а затем возвращается на мой сайт abc.com, пользователь видит историю поиска, которую он выполнил на расширение и наоборот.

javascript arrays google-chrome google-chrome-extension local-storage
person super1ha1    schedule 29.09.2016    source источник
comment
Сценарий содержимого может получить доступ к локальному хранилищу сайта, открытого в браузере. Однако я думаю, что лучше добавить API на сайт, чтобы получить к нему доступ, не открывая вкладку со страницей сайта.   -  person wOxxOm    schedule 29.09.2016
comment
Будет ли сайт использовать сервис-воркеров?   -  person Xan    schedule 29.09.2016
comment
Кстати, зачем вообще нужно расширение?   -  person Xan    schedule 29.09.2016
comment
@wOxxOm: я обновил вариант использования и проблему с локальным хранилищем, у вас есть идеи по этому поводу?   -  person super1ha1    schedule 30.09.2016
comment
@Xan В настоящее время веб-сайт не использует сервисного работника, но если это решит проблему, мы могли бы рассмотреть его.   -  person super1ha1    schedule 30.09.2016
comment
Нет, это может создать больше проблем во взаимодействии. Так зачем вам расширение?   -  person Xan    schedule 30.09.2016
comment
@Xan: в настоящее время у нашего бизнеса есть и веб-сайт, и расширение, теперь задача состоит в том, чтобы синхронизировать поиск по истории 2. Вы можете обратиться к части вопросов, касающейся текущего варианта использования.   -  person super1ha1    schedule 30.09.2016

Ответы (1)


arrow_upward
0
arrow_downward

Ну, я думаю, что нашел свое решение следующим образом. Использование библиотеки кросс-хранилища

Он состоит из хаба и множества клиентов:

  • Hub: служит сервером, фактически взаимодействует с localStorage API

  • клиенты: создайте iframe для загрузки файла в концентратор и отправьте сообщение для доступа к данным в концентраторе (получить, установить, удалить)

Образец кода:

Hub

// Config s.t. subdomains can get, but only the root domain can set and del
CrossStorageHub.init([
  {origin: /\.example.com$/,            allow: ['get']},
  {origin: /:\/\/(www\.)?example.com$/, allow: ['get', 'set', 'del']}
]);

Обратите внимание на $ для соответствия концу строки. Регулярные выражения в приведенном выше примере будут соответствовать источникам, таким как valid.example.com, но не valid.example.com.malicious.com.

Client

var storage = new CrossStorageClient('https://store.example.com/hub.html');

storage.onConnect().then(function() {
  return storage.set('newKey', 'foobar');
}).then(function() {
  return storage.get('existingKey', 'newKey');
}).then(function(res) {
  console.log(res.length); // 2
}).catch(function(err) {
  // Handle error
});
person super1ha1    schedule 30.09.2016
comment
как реализовать это в расширении? - person bhavin jalodara; 13.06.2018