~callum/beavers-dam

0cea9e8f800ccd7a0939bf66c200036ba364a5cf — Callum Brown 1 year, 2 months ago 10ee1dc v0.1
v0.1: Functional saving and viewing
6 files changed, 84 insertions(+), 10 deletions(-)

M content/content.js
A journal/journal.html
A journal/journal.js
M manifest.json
M popup/popup.html
M popup/popup.js
M content/content.js => content/content.js +26 -9
@@ 1,3 1,21 @@
const save = (text) => {
	chrome.storage.local.get(
		{ entries: [] }
	).then((items) => {
		// Can't store a Map, use an Object instead
		let entry = {
			"date": Date(),
			"hostname": location.hostname,
			"text": text,
		};
		items.entries.push(entry);
		chrome.storage.local.set(
			{ entries: items.entries }
		);
	});
};


const dam = () => {
	let dam = document.createElement("div");
	dam.id = "beavers-dam";


@@ 8,22 26,21 @@ const dam = () => {

	dam.append(document.createElement("br"));

	let saveAndClose = document.createElement("button");
	saveAndClose.textContent = "Save & Close";
	saveAndClose.addEventListener("click", () => {
	let saveAndViewJournal = document.createElement("button");
	saveAndViewJournal.textContent = "Save & View Journal";
	saveAndViewJournal.addEventListener("click", () => {
		if (textarea.value.length > 0) {
			window.alert("Saved");
			save(textarea.value);
		}
		// TODO: might be nice to close the tab here, but that would
		// require sending a message to the background script.
		window.history.back();
		window.open(chrome.runtime.getURL("journal/journal.html"), "_self");
	});
	dam.append(saveAndClose)
	dam.append(saveAndViewJournal)

	let saveAndContinue = document.createElement("button");
	saveAndContinue.textContent = "Save & Continue";
	saveAndContinue.textContent = `Save & Continue to ${location.hostname}`;
	saveAndContinue.addEventListener("click", () => {
		if (textarea.value.length > 0) {
			save(textarea.value);
			dam.remove();
		} else {
			window.alert("Please write in your journal.");

A journal/journal.html => journal/journal.html +11 -0
@@ 0,0 1,11 @@
<!DOCTYPE html>
<html>
	<head>
		<title>Beaver's Journal</title>
		<script src="journal.js" defer></script>
	</head>
	<body>
		<h1>Beaver's Journal</h1>
		<div id="entries"></div>
	</body>
</html>

A journal/journal.js => journal/journal.js +31 -0
@@ 0,0 1,31 @@
let container = document.getElementById("entries");


const addEntry = (entry) => {
	let entryDiv = document.createElement("div");
	container.append(entryDiv);	

	let date = document.createElement("p");
	date.textContent = entry.date;
	entryDiv.append(date);

	let hostname = document.createElement("p");
	hostname.textContent = entry.hostname;
	entryDiv.append(hostname);

	let text = document.createElement("p");
	text.textContent = entry.text;
	entryDiv.append(text);
};


const loadEntries = () => {
	chrome.storage.local.get(
		{ entries: [] }
	).then((items) => {
		items.entries.forEach(addEntry);
	});
};


document.addEventListener("DOMContentLoaded", loadEntries);

M manifest.json => manifest.json +7 -1
@@ 2,7 2,7 @@
	"manifest_version": 3,
	"name": "Beaver's Dam",
	"description": "Base Level Extension",
	"version": "0.0",
	"version": "0.1",
	"permissions": ["storage"],
	"action": {
		"default_popup": "popup/popup.html"


@@ 13,5 13,11 @@
			"css": ["content/content.css"],
			"matches": ["*://*/*"]
		}
	],
	"web_accessible_resources": [
		{
			"resources": [ "journal/journal.html" ],
			"matches": [ "*://*/*" ]
		}
	]
}

M popup/popup.html => popup/popup.html +2 -0
@@ 5,6 5,8 @@
	</head>
	<body>
		<h1>Beaver's Dam</h1>
		<button id="open-journal">Open Journal</button>
		<br>
		<label for="dammed">Dammed sites:</label>
		<br>
		<textarea id="dammed"></textarea>

M popup/popup.js => popup/popup.js +7 -0
@@ 3,6 3,11 @@
const textarea = document.getElementById("dammed");


const openJournal = () => {
	window.open(chrome.runtime.getURL("journal/journal.html"));
};


const saveSettings = () => {
	chrome.storage.sync.set(
		{ dammed: textarea.value.split("\n") }


@@ 24,6 29,8 @@ const restoreSettings = () => {
	});
};


document.getElementById("open-journal").addEventListener("click", openJournal);
document.addEventListener("DOMContentLoaded", restoreSettings);
document.getElementById("save").addEventListener("click", saveSettings);