@hal313/settings-manager-chrome-extension-adapter
Version:
A backing repository for settings-manager, falling on chrome.storage.local (or sync) as an implementation.
96 lines (83 loc) • 4.63 kB
HTML
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- FontAwesome CDN -->
<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<style>
.external-link-indicator {
font-size: xx-small;
vertical-align: super;
}
.code-sample-container {
margin: 2em 1em;
}
</style>
<title>SettingsManager Chrome Extension Adapter Examples</title>
</head>
<body>
<div class="jumbotron">
<h1 class="display-4">SettingsManager Chrome Extension Adapter Examples</h1>
<p class="lead">Example uses of the <a href="https://github.com/hal313/settings-manager-chrome-extension-adapter" target="github">SettingsManagerChromeExtensionAdapter <i class="fas fa-external-link-alt external-link-indicator"></i></a> library</p>
</div>
<div class="container">
<div>
<ul>
<li><a href="examples/es5/es5-test.html" target="es5">ES5 <i class="fas fa-external-link-alt external-link-indicator"></i></a> - A standard JavaScript example web page</li>
<li><a href="examples/es6/es6-test.html" target="es6">ES6 <i class="fas fa-external-link-alt external-link-indicator"></i></a> - A JavaScript example web page using <a href="https://es6.io/" target="es6-site">ES6 <i class="fas fa-external-link-alt external-link-indicator"></i></a></li>
<li><a href="examples/commonjs/commonjs-test.html" target="commonjs">CommonJS <i class="fas fa-external-link-alt external-link-indicator"></i></a> - Uses a <a href="https://en.wikipedia.org/wiki/CommonJS" target="commonjs-site">CommonJS <i class="fas fa-external-link-alt external-link-indicator"></i></a> loader within a web page</li>
<li><a href="examples/amd/amd-test.html" target="amd">AMD <i class="fas fa-external-link-alt external-link-indicator"></i></a> - <a href="https://en.wikipedia.org/wiki/Asynchronous_module_definition" target="amd-site">AMD <i class="fas fa-external-link-alt external-link-indicator"></i></a> loader in a web page</li>
</ul>
</div>
<div class="card code-sample-container">
<div class="card-header">Sample JavaScript Code</div>
<div class="card-body">
<pre><code class="prettyprint lang-js">
// Start with a load
//
// Create a 'settingsManager' instance with the Chrome Extension Adapter
var useSync = true; // Use the sync storage, to persist settings across browser instances
var settingsManager = new SettingsManager(new SettingsManagerChromeExtensionAdapter(useSync));
//
settingsManager.load(function onLoad(settings) {
// Handle the load response and start a save
onSettingsLoaded(settings);
settingsManager.save({one: 1, two: 'two'}, function onSave() {
// Handle the save response and start another load
onSettingsSaved();
settingsManager.load(function onLoad(settings) {
// Handle the load response and start another save
onSettingsLoaded(settings);
settingsManager.save({three: 3, two: 2}, function onSave() {
// Handle the save response and start another load
onSettingsSaved();
settingsManager.load(function onLoad(settings) {
// Handle the load response
onSettingsLoaded(settings);
}, onError);
}, onError);
}, onError);
}, onError);
}, onError);
// Handlers
function onSettingsLoaded(settings) {
console.log('loaded', settings);
}
function onSettingsSaved() {
console.log('settings saved');
}
function onError(error) {
console.log('error:', error);
}
</code></pre>
</div>
</div>
</div>
<!-- // Load some code to make the code samples pretty -->
<script src="//cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
</body>
</html>