Created
December 24, 2019 12:40
-
-
Save surfmuggle/7ca457a92df68ad094deb8a7a96387ca to your computer and use it in GitHub Desktop.
Firefox sidebar extension does not work
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<link rel="stylesheet" href="panel.css"/> | |
</head> | |
<body> | |
<h2>Grab real estate data</h2> | |
<div> | |
<label>Titel: <input type=text placeholder="Objekttitel" /></label><br /> | |
<label>Anzahl Zimmer: <input class="inp-rooms" type="number" /></label><br /> | |
<label>Preis: <input class="inp-price" type="text" value="0" /></label><br /> | |
<button onclick="grabData()">Grab and save</button><br /> | |
</div> | |
<div id="content"></div> | |
<p>Click inside the box to start taking notes on this page.</p> | |
<script src="panel.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var myWindowId; | |
const contentBox = document.querySelector("#content"); | |
/* | |
Make the content box editable as soon as the user mouses over the sidebar. | |
*/ | |
window.addEventListener("mouseover", () => { | |
contentBox.setAttribute("contenteditable", true); | |
}); | |
/* | |
When the user mouses out, save the current contents of the box. | |
*/ | |
window.addEventListener("mouseout", () => { | |
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]]; | |
}); | |
} | |
/* | |
Load Data into sidebar | |
*/ | |
function grabData(){ | |
browser.windows.getCurrent({populate: true}).then((windowInfo) => { | |
myWindowId = windowInfo.id; | |
contentBox.textContent ="grabData was called" | |
}); | |
} | |
/* | |
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); | |
/* | |
add listener for grabData function | |
*/ | |
browser.tabs.onClick.addListener(grabData); | |
/* | |
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(); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment