mirror of
https://github.com/mdn/webextensions-examples.git
synced 2026-04-16 06:18:35 +02:00
finishing my update of the quicknote extension, to get it to use the WebExtensions Storage API.
This commit is contained in:
20
quicknote/README.md
Normal file
20
quicknote/README.md
Normal file
@@ -0,0 +1,20 @@
|
||||
# Quicknote
|
||||
A persistent note/to-do list application — click a button in your browser and record notes, which will persist even after browser restarts.
|
||||
|
||||
Works in Firefox 47+, and will also work as a Chrome extension, out of the box.
|
||||
|
||||
## What it does
|
||||
|
||||
This extension includes:
|
||||
|
||||
* A browser action that creates a popup — within the popup is:
|
||||
* Two form elements for entering title and body text for a new note, along with a button to add a note, and a button to clear all notes.
|
||||
* A list of the notes that have been added to the extension — each note includes a delete button to delete just that extension. You can also click on the note title and body to edit them. In edit mode, each note includes:
|
||||
* An update button to submit an update.
|
||||
* A cancel button to cancel the update.
|
||||
|
||||
Quicknote uses the WebExtensions [Storage API](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/storage) to persist the notes.
|
||||
|
||||
## What it shows
|
||||
|
||||
* How to persist data in a WebExtension using the Storage API.
|
||||
@@ -4,24 +4,30 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
font-size: 10px;
|
||||
background: white;
|
||||
background: background: rgb(240,240,240);
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 300px;
|
||||
background: rgb(240,240,240);
|
||||
border: 1px solid #ccc;
|
||||
margin: 0 auto;
|
||||
padding: 2px;
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
.outer-wrapper {
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
background: rgb(240,240,240);
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
|
||||
@@ -20,7 +20,7 @@ initialize();
|
||||
|
||||
function initialize() {
|
||||
chrome.storage.local.get(null,function(results) {
|
||||
var noteKeys = Object.keys(results)
|
||||
var noteKeys = Object.keys(results);
|
||||
for(i = 0; i < noteKeys.length; i++) {
|
||||
var curKey = noteKeys[i];
|
||||
var curValue = results[curKey];
|
||||
@@ -34,15 +34,26 @@ function initialize() {
|
||||
function addNote() {
|
||||
var noteTitle = inputTitle.value;
|
||||
var noteBody = inputBody.value;
|
||||
|
||||
if(!chrome.storage.local.get(noteTitle) && noteTitle !== '' && noteBody !== '') {
|
||||
inputTitle.value = '';
|
||||
inputBody.value = '';
|
||||
displayNote(noteTitle,noteBody);
|
||||
storeNote(noteTitle,noteBody);
|
||||
}
|
||||
chrome.storage.local.get(noteTitle, function(result) {
|
||||
var objTest = Object.keys(result);
|
||||
if(objTest.length < 1 && noteTitle !== '' && noteBody !== '') {
|
||||
inputTitle.value = '';
|
||||
inputBody.value = '';
|
||||
displayNote(noteTitle,noteBody);
|
||||
storeNote(noteTitle,noteBody);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/* function to store a new note in storage */
|
||||
|
||||
function storeNote(title, body) {
|
||||
chrome.storage.local.set({ [title] : body }, function() {
|
||||
});
|
||||
}
|
||||
|
||||
/* function to display a note in the note box */
|
||||
|
||||
function displayNote(title, body) {
|
||||
|
||||
/* create note display box */
|
||||
@@ -133,18 +144,17 @@ function displayNote(title, body) {
|
||||
}
|
||||
|
||||
|
||||
/* functions to update and store notes */
|
||||
|
||||
/* function to update notes */
|
||||
|
||||
function updateNote(delNote,newTitle,newBody) {
|
||||
chrome.storage.local.set({ newTitle : newBody }, function() {
|
||||
chrome.storage.local.remove(delNote);
|
||||
displayNote(newTitle, newBody);
|
||||
});
|
||||
}
|
||||
|
||||
function storeNote(title, body) {
|
||||
chrome.storage.local.set({ title : body }, function() {
|
||||
chrome.storage.local.set({ [newTitle] : newBody }, function() {
|
||||
if(delNote !== newTitle) {
|
||||
chrome.storage.local.remove(delNote, function() {
|
||||
displayNote(newTitle, newBody);
|
||||
});
|
||||
} else {
|
||||
displayNote(newTitle, newBody);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user