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 => +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 => +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);