surfmuggle/panel.html

## panel.html
<!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>

## panel.js
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();
});
	<!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>
	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();
	});