Limits of the suggested setup about webext-options-sync HOT 4 CLOSED

The issue is that to enable this, the definition needs to happen in the content script

Why does it have to happen in the content script?

from webext-options-sync.

Why does it have to happen in the content script?

If the defaults are defined in the background script, we'd have to set up messaging. Also all set calls would also have to be sent to the background script to see if they need to be filtered.

A simpler solution: we put the defaults in the storage itself, so they can will be accessible anytime anywhere — but then we need another solution for filters.

Note: I described the wrong type of filter earlier, they should be pre-save filters, not pre-get.

However pre-get filters would be easier to implement since the filters can just live in the content, not necessarily in the original define call:

/* background.js */
new OptionsSync().define({
  defaults: {
    name: "User"
  }
});

/* content.js */
const options = new OptionsSync().define({
  filters: {
    name: name => name.trim()
  }
});

options.getAll().__defaults__ === {name: "User"}; // Stored at define() time

options.getAll().name === 'filtered User'; // Filtered at getAll() time

from webext-options-sync.

How about this: instead of calling new OptionsSync() in every file (definition in background, usage in content, change in options), the user should have a single options-storage file that gets included everywhere.

Example:

// options-storage.js
export default new OptionsSync({
  defaults: {
    name: "User"
  },
  filters: {
    name: name => `Hello, ${name}`
  }
});

// content or background
import options from './options-storage';

await options.getAll();

// options.html
import options from "./options-storage";

options.syncForm("#options-form");

Or without webpack:

	"background": {
		"scripts": [
			"webext-options-sync.js",
			"options-storage.js",
			"background.js"
		],
		"persistent": false
	},
	"content_scripts": [
		{
			"matches": [
				"https://github.com/*",
			],
			"js": [
				"webext-options-sync.js",
				"options-storage.js",
				"content.js"
			]
		}

I think this is the right way, I just need to find a reliable background.js detection so migrations are only run there.

This also helps TypeScript definitions because the type of defaults gets automatically passed as .getAll's ReturnType

from webext-options-sync.

I think that's a good solution. It's how I recommend using electron-store too, so people get the same in the main and renderer process for Electron.

from webext-options-sync.