@hal313/settings-manager-chrome-extension-adapter
Version:
A backing repository for settings-manager, falling on chrome.storage.local (or sync) as an implementation.
98 lines (86 loc) • 4.15 kB
HTML
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<!-- Set the viewport for mobile -->
<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">
<!-- Custom CSS -->
<style>
.loader {
height: 20px;
}
</style>
<title>SettingsManager Chrome Extension Adapter AMD Example</title>
</head>
<body>
<div class="jumbotron">
<h1 class="display-4">SettingsManagerChromeExtensionAdapter AMD Example</h1>
<p class="lead">Example AMD use of the <a href="https://github.com/hal313/settings-manager-chrome-extension-adapter">SettingsManagerChromeExtensionAdapter</a> library</p>
</div>
<div class="container">
<div>
<div>Load the Chrome Extension Adapter library using <code class="prettyprint lang-js">require</code>:</div>
<pre><code class="prettyprint lang-js">
require(
// The path to the SettingsManager files
[
'../../scripts/SettingsManager.js',
'../../scripts/SettingsManagerChromeExtensionAdapter.js'
],
// A callback which is executed with the SettingsManager instance
function onLoaded(SettingsManager, SettingsManagerChromeExtensionAdapter) {
var settingsManagerChromeExtensionAdapter = new SettingsManagerChromeExtensionAdapter.SettingsManagerChromeExtensionAdapter();
var settingsManager = new SettingsManager.SettingsManager(settingsManagerChromeExtensionAdapter);
/* code here */
}
);
</code></pre>
</div>
<div>
<pre id="js-results-section"></pre>
</div>
<div>
<p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#js-code-container" aria-expanded="false" aria-controls="code-container">
Show Code
</button>
</p>
<div class="collapse" id="js-code-container">
<div class="card card-body">
<div id="js-code" class="lang-js"></div>
</div>
</div>
</div>
</div>
<!-- // Load jQuery -->
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- // Load Bootstrap -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- // Load some code to make the code samples pretty -->
<script src="//cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
<!-- // Load the AMD loader code -->
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>
<!-- // Load the Chrome extension API shim -->
<script src="../chrome-extension-api.js"></script>
<!-- // Load the test code -->
<script src="./amd-test.js" ></script>
<script>
// Load and populate the code when the page loads
$(() => {
fetch('./amd-test.js')
.then(function(response) {
return response.text();
})
.then(function(code) {
// Populate the code
$('#js-code').html(`<pre><code class="prettyprint lang-js">${code}</code></pre>`);
// Format the code
PR.prettyPrint();
});
});
</script>
</body>
</html>