popup.js

// Copyright Steve O'Hara
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     https://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

// File selection options
const FILE_SETTINGS = {
    suggestedName: "calendar-extension-settings.json",
    types: [{
        description: "JSON Settings File",
        accept: {
            "application/json": [".json"]
        }
    }],
    excludeAcceptAllOption: true,
    multiple: false
};

// In-page cache of the user's options
let options = await chrome.storage.sync.get();

// Get a reference to the useful elements
const showOptionalEvents = document.getElementById("showOptionalEvents");
const hideOptionalEvents = document.getElementById("hideOptionalEvents");
const deEmphasiseOptionalEvents = document.getElementById("deEmphasiseOptionalEvents");
const hideMornings = document.getElementById("hideMornings");
const hideMorningsTime = document.getElementById("hideMorningsTime");
const savedTabs = document.getElementById("savedTabs");
const tabSnapshot = document.getElementById("tabSnapshot");
const tabSnapshotName = document.getElementById("tabSnapshotName");
const savedAuths = document.getElementById("savedAuths");
const authAdd = document.getElementById("authAdd");
const authLabel = document.getElementById("authLabel");
const authSecret = document.getElementById("authSecret");
const notifier = document.getElementById("notifier");
const download = document.getElementById("download");
const restore = document.getElementById("restore");

// Immediately persist options changes to any of the Calendar inputs
[showOptionalEvents, hideOptionalEvents, deEmphasiseOptionalEvents].forEach((option) => {
    option.addEventListener("change", (event) => {
        options.optionalEvents = event.target.value;
        chrome.storage.sync.set(options);
    });
})
hideMornings.addEventListener("change", (event) => {
    options.hideMornings = event.target.checked;
    chrome.storage.sync.set(options);
});
hideMorningsTime.addEventListener("change", (event) => {
    options.hideMorningsTime = event.target.value;
    chrome.storage.sync.set(options);
});
tabSnapshotName.addEventListener("keypress", (e) => {
    if (e.code === "Enter") {
        addNewSnapshot();
        e.preventDefault();
    }
});
tabSnapshot.addEventListener("click", addNewSnapshot);
authAdd.addEventListener("click", addNewTotp);
download.addEventListener("click", downloadSettings);
restore.addEventListener("click", restoreSettings);

/**
 * Attempts to add a new snapshot to the list
 */
function addNewSnapshot() {
    if (tabSnapshotName.value.trim() === "") {
        alert("Must give the snapshot a name");
    }
    else {
        chrome.windows.getCurrent({
            populate: true
        }).then(function (window) {
            let selectedTab = 0;
            let tabUrls = [];
            window.tabs.forEach(function (tab, index) {
                tabUrls.push(tab.url);
                if (tab.highlighted) {
                    selectedTab = index;
                }
            })
            options.tabs.push({
                name: tabSnapshotName.value,
                activeTab: selectedTab,
                tabs: tabUrls
            });
            chrome.storage.sync.set(options);
            tabSnapshotName.value = "";
            displayTabs();
            tabSnapshotName.focus();
        });
    }
}

/**
 * Attempts to add a new TOTP Authentication key
 */
function addNewTotp() {
    if (authLabel.value.trim() === "") {
        alert("Must give the TOTP a label");
    }
    else if (authSecret.value.trim() === "") {
        alert("You must enter a TOTP as a BASE32 format string");
    }
    else {
        chrome.windows.getCurrent({
            populate: true
        }).then(function () {
            options.totps.push({
                label: authLabel.value,
                secret: authSecret.value,
                algorithm: "SHA1",
                digits: 6,
                period: 30
            });
            chrome.storage.sync.set(options);
            authLabel.value = "";
            authSecret.value = "";
            displayTotps();
            authLabel.focus();
        });
    }
}

/**
 * Downloads the settings
 */
async function downloadSettings() {
    try {
        const fileHandle = await showSaveFilePicker(FILE_SETTINGS);
        const writable = await fileHandle.createWritable();
        await writable.write(window.JSON.stringify(options));
        await writable.close();
    }
    catch (error) {
        console.log(error);
    }
}

/**
 * Restores settings from a JSON file
 */
async function restoreSettings() {
    try {
        const fileHandle = await showOpenFilePicker(FILE_SETTINGS);
        if (fileHandle) {
            const file = await fileHandle[0].getFile();
            const contents = await file.text();
            options = JSON.parse(contents);
            chrome.storage.sync.set(options);
            initSettings()
        }
    }
    catch (error) {
        console.log(error);
    }
}

/**
 * Displays the tabs in the popup
 */
function displayTabs() {
    let tmp = "<table>"
    let count = 0;
    options.tabs.forEach((tab) => {
        tmp += `<tr>
            <td><a class='show' id='show${count}' title='Replace current tabs with (${tab.tabs.length}) from storage'>${tab.name}</a></td>
            <td><a class='showwindow' id='showwindow${count}' title='Show this tab group in a new window'>&#10063;</a></td>
            <td><a class='delete' id='delete${count}' title='Delete this tab group'>&#10007;</a></td>
            </tr>`;
        count++;
    });
    tmp += "</table>";
    savedTabs.innerHTML = tmp;

    // Add action handlers for deleting and showing
    document.querySelectorAll("#savedTabs a").forEach((element) => {
        element.addEventListener("click", (event) => {
            let index = event.target.id.replace(/[^0-9]+/, "") * 1;

            // Check if this is a delete action
            if (/delete[0-9]+/.test(event.target.id)) {
                options.tabs.splice(index, 1);
                chrome.storage.sync.set(options);
                displayTabs();
            }

            // Are we showing some tabs?
            else if (/show[0-9]+/.test(event.target.id)) {

                // Close all the tabs and add the selected tag group back
                chrome.windows.getCurrent({populate: true}).then(function (window) {
                    let tabIds = [];
                    window.tabs.forEach((tab) => {
                        tabIds.push(tab.id);
                    })

                    // Need to add all the new tabs first, otherwise the window will close
                    let snapshot = options.tabs[index];
                    snapshot.tabs.forEach(function (tab, index) {
                        chrome.tabs.create({
                            url: tab,
                            active: snapshot.activeTab === index
                        })
                    });
                    chrome.tabs.remove(tabIds);
                });
            }

            // Are we showing some tabs in a new window?
            else if (/showwindow[0-9]+/.test(event.target.id)) {
                let snapshot = options.tabs[index];
                chrome.windows.create({}, function (window) {
                    snapshot.tabs.forEach(function (tab, idx) {
                        chrome.tabs.create({
                            windowId: window.id,
                            url: tab,
                            active: snapshot.activeTab === idx
                        })
                    });
                    chrome.tabs.remove(window.tabs[0].id);
                });
            }
        });
    });
}

/**
 * Displays the TOTPs in the popup
 */
function displayTotps() {
    let tmp = "<table>"
    let count = 0;
    options.totps.forEach((totp) => {
        tmp += `<tr>
            <td><a class='show' id='copy${count}' title='Copy TOTP to clipboard'>${totp.label}</a></td>
            <td><a class='delete' id='delete${count}' title='Delete this TOTP'>&#10007;</a></td>
            </tr>`;
        count++;
    });
    tmp += "</table>";
    savedAuths.innerHTML = tmp;

    // Add action handlers for deleting and showing
    document.querySelectorAll("#savedAuths a").forEach((element) => {
        element.addEventListener("click", (event) => {
            let index = event.target.id.replace(/[^0-9]+/, "") * 1;

            // Check if this is a delete action
            if (/delete[0-9]+/.test(event.target.id)) {
                options.totps.splice(index, 1);
                chrome.storage.sync.set(options);
                displayTotps();
            }

            // Are we generating a new TOTP?
            else if (/copy[0-9]+/.test(event.target.id)) {

                // Get the secret from storage
                let totp = options.totps[index];

                // Generate the TOTP token
                if (totp) {
                    let key = new OTPAuth.TOTP({secret: totp.secret, algorithm: totp.algorithm, digits: totp.digits, period: totp.period}).generate();

                    // Copy it to the clipboard
                    navigator.clipboard.writeText(key).then(() => {
                        notifier.style.display = "block";
                        setTimeout(function () {
                            notifier.style.display = "none";
                        }, 1000)
                        console.log('Key ' + key + ' copied to clipboard');
                    }, (e) => {
                        console.error('Failed to copy key top clipboard', e);
                    });
                }
            }
        });
    });
}

/**
 * Initialize the form with the user's option settings
 */
function initSettings() {
    showOptionalEvents.checked = Boolean(options.optionalEvents === "showOptionalEvents");
    hideOptionalEvents.checked = Boolean(options.optionalEvents === "hideOptionalEvents");
    deEmphasiseOptionalEvents.checked = Boolean(options.optionalEvents === "deEmphasiseOptionalEvents");
    hideMornings.checked = options.hideMornings;
    hideMorningsTime.value = options.hideMorningsTime;

    displayTabs();
    displayTotps();
}

// Show all the tabs and TOTPs
initSettings();