extension: Add per-site configuration settings

[anthony-hyo]

Frontend / UI

• Global settings section
• Advanced settings section
• Per-site rules modal with toggles
• Review inputs & numbers & selects
• Move inline JS (modal open/close & toggles) to options.js

Backend / Storage

• Load per-site rules from storage (using utils.storage)
• Save new/edited rules to storage
• Apply per-site overrides when the player runs
• Remove or edit site rules dynamically

Other

• Validation for input fields (domains, numbers, colors)
• Integration with actual player settings

Preview

Preview 1	Preview 2

[danielhjacobs]

I know it can be a little unclear, so in case you haven't pieced together the JS logic yet, working in reverse order, the final step for creating the config is here:

ruffle/web/packages/extension/src/ruffle.ts

Lines 24 to 34 in 6e6cda0

	if (window.RufflePlayer === undefined) {
	window.RufflePlayer = {};
	}
	if (window.RufflePlayer.config === undefined) {
	window.RufflePlayer.config = {};
	}
	window.RufflePlayer.config = {
	...message.config,
	...window.RufflePlayer.config,
	openInNewTab,
	};

Before that, message.config is sent here:

ruffle/web/packages/extension/src/content.ts

Lines 191 to 200 in 6e6cda0

	await sendMessageToPage({
	type: "load",
	config: {
	...explicitOptions,
	autoplay: options.autostart ? "on" : "auto",
	unmuteOverlay: options.autostart ? "hidden" : "visible",
	splashScreen: !options.autostart,
	},
	publicPath: utils.runtime.getURL("/dist/"),
	});

Explicit options uses this function:

ruffle/web/packages/extension/src/utils.ts

Lines 91 to 103 in 6e6cda0

	* In the future we should just not store options we don't want to set.
	*/
	export async function getExplicitOptions(): Promise<Options> {
	const options = await getOptions();
	const defaultOptions = DEFAULT_OPTIONS;
	for (const key in defaultOptions) {
	// @ts-expect-error: Element implicitly has an any type
	if (key in options && defaultOptions[key] === options[key]) {
	// @ts-expect-error: Element implicitly has an any type
	// eslint-disable-next-line @typescript-eslint/no-dynamic-delete
	delete options[key];
	}
	}

And getOptions is here:

ruffle/web/packages/extension/src/utils.ts

Lines 81 to 86 in 6e6cda0

	export async function getOptions(): Promise<Options> {
	const options = await storage.sync.get();
	// Copy over default options if they don't exist yet.
	return { ...DEFAULT_OPTIONS, ...options };
	}

The options are instantly set on change here:

ruffle/web/packages/extension/src/common.ts

Lines 172 to 176 in f46c744

	element.input.addEventListener("change", () => {
	const value = element.value;
	options[key] = value as never;
	utils.storage.sync.set({ [key]: value });
	});

[anthony-hyo]

Some visual updates.