felixfoertsch/webextensions-examples
1
0
Fork 0
mirror of https://github.com/mdn/webextensions-examples.git synced 2026-04-17 23:08:33 +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

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();
});