How to use webext-options-sync - 10 common examples

async function init() {
	[options] = await Promise.all([
		new OptSync().getAll(),
		elementReady('.ajax-pagination-form')
	]);

	apply($('.account-switcher + *') || $('.news.column > :first-child'));

	const pages = [];

	// Prefetch all pages in parallel
	for (let i = 0; i < options.preloadPagesCount; i++) {
		pages.push(requestPage(i + 2));
	}

	// Append pages in series
	// uses the same method used by GitHub
	for (const page of pages) {
		// eslint-disable-next-line no-await-in-loop

// TypeScript doesn't merge the definitions so `...` is not equivalent.
// eslint-disable-next-line prefer-object-spread
const defaults = Object.assign({
	customCSS: '',
	personalToken: '',
	logging: false,
	minimizedUsers: ''
}, __featuresOptionDefaults__); // This variable is replaced at build time

const migrations = [
	featureWasRenamed('filter-pr-by-build-status', 'pr-filters'), // Merged on November 1st
	featureWasRenamed('linkify-branch-refs', 'linkify-branch-references'), // Merged on November 10th
	featureWasRenamed('prev-next-commit-buttons', 'previous-next-commit-buttons'), // Merged on November 10th

	// Removed features will be automatically removed from the options as well
	OptionsSync.migrations.removeUnused
];

// Keep this function "dumb". Don't move more "smart" domain selection logic in here
function getStorageName(host: string): string {
	if (/(^|\.)github\.com$/.test(host)) {
		return 'options';
	}

	return `options-${host}`;
}

function getOptions(host: string): OptionsSync {
	return new OptionsSync({storageName: getStorageName(host), migrations, defaults});
}

// This should return the options for the current domain or, if called from an extension page, for `github.com`

export const getOptions = new Promise(async resolve => {
	// Options defaults
	const options = {
		...defaultConfigs,
		...await new OptionsSync().getAll()
	};

	if (options.customCSS.trim().length > 0) {
		const style = document.createElement('style');
		style.innerHTML = options.customCSS;
		document.head.append(style);
	}

	// Create logging function
	if (options.logging) {
		options.log = (method, ...content) => {
			console[method](...content);
		};
	} else {
		options.log = () => {};
	}

// I guess
        // TODO not sure why that in background was necessary..  none repeat scroll 0% 0%;
        // TODO add some docs on configuring it...
        extra_css   : `
.src {
    font-weight: bold;
}
/* you can use devtools to find out which CSS classes you can tweak */
`.trim(),
    };
}


// TODO mm. don't really like having global object, but seems that it's easiest way to avoid race conditions
// TODO https://github.com/fregante/webext-options-sync/issues/38 -- fixed now
const _options = new OptionsSync({
    defaults: defaultOptions(),
});


function optSync() {
    return _options;
}

export async function getOptions(): Promise {
    return await optSync().getAll();
}

// TODO legacy; remove
export async function get_options_async() {
    return await getOptions();
}

import OptionsSync from 'webext-options-sync';

import {featuresDefaultValues} from './features';

const optionsSync = new OptionsSync();

// Define defaults
optionsSync.define({
	defaults: Object.assign({}, featuresDefaultValues, {
		logging: false
	}),
	migrations: [
		OptionsSync.migrations.removeUnused
	]
});

// Make sure that all features have an option value
optionsSync.getAll().then(options => {
	const newOptions = Object.assign({}, featuresDefaultValues, options);
	optionsSync.setAll(newOptions);
});

// Fix the extension when right-click saving a tweet image
browser.downloads.onDeterminingFilename.addListener((item, suggest) => {
	suggest({
		filename: item.filename.replace(/\.(jpg|png)_(large|orig)$/, '.$1')
	});
});

},
	migrations: [
		options => {
			options.disabledFeatures = options.disabledFeatures.replace('toggle-all-things-with-alt', ''); // #1524
			options.disabledFeatures = options.disabledFeatures.replace('remove-diff-signs', ''); // #1524
			options.disabledFeatures = options.disabledFeatures.replace('add-confirmation-to-comment-cancellation', ''); // #1524
			options.disabledFeatures = options.disabledFeatures.replace('add-your-repositories-link-to-profile-dropdown', ''); // #1460
			options.disabledFeatures = options.disabledFeatures.replace('add-readme-buttons', 'hide-readme-header'); // #1465
			options.disabledFeatures = options.disabledFeatures.replace('add-delete-to-pr-files', ''); // #1462
			options.disabledFeatures = options.disabledFeatures.replace('auto-load-more-news', 'infinite-scroll'); // #1516
			options.disabledFeatures = options.disabledFeatures.replace('display-issue-suggestions', ''); // #1611
			options.disabledFeatures = options.disabledFeatures.replace('open-all-selected', 'batch-open-issues'); // #1402
			options.disabledFeatures = options.disabledFeatures.replace('copy-file-path', ''); // #1628
			options.disabledFeatures = options.disabledFeatures.replace('hide-issue-list-autocomplete', ''); // #1657
		},
		OptionsSync.migrations.removeUnused
	]
});

browser.runtime.onMessage.addListener(async message => {
	if (!message || message.action !== 'openAllInTabs') {
		return;
	}
	const [currentTab] = await browser.tabs.query({currentWindow: true, active: true});
	for (const [i, url] of message.urls.entries()) {
		browser.tabs.create({
			url,
			index: currentTab.index + i + 1,
			active: false
		});
	}
});

import {h} from 'dom-chef';
import select from 'select-dom';
import elementReady from 'element-ready';
import domLoaded from 'dom-loaded';
import OptionsSync from 'webext-options-sync';

let options;
const optionsPromise = new OptionsSync().getAll();

/**
 * Enable toggling each feature via options.
 * Prevent fn's errors from blocking the remaining tasks.
 * https://github.com/sindresorhus/refined-github/issues/678
 */
export const enableFeature = async ({fn, id: _featureId = fn.name}) => {
	if (!options) {
		options = await optionsPromise;
	}

	const {logging = false} = options;
	const log = logging ? console.log : () => {};

	const featureId = _featureId.replace(/_/g, '-');
	if (/^$|^anonymous$/.test(featureId)) {

import setLineLengthLimit from './limit-line-length'

import observeForWordDiffs from './observe-for-word-diffs'

import {
    isPullRequest,
    isCreatePullRequestURL,
    isPullRequestList,
    isCommit,
    isBranch,
    isComparePage,
} from './page-detect'

import addStyleToPage from './add-style'

new OptionsSync().getAll().then(options => {
    const config = {
        ...options,
        autocollapsePaths: (options.autocollapsePaths || '').split('\n'),
        ignorePaths: (options.ignorePaths || '').split('\n'),
    }

    init(config)
})

function init(config) {
    if (config.autolinker) {
        require('./vendor/prism-autolinker.min')
    }

    if (isBranch()) {
        codeReviewFeatures(config)

const indentWidthInput = document.querySelector('input[name="commentsIndentWidth"]');
indentWidthInput.addEventListener('input', () => {
	for (const tab of activeItemTabs) {
		browser.tabs.sendMessage(tab.id, {
			indentWidth: indentWidthInput.value
		});
	}
});

const links = document.querySelectorAll('a');
for (const link of links) {
	link.addEventListener('click', () => browser.tabs.create({url: link.href}));
}

new OptionsSync({logging: false}).syncForm('#options-form');

import OptSync from 'webext-options-sync';

new OptSync().define({
	defaults: {
		starredRepos: 'group',
		forkedRepos: 'group',
		newRepos: 'group',
		comments: 'group',
		newIssues: 'group',
		collaborators: 'hide',
		branches: 'hide',
		tags: 'hide',
		commits: 'hide',
		closedIssues: 'hide',
		preloadPagesCount: 0
	},
	migrations: [
		savedOptions => {
			if (savedOptions.hideCollaborators) {