felixfoertsch/webextensions-examples
1
0
Fork 0
mirror of https://github.com/mdn/webextensions-examples.git synced 2026-04-16 22:38:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

adding my suggestion for the i18n example, and the beginnings of a WebExtension storage example

Browse Source
This commit is contained in:
chrisdavidmills
2016-04-07 13:08:14 +01:00
parent 4c567ae945
commit e03ef78697
12 changed files with 233 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

2
notify-link-clicks-i18n/background-script.js
View File

@@ -9,7 +9,7 @@ function notify(message) {
var content = chrome.i18n.getMessage("notificationContent", message.url);
chrome.notifications.create({
"type": "basic",
"iconUrl": chrome.extension.getURL("icons/link-48.png"),
"iconUrl": chrome.extension.getURL("icons/__MSG_@@ui_locale__/link-48-__MSG_@@ui_locale__.png"),
"title": title,
"message": content
});

BIN
notify-link-clicks-i18n/icons/de/link-48-de.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 704 B

BIN
notify-link-clicks-i18n/icons/en/link-48-en.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
notify-link-clicks-i18n/icons/ja/link-48-ja.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 621 B

BIN
notify-link-clicks-i18n/icons/nl/link-48-nl.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 605 B

BIN
quicknote/icons/quicknote-32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 413 B

BIN
quicknote/icons/quicknote-48.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 795 B

24
quicknote/manifest.json Normal file
View File

@@ -0,0 +1,24 @@
{
"description": "Allows the user to make quick notes by clicking a button and entering text into the resulting popup. The notes are saved in storage and synced across the user's sync login, even across different devices. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#quicknote",
"manifest_version": 1,
"name": "Quicknote",
"version": "1.0",
"homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/quicknote",
"icons": {
"48": "icons/quicknote-48.png"
},
"applications": {
"gecko": {
"id": "quicknote@mozilla.org",
"strict_min_version": "45.0.0"
}
},
"browser_action": {
"default_icon": "icons/quicknote-32.png",
"default_title": "Quicknote",
"default_popup": "popup/quicknote.html"
},
}

109
quicknote/popup/quicknote.css Normal file
View File

@@ -0,0 +1,109 @@
/* General styling */
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
font-size: 10px;
background: white;
}
body {
width: 300px;
background: rgb(240,240,240);
border: 1px solid #ccc;
margin: 0 auto;
padding: 2px;
}
.outer-wrapper {
overflow: auto;
width: 100%;
height: 300px;
}
.clearfix {
clear: both;
}
/* form control styling */
input, textarea, button {
border: 1px solid rgb(218,218,218);
padding: 4px;
background: white;
border-radius: 3px;
}
button {
background: #ccc;
box-shadow: inset -2px -2px 1px rgba(0,0,0,0.2);
transition: 0.1s all;
}
button:hover, button:focus {
background: #ddd;
}
button:active {
box-shadow: inset -2px -2px 1px rgba(0,0,0,0.05);
}
input, textarea {
font-family: sans-serif;
box-shadow: inset 2px 2px 1px rgba(0,0,0,0.10);
}
/* Typography */
h2 {
font-size: 1.3rem;
}
p, input, textarea {
font-size: 1.2rem;
line-height: 1.5;
}
/* New notes entry box */
.new-note {
width: 100%;
margin-bottom: 5px;
padding: 2px;
}
.new-note input {
width: 100%;
margin-bottom: 2px;
}
.new-note textarea {
width: 100%;
margin-bottom: 4px;
resize: none;
}
.clear {
float: left;
}
.add {
float: right;
}
/* Notes display box(es) */
.note {
padding: 2px;
}
.delete {
float: right;
}
p {
margin: 0;
}

27
quicknote/popup/quicknote.html Normal file
View File

@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="quicknote.css"/>
</head>
<body>
<div class="outer-wrapper">
<div class="new-note">
<input type="text">
<textarea></textarea>
<button class="clear">Clear notes</button>
<button class="add">Add note</button>
<div class="clearfix"></div>
</div>
<div class="note-container">
</div>
</div>
<script src="quicknote.js"></script>
</body>
</html>

72
quicknote/popup/quicknote.js Normal file
View File

@@ -0,0 +1,72 @@
var inputTitle = document.querySelector('.new-note input');
var inputBody = document.querySelector('.new-note textarea');
var noteContainer = document.querySelector('.note-container');
var clearBtn = document.querySelector('.clear');
var addBtn = document.querySelector('.add');
addBtn.addEventListener('click', addNote);
clearBtn.addEventListener('click', clearAll);
initialize();
function initialize() {
var length = localStorage.length;
for(i = 0; i < length; i++) {
var item = localStorage.getItem(localStorage.key(i));
displayNote(localStorage.key(i),item);
}
}
function addNote() {
var noteTitle = inputTitle.value;
var noteBody = inputBody.value;
if(!localStorage.getItem(noteTitle) && noteTitle !== '' && noteBody !== '') {
inputTitle.value = '';
inputBody.value = '';
displayNote(noteTitle,noteBody);
storeNote(noteTitle,noteBody);
}
}
function displayNote(title, body) {
var note = document.createElement('div');
var noteH = document.createElement('h2');
var notePara = document.createElement('p');
var deleteBtn = document.createElement('button');
var clearFix = document.createElement('div');
note.setAttribute('class','note');
noteH.textContent = title;
notePara.textContent = body;
deleteBtn.setAttribute('class','delete');
deleteBtn.textContent = 'Delete note';
clearFix.setAttribute('class','clearfix');
note.appendChild(noteH);
note.appendChild(notePara);
note.appendChild(deleteBtn);
note.appendChild(clearFix);
noteContainer.appendChild(note);
deleteBtn.addEventListener('click',function(e){
evtTgt = e.target;
evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);
localStorage.removeItem(title);
})
}
function storeNote(title, body) {
localStorage.setItem(title, body);
}
function clearAll() {
while (noteContainer.firstChild) {
noteContainer.removeChild(noteContainer.firstChild);
}
localStorage.clear();
}