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

Added sidebar example (#192)

Browse Source 
* Added sidebar example

* Remove blank line
This commit is contained in:
wbamberg
2017-03-03 21:15:15 -08:00
committed by GitHub
parent c7fb07a637
commit 0c5b1ec028
6 changed files with 125 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
annotate-page/README.md Normal file
View File

@@ -0,0 +1,9 @@
# annotate-page
## What it does
This example adds a sidebar that lets you take notes on the current web page. The notes are saved to local storage, and the notes for each page are shown again when you open that page again.
## What it shows
How to create a sidebar for an add-on. How to associate the sidebar with the currently active tab in that sidebar's window. How to store and restore sidebar content.

BIN
annotate-page/icons/star.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

21
annotate-page/manifest.json Normal file
View File

@@ -0,0 +1,21 @@
{
"manifest_version": 2,
"name": "Web page annotator",
"description": "Displays a sidebar that lets you take notes on web pages.",
"version": "1.0",
"applications": {
"gecko": {
"strict_min_version": "54.0a1"
}
},
"sidebar_action": {
"default_icon": "icons/star.png",
"default_title" : "Annotator",
"default_panel": "sidebar/panel.html"
},
"permissions": ["storage", "tabs"]
}

23
annotate-page/sidebar/panel.css Normal file
View File

@@ -0,0 +1,23 @@
html, body {
height: 100%;
width: 100%;
margin: 1em 0 0 0;
box-sizing: border-box;
}
body {
font: caption;
background-color: #F4F7F8;
}
p {
margin: 2em;
}
#content {
width: 80%;
height: 80%;
margin: 0 2em;
background-color: white;
}

15
annotate-page/sidebar/panel.html Normal file
View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="panel.css"/>
</head>
<body>
<div id = "content"></div>
<p>Click inside the box to start taking notes on this page.</p>
<script src="panel.js"></script>
</body>
</html>

57
annotate-page/sidebar/panel.js Normal file
View File

@@ -0,0 +1,57 @@
var myWindowId;
const contentBox = document.querySelector("#content");
/*
Make the content box editable as soon as the user mouses over the sidebar.
*/
window.addEventListener("mouseover", (e) => {
contentBox.setAttribute("contenteditable", true);
});
/*
When the user mouses out, save the current contents of the box.
*/
window.addEventListener("mouseout", (e) => {
contentBox.setAttribute("contenteditable", false);
browser.tabs.query({windowId: myWindowId, active: true}).then((tabs) => {
let contentToStore = {};
contentToStore[tabs[0].url] = contentBox.textContent;
browser.storage.local.set(contentToStore);
});
});
/*
Update the sidebar's content.
1) Get the active tab in this sidebar's window.
2) Get its stored content.
3) Put it in the content box.
*/
function updateContent() {
browser.tabs.query({windowId: myWindowId, active: true})
.then((tabs) => {
return browser.storage.local.get(tabs[0].url);
})
.then((storedInfo) => {
contentBox.textContent = storedInfo[Object.keys(storedInfo)[0]];
});
}
/*
Update content when a new tab becomes active.
*/
browser.tabs.onActivated.addListener(updateContent);
/*
Update content when a new page is loaded into a tab.
*/
browser.tabs.onUpdated.addListener(updateContent);
/*
When the sidebar loads, get the ID of its window,
and update its content.
*/
browser.windows.getCurrent({populate: true}).then((windowInfo) => {
myWindowId = windowInfo.id;
updateContent();
});