2.5.1: Peek is here!

More info on releases

src/.amo-upload-uuid

@@ -0,0 +1 @@
+{"uploadUuid":"4175f406c31444aebb4b608bd9554e65","channel":"unlisted","xpiCrcHash":"e08424b181a96fc32fe09abf0ab2d35e2db866b9657ca1e19494586c0ec279ba"}

src/background.js

@@ -9,4 +9,53 @@ function handleShortcut(command) {
     }
 }
 
-browser.commands.onCommand.addListener(handleShortcut);
+browser.commands.onCommand.addListener(handleShortcut);
+
+// Remove X-frame headers - required for Peek to work
+var defaultRgx = ["<all_urls>", "*://*/*", "https://*.w3schools.com/*"].join('\n')
+var theRegex = null;
+var headersdo = {
+    "content-security-policy": (x => { return false }),
+    "x-frame-options": (x => { return false })
+}
+
+function updateRegexpes() {
+    browser.storage.local.get(null, function (res) {
+        var regstr = (res.regstr_allowed || defaultRgx);
+        browser.webRequest.onHeadersReceived.removeListener(setHeader)
+        if (!res.is_disabled) {
+            theRegex = new RegExp(
+                regstr.split("\n").map(
+                    x => x.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')	// Sanitize regex
+                        .replace(/(^<all_urls>|\\\*)/g, "(.*?)")	// Allow wildcards
+                        .replace(/^(.*)$/g, "^$1$")).join("|")	// User multi match
+            )
+            browser.webRequest.onHeadersReceived.addListener(
+                setHeader,
+                { urls: ["<all_urls>"], types: ["sub_frame", "object"] },
+                ["blocking", "responseHeaders"]
+            );
+        }
+    });
+}
+
+function setHeader(e) {
+    return new Promise((resolve, reject) => {
+        browser.webNavigation.getFrame({ tabId: e.tabId, frameId: e.parentFrameId })
+            .then(parentFrame => {
+                if (parentFrame.url.match(theRegex)) {
+                    e.responseHeaders = e.responseHeaders.filter(x => (headersdo[x.name.toLowerCase()] || Array)())
+                }
+                resolve({ responseHeaders: e.responseHeaders });
+            })
+    })
+}
+updateRegexpes();
+var portFromCS;
+function connected(p) {
+    portFromCS = p;
+    portFromCS.onMessage.addListener(function (m) {
+        browser.storage.local.set(m, updateRegexpes);
+    });
+}
+browser.runtime.onConnect.addListener(connected);

src/components/peek/peek.css

@@ -0,0 +1,53 @@
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200");
+
+div#peekpage {
+  height: 100vh;
+  width: 74vw;
+  margin: auto;
+  border: 0;
+  padding: 0;
+  border-radius: 4px;
+  animation: peekopen 0.5s;
+}
+div#peekpage::backdrop {
+  background: rgba(57, 59, 82, 0.6);
+}
+div#peekpage iframe {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  margin-bottom: -5px;
+}
+.peektools {
+  border-radius: 100px;
+  border: 0;
+  font-family: "Material Symbols Outlined";
+  font-size: 20px;
+  font-weight: 300;
+  width: 30px;
+  height: 30px;
+  margin-top: 20px;
+  position: fixed;
+  transform: translateX(calc(74vw + 10px));
+  z-index: 1000;
+  cursor: default;
+  animation: buttonappear 1s;
+  background: white;
+  color: black;
+}
+.peektools#open_in_full {
+  margin-top: 60px;
+}
+@keyframes peekopen {
+  from {
+    scale: 0;
+  }
+  50% {
+    scale: 1.03;
+  }
+}
+@keyframes buttonappear {
+  from {
+    margin-left: 20px;
+  }
+}

src/components/peek/peek.js

@@ -0,0 +1,65 @@
+// Peek
+var peekPage = document.createElement("div");
+peekPage.id = "peekpage";
+peekPage.popover = true;
+
+// Backdrop
+var peekBackdrop = document.createElement('div');
+peekBackdrop.style = "display: none; height: 100vh; width: 100vw; top: 0; left: 0; position: fixed; z-index: 2147483647;";
+peekBackdrop.onclick = () => closePeek();
+
+// Iframe
+var iframeOldSrc;
+var peekIframe = document.createElement("iframe");
+
+// Tools
+var tools = [{ name: 'close' }, { name: 'open_in_full' }]
+tools.forEach((tool) => {
+    var btn = document.createElement('button');
+    btn.innerHTML = tool.name
+    btn.className = 'peektools'
+    btn.id = tool.name
+    if (tool.name == 'close') {
+        btn.onclick = () => closePeek()
+    } else {
+        btn.onclick = () => {
+            closePeek();
+            window.open(iframeOldSrc);
+        }
+    }
+    peekPage.appendChild(btn);
+})
+
+function closePeek() {
+    peekPage.hidePopover();
+    document.body.style.overflow = ''
+    peekBackdrop.style.display = 'none'
+    iframeOldSrc = peekIframe.src
+    peekIframe.src = ""
+}
+
+document.body.appendChild(peekBackdrop);
+document.body.appendChild(peekPage);
+peekPage.appendChild(peekIframe);
+
+// Make peek functional in Anchor elements
+let collection = document.getElementsByTagName("a");
+Array.from(collection).forEach(function (element) {
+    var oldhref = element.href;
+    element.href = "javascript:;";
+    element.removeAttribute("jsaction");
+    element.removeAttribute("target");
+    element.onclick = (event) => {
+        if (event.shiftKey) {
+            event.preventDefault();
+            peekIframe.src = oldhref;
+            peekBackdrop.style.display = 'block';
+            document.body.style.overflow = 'hidden';
+            peekPage.showPopover();
+        } else {
+            if (element.href == "javascript:;") {
+                element.href = oldhref
+            }
+        }
+    };
+});

src/components/sidebar/sidebar.html

@@ -32,17 +32,21 @@
             alt=""
           />
         </button>-->
+        <div id="space-info">
+          ✨
+          <input id="space-name" value="Space 1" />
+        </div>
       </div>
       <div id="sidebar-content">
         <button id="new-tab-button">+ New Tab <span>Ctrl+T</span></button>
         <ul id="tab-list"></ul>
       </div>
     </div>
     <div id="create-new" class="floating-div" popover>
-      <button id="b1" class="floating-button">
+      <button id="b1" class="floating-button" popovertarget="create-new">
         <i class="fa-regular fa-note-sticky"></i> New Note
       </button>
-      <button id="b2" class="floating-button">
+      <button id="b2" class="floating-button" popovertarget="create-new">
         <i class="fa-regular fa-square-plus"></i> New Tab
       </button>
     </div>