nntrn
4/22/2019 - 1:28 AM
[storage api] /examples/api/storage/stylizr
[storage api] /examples/api/storage/stylizr
{
"name": "Stylizr",
"description": "Spruce up your pages with custom CSS.",
"version": "1.0",
"permissions": [
"activeTab",
"storage"
],
"options_page": "options.html",
"browser_action": {
"default_icon": "icon.png",
"default_title": "Stylize!",
"default_popup": "popup.html"
},
"manifest_version": 2<!doctype html>
<html>
<head>
<title>Stylizr</title>
<style>
body {
font-family: sans-serif;
}
label {
display: block;
}
textarea {
font-family: monospace;
}
.message {
height: 20px;
background: #eee;
padding: 5px;
}
</style>
</head>
<body>
<div class="message"></div>
<h3>Stylizr Instructions</h3>
<ol>
<li>Write CSS in this textarea and save</li>
<li>Navigate to some page</li>
<li>Click the browser action icon <img src="icon.png" /></li>
<li>Hey presto! CSS is injected!</li>
</ol>
<textarea name="style_url" id="style_url" cols=80 rows=24
placeholder="eg: * { font-size: 110%; }"></textarea>
<br/>
<button class="submit">Save</button>
<button class="reset">Reset</button>
<script src="options.js"></script>
</body>
</html>
// Copyright (c) 2012 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
// Store CSS data in the "local" storage area.
//
// Usually we try to store settings in the "sync" area since a lot of the time
// it will be a better user experience for settings to automatically sync
// between browsers.
//
// However, "sync" is expensive with a strict quota (both in storage space and
// bandwidth) so data that may be as large and updated as frequently as the CSS
// may not be suitable.
var storage = chrome.storage.local;
// Get at the DOM controls used in the sample.
var resetButton = document.querySelector('button.reset');
var submitButton = document.querySelector('button.submit');
var textarea = document.querySelector('textarea');
// Load any CSS that may have previously been saved.
loadChanges();
submitButton.addEventListener('click', saveChanges);
resetButton.addEventListener('click', reset);
function saveChanges() {
// Get the current CSS snippet from the form.
var cssCode = textarea.value;
// Check that there's some code there.
if (!cssCode) {
message('Error: No CSS specified');
return;
}
// Save it using the Chrome extension storage API.
storage.set({'css': cssCode}, function() {
// Notify that we saved.
message('Settings saved');
});
}
function loadChanges() {
storage.get('css', function(items) {
// To avoid checking items.css we could specify storage.get({css: ''}) to
// return a default value of '' if there is no css value yet.
if (items.css) {
textarea.value = items.css;
message('Loaded saved CSS.');
}
});
}
function reset() {
// Remove the saved value from storage. storage.clear would achieve the same
// thing.
storage.remove('css', function(items) {
message('Reset stored CSS');
});
// Refresh the text area.
textarea.value = '';
}
function message(msg) {
var message = document.querySelector('.message');
message.innerText = msg;
setTimeout(function() {
message.innerText = '';
}, 3000);
}// Copyright (c) 2012 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
// Store CSS data in the "local" storage area.
//
// See note in options.js for rationale on why not to use "sync".
var storage = chrome.storage.local;
var message = document.querySelector('#message');
// Check if there is CSS specified.
storage.get('css', function(items) {
console.log(items);
// If there is CSS specified, inject it into the page.
if (items.css) {
chrome.tabs.insertCSS({code: items.css}, function() {
if (chrome.runtime.lastError) {
message.innerText = 'Not allowed to inject CSS into special page.';
} else {
message.innerText = 'Injected style!';
}
});
} else {
var optionsUrl = chrome.extension.getURL('options.html');
message.innerHTML = 'Set a style in the <a target="_blank" href="' +
optionsUrl + '">options page</a> first.';
}
});