diff --git a/README.md b/README.md index 0a4a237..a18d698 100644 --- a/README.md +++ b/README.md @@ -17,9 +17,9 @@ Made by [Alyssa X](https://alyssax.com) - [Features](#features) - [Controlling the interface](#controlling-the-interface) - - [Opening Omni](#opening-omni) - - [Closing Omni](#closing-omni) - - [Switching between dark and light mode](#switching-between-dark-and-light-mode) + - [Opening Omni](#opening-omni) + - [Closing Omni](#closing-omni) + - [Switching between dark and light mode](#switching-between-dark-and-light-mode) - [List of commands](#list-of-commands) - [Self-hosting Omni](#self-hosting-omni) - [Libraries used](#libraries-used) diff --git a/src/background.js b/src/background.js index ab73958..f929d4c 100644 --- a/src/background.js +++ b/src/background.js @@ -119,33 +119,33 @@ chrome.runtime.onInstalled.addListener(function (object) { // Inject Omni on install chrome.manifest = chrome.runtime.getManifest(); var injectIntoTab = function (tab) { - var scripts = chrome.manifest.content_scripts[0].js; - var i = 0, s = scripts.length; - for( ; i < s; i++ ) { - chrome.scripting.executeScript({ - target: {tabId: tab.id}, - files: [scripts[i]] - }); - } - chrome.scripting.insertCSS({ - target: {tabId: tab.id}, - files: [chrome.manifest.content_scripts[0].css[0]] + var scripts = chrome.manifest.content_scripts[0].js; + var i = 0, s = scripts.length; + for( ; i < s; i++ ) { + chrome.scripting.executeScript({ + target: {tabId: tab.id}, + files: [scripts[i]] }); + } + chrome.scripting.insertCSS({ + target: {tabId: tab.id}, + files: [chrome.manifest.content_scripts[0].css[0]] + }); } // Get all windows chrome.windows.getAll({ - populate: true + populate: true }, function (windows) { - var i = 0, w = windows.length, currentWindow; - for( ; i < w; i++ ) { - currentWindow = windows[i]; - var j = 0, t = currentWindow.tabs.length, currentTab; - for( ; j < t; j++ ) { - currentTab = currentWindow.tabs[j]; - injectIntoTab(currentTab); - } + var i = 0, w = windows.length, currentWindow; + for( ; i < w; i++ ) { + currentWindow = windows[i]; + var j = 0, t = currentWindow.tabs.length, currentTab; + for( ; j < t; j++ ) { + currentTab = currentWindow.tabs[j]; + injectIntoTab(currentTab); } + } }); chrome.tabs.create({url: "https://alyssax.com/omni/"}); @@ -153,14 +153,14 @@ chrome.runtime.onInstalled.addListener(function (object) { // Check when the extension button is clicked chrome.action.onClicked.addListener((tab) => { - chrome.tabs.sendMessage(tab.id, {request: "open-omni"}); + chrome.tabs.sendMessage(tab.id, {request: "open-omni"}); }); // Listen for the open omni shortcut chrome.commands.onCommand.addListener((command) => { if (command == "open-omni") { chrome.tabs.query({active: true, currentWindow: true}, function(tabs){ - chrome.tabs.sendMessage(tabs[0].id, {request: "open-omni"}); + chrome.tabs.sendMessage(tabs[0].id, {request: "open-omni"}); }); } }); @@ -184,22 +184,22 @@ chrome.tabs.onRemoved.addListener(function(tabId, changeInfo, tab) { // Get the current tab async function getCurrentTab() { - let queryOptions = { active: true, currentWindow: true }; - let [tab] = await chrome.tabs.query(queryOptions); - return tab; + let queryOptions = { active: true, currentWindow: true }; + let [tab] = await chrome.tabs.query(queryOptions); + return tab; } // Get tabs to populate in the actions function getTabs() { - chrome.tabs.query({}, function(tabs) { + chrome.tabs.query({}, function(tabs) { tabs.forEach(function(tab){ - tab.desc = "Chrome tab"; - tab.keycheck = false; + tab.desc = "Chrome tab"; + tab.keycheck = false; tab.action = "switch-tab"; tab.type = "tab"; - }) + }) actions = tabs.concat(actions); - }); + }); } // Get bookmarks to populate in the actions @@ -326,7 +326,7 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { case "go-back": goBack(message.tab); break; - case "go-forward": + case "go-forward": goForward(message.tab); break; case "duplicate-tab": diff --git a/src/content.css b/src/content.css index 449fc7e..49045d4 100644 --- a/src/content.css +++ b/src/content.css @@ -30,28 +30,28 @@ } @font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 400; - src: url('chrome-extension://__MSG_@@extension_id__/assets/Inter-Regular.ttf'); + font-family: 'Inter'; + font-style: normal; + font-weight: 400; + src: url('chrome-extension://__MSG_@@extension_id__/assets/Inter-Regular.ttf'); } @font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 500; - src: url('chrome-extension://__MSG_@@extension_id__/assets/Inter-Medium.ttf'); + font-family: 'Inter'; + font-style: normal; + font-weight: 500; + src: url('chrome-extension://__MSG_@@extension_id__/assets/Inter-Medium.ttf'); } @font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 600; - src: url('chrome-extension://__MSG_@@extension_id__/assets/Inter-SemiBold.ttf'); + font-family: 'Inter'; + font-style: normal; + font-weight: 600; + src: url('chrome-extension://__MSG_@@extension_id__/assets/Inter-SemiBold.ttf'); } @font-face { - font-family: 'Inter'; - font-style: normal; - font-weight: 700; - src: url('chrome-extension://__MSG_@@extension_id__/assets/Inter-Bold.ttf'); + font-family: 'Inter'; + font-style: normal; + font-weight: 700; + src: url('chrome-extension://__MSG_@@extension_id__/assets/Inter-Bold.ttf'); } .omni-extension * { display: block; @@ -60,175 +60,175 @@ line-height: normal; } .omni-extension { - font-family: Inter!important; + font-family: Inter!important; z-index: 99999999999; } .omni-extension #omni-wrap { position: fixed; - width: 700px; - border: 1px solid transparent; - border-radius: 5px; - margin: auto; - top: 0px; - right: 0px; - bottom: 0px; - left: 0px; - z-index: 9999999999; - height: 540px; - transition: all .2s cubic-bezier(.05,.03,.35,1); + width: 700px; + border: 1px solid transparent; + border-radius: 5px; + margin: auto; + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; + z-index: 9999999999; + height: 540px; + transition: all .2s cubic-bezier(.05,.03,.35,1); } .omni-extension #omni { - position: absolute; - width: 100%; - background: var(--background); - border: 1px solid var(--border); - border-radius: 5px; - top: 0px; - left: 0px; - z-index: 9999999998; - height: fit-content; - transition: all .2s cubic-bezier(.05,.03,.35,1); + position: absolute; + width: 100%; + background: var(--background); + border: 1px solid var(--border); + border-radius: 5px; + top: 0px; + left: 0px; + z-index: 9999999998; + height: fit-content; + transition: all .2s cubic-bezier(.05,.03,.35,1); display: block; } .omni-closing #omni { - transform: scale(.9); - opacity: 0; + transform: scale(.9); + opacity: 0; display: none!important; } .omni-closing { pointer-events: none; } .omni-extension #omni-overlay { - height: 100%; - width: 100%; - position: fixed; - top: 0px; - left: 0px; - background-color: #000; - z-index: 9999; - opacity: .6; - transition: all .1s cubic-bezier(.05,.03,.35,1); + height: 100%; + width: 100%; + position: fixed; + top: 0px; + left: 0px; + background-color: #000; + z-index: 9999; + opacity: .6; + transition: all .1s cubic-bezier(.05,.03,.35,1); } .omni-closing #omni-overlay { - opacity: 0!important; + opacity: 0!important; } .omni-extension #omni-head { - height: 50px; - line-height: 50px; - width: 95%; - margin-left: auto; - margin-right: auto; - border-bottom: 1px solid var(--border); + height: 50px; + line-height: 50px; + width: 95%; + margin-left: auto; + margin-right: auto; + border-bottom: 1px solid var(--border); } .omni-extension #omni-name { - color: var(--text); - font-size: 12px; - font-weight: 600; - float: left; + color: var(--text); + font-size: 12px; + font-weight: 600; + float: left; } .omni-extension #omni-close { - color: var(--text-3); - float: right; - font-size: 12px; - font-weight: 500; + color: var(--text-3); + float: right; + font-size: 12px; + font-weight: 500; } .omni-extension #omni-close span { - margin-left: 3px; + margin-left: 3px; } .omni-extension .omni-shortcut { - display: inline-block!important; + display: inline-block!important; font-size: 13px; - border-radius: 5px; - background-color: var(--shortcut); - color: var(--text); - text-align: center; - height: 20px; - line-height: 20px; - min-width: 20px; - padding-left: 3px; - padding-right: 3px; + border-radius: 5px; + background-color: var(--shortcut); + color: var(--text); + text-align: center; + height: 20px; + line-height: 20px; + min-width: 20px; + padding-left: 3px; + padding-right: 3px; } .omni-extension input { - background: transparent; - border: 0px; - outline: none; - font-size: 20px; - font-weight: 400; - height: 50px; - width: 92%; - margin-left: auto; - margin-right: auto; - display: block; - color: var(--text); - caret-color: var(--accent); + background: transparent; + border: 0px; + outline: none; + font-size: 20px; + font-weight: 400; + height: 50px; + width: 92%; + margin-left: auto; + margin-right: auto; + display: block; + color: var(--text); + caret-color: var(--accent); font-family: Inter!important; - margin-top: 5px; - margin-bottom: 5px; - box-sizing: border-box; + margin-top: 5px; + margin-bottom: 5px; + box-sizing: border-box; outline: none; border: 0px; box-shadow: none; } .omni-extension ::placeholder { - color: var(--placeholder); - opacity: 1; + color: var(--placeholder); + opacity: 1; } .omni-extension :-ms-input-placeholder { - color: var(--placeholder); + color: var(--placeholder); } .omni-extension ::-ms-input-placeholder { - color: var(--placeholder); + color: var(--placeholder); } .omni-extension #omni-list { - width: 100%; - overflow: auto; - height: 100%; - max-height: 400px; - border-top: 1px solid var(--border); - position: relative; + width: 100%; + overflow: auto; + height: 100%; + max-height: 400px; + border-top: 1px solid var(--border); + position: relative; } .omni-extension .omni-item { - height: 60px; - width: 100%; + height: 60px; + width: 100%; } .omni-extension .omni-item:hover { - cursor: pointer; + cursor: pointer; } .omni-extension .omni-item-active { - background-color: var(--select); - position: relative; + background-color: var(--select); + position: relative; } .omni-extension .omni-item-active:before { - height: 100%; - position: absolute; - display: block; - content: ""; - width: 2px; - background-color: var(--accent); + height: 100%; + position: absolute; + display: block; + content: ""; + width: 2px; + background-color: var(--accent); } .omni-extension .omni-select { - float: right; - vertical-align: middle; - color: var(--text-3); - font-size: 12px; - font-weight: 500; - display: none; - margin-top: 20px; - margin-right: 5%; + float: right; + vertical-align: middle; + color: var(--text-3); + font-size: 12px; + font-weight: 500; + display: none; + margin-top: 20px; + margin-right: 5%; } .omni-extension .omni-select span { - margin-left: 3px; + margin-left: 3px; } .omni-extension .omni-item-active .omni-select { - display: block!important; + display: block!important; } .omni-extension .omni-icon { - width: 20px; - height: 20px; - margin-left: 5%; - display: inline-block; - vertical-align: middle; - margin-top: -12px; + width: 20px; + height: 20px; + margin-left: 5%; + display: inline-block; + vertical-align: middle; + margin-top: -12px; } .omni-extension .omni-emoji-action { display: inline-block; @@ -241,73 +241,73 @@ font-size: 18px; } .omni-extension .omni-item-details { - display: inline-block!important; - margin-left: 10px; - vertical-align: middle; - margin-top: 10px; + display: inline-block!important; + margin-left: 10px; + vertical-align: middle; + margin-top: 10px; } .omni-extension .omni-item-name { - color: var(--text-2); - font-size: 14px; - font-weight: 500; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - width: 460px; + color: var(--text-2); + font-size: 14px; + font-weight: 500; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 460px; } .omni-extension .omni-item-active .omni-item-name { - color: var(--text)!important; + color: var(--text)!important; } .omni-extension .omni-item-desc { - color: var(--text-3); - margin-top: 5px; + color: var(--text-3); + margin-top: 5px; font-size: 14px; white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - width: 460px; + overflow: hidden; + text-overflow: ellipsis; + width: 460px; } .omni-extension #omni-footer { - height: 45px; - line-height: 45px; - border-top: 1px solid var(--border); - width: 92%; - margin-left: auto; - margin-right: auto; + height: 45px; + line-height: 45px; + border-top: 1px solid var(--border); + width: 92%; + margin-left: auto; + margin-right: auto; } .omni-extension #omni-results { - color: var(--text-3); - font-size: 12px; - font-weight: 500; - float: left; + color: var(--text-3); + font-size: 12px; + font-weight: 500; + float: left; } .omni-extension #omni-arrows { - color: var(--text-3); - font-size: 12px; - font-weight: 500; - float: right; + color: var(--text-3); + font-size: 12px; + font-weight: 500; + float: right; } .omni-extension #omni-arrows span { - margin-left: 3px; - margin-right: 3px; + margin-left: 3px; + margin-right: 3px; } .omni-extension .omni-keys { - float: right; - vertical-align: middle; - font-weight: 500; - margin-top: 20px; - margin-right: 5%; + float: right; + vertical-align: middle; + font-weight: 500; + margin-top: 20px; + margin-right: 5%; } .omni-extension .omni-item-active .omni-keys { - display: none!important; + display: none!important; } .omni-extension .omni-keys span { - margin-left: 3px; + margin-left: 3px; } #body-wrap { - width: calc(100% - 350px); - overflow: auto; - position: absolute; - top: 0px; - left: 0px; -} \ No newline at end of file + width: calc(100% - 350px); + overflow: auto; + position: absolute; + top: 0px; + left: 0px; +} diff --git a/src/content.html b/src/content.html index 4b27cec..aa212d7 100644 --- a/src/content.html +++ b/src/content.html @@ -1,8 +1,8 @@ - - - -
+ + + +
-
-
- +
+
+ diff --git a/src/content.js b/src/content.js index c982dd5..7254f20 100644 --- a/src/content.js +++ b/src/content.js @@ -1,18 +1,18 @@ $(document).ready(function(){ var isOpen = false; - var actions = []; + var actions = []; var isFiltered = false; // Append the omni into the current page - $.get(chrome.runtime.getURL('/content.html'), function(data) { - $(data).appendTo('body'); - }); + $.get(chrome.runtime.getURL('/content.html'), function(data) { + $(data).appendTo('body'); + }); // Request actions from the background - chrome.runtime.sendMessage({request:"get-actions"}, function(response) { - actions = response.actions; + chrome.runtime.sendMessage({request:"get-actions"}, function(response) { + actions = response.actions; populateOmni(); - }); + }); // Add actions to the omni function populateOmni() { @@ -67,7 +67,7 @@ $(document).ready(function(){ } // Open the omni - function openOmni() { + function openOmni() { chrome.runtime.sendMessage({request:"get-actions"}, function(response) { isOpen = true; actions = response.actions; @@ -79,19 +79,19 @@ $(document).ready(function(){ $("#omni-extension input").focus(); }, 100); }); - } + } // Close the omni - function closeOmni() { + function closeOmni() { isOpen = false; - $("#omni-extension").addClass("omni-closing"); - } + $("#omni-extension").addClass("omni-closing"); + } // Hover over an action in the omni - function hoverItem() { - $(".omni-item-active").removeClass("omni-item-active"); - $(this).addClass("omni-item-active"); - } + function hoverItem() { + $(".omni-item-active").removeClass("omni-item-active"); + $(this).addClass("omni-item-active"); + } // Autocomplete commands. Since they all start with different letters, it can be the default behavior function checkShortHand(e, value) { @@ -116,11 +116,11 @@ $(document).ready(function(){ } // Search for an action in the omni - function search(e) { + function search(e) { if (e.keyCode == 37 || e.keyCode == 38 || e.keyCode == 39 || e.keyCode == 40 || e.keyCode == 13 || e.keyCode == 37) { return; } - var value = $(this).val().toLowerCase(); + var value = $(this).val().toLowerCase(); checkShortHand(e, value); value = $(this).val().toLowerCase(); if (value.startsWith("/history")) { @@ -180,7 +180,7 @@ $(document).ready(function(){ $(".omni-extension #omni-results").html($("#omni-extension #omni-list .omni-item:visible").length+" results"); $(".omni-item-active").removeClass("omni-item-active"); $(".omni-extension #omni-list .omni-item:visible").first().addClass("omni-item-active"); - } + } // Handle actions from the omni function handleAction(e) { @@ -299,11 +299,11 @@ $(document).ready(function(){ } else if (down[18] && down[16] && down[67]) { window.open("mailto:"); } - + if (down[27] && isOpen) { - // Esc key - closeOmni(); - } else if (down[13] && isOpen) { + // Esc key + closeOmni(); + } else if (down[13] && isOpen) { // Enter key handleAction(); } @@ -323,10 +323,10 @@ $(document).ready(function(){ }); - // Events + // Events $(document).on("click", "#open-page-omni-extension-thing", openShortcuts); - $(document).on("mouseover", ".omni-extension .omni-item:not(.omni-item-active)", hoverItem); - $(document).on("keyup", ".omni-extension input", search); + $(document).on("mouseover", ".omni-extension .omni-item:not(.omni-item-active)", hoverItem); + $(document).on("keyup", ".omni-extension input", search); $(document).on("click", ".omni-item-active", handleAction); $(document).on("click", ".omni-extension #omni-overlay", closeOmni); }); diff --git a/src/manifest.json b/src/manifest.json index 6764171..4d0846e 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -1,34 +1,34 @@ { - "name": "Omni", - "description": "Supercharge Chrome with commands, shortcuts, and more", - "offline_enabled": true, - "version": "1.2.7", - "manifest_version": 3, - "action": { - "icons": { + "name": "Omni", + "description": "Supercharge Chrome with commands, shortcuts, and more", + "offline_enabled": true, + "version": "1.2.7", + "manifest_version": 3, + "action": { + "icons": { "16": "assets/logo-16.png", "48": "assets/logo-48.png", - "128": "assets/logo-128.png" + "128": "assets/logo-128.png" } - }, - "icons": { + }, + "icons": { "16": "assets/logo-16.png", "48": "assets/logo-48.png", - "128": "assets/logo-128.png" + "128": "assets/logo-128.png" }, "commands": { "open-omni": { "suggested_key": { - "default": "Ctrl+K", - "mac": "Command+K" - }, + "default": "Ctrl+K", + "mac": "Command+K" + }, "description": "Open command menu" } }, - "background": { - "service_worker": "background.js" - }, - "content_scripts": [ + "background": { + "service_worker": "background.js" + }, + "content_scripts": [ { "matches": [ "" @@ -37,17 +37,17 @@ "js": ["jquery.js", "content.js"], "css": ["content.css"] } - ], - "web_accessible_resources": [ - { - "resources": ["content.html", "assets/*", "popup.css", "popup.js"], - "matches": [""] - } - ], - "permissions": [ - "tabs", "activeTab", "bookmarks", "browsingData", "history", "scripting" - ], - "host_permissions": [ - "https://www.googleapis.com/*", "https://gstatic.com/*", "*://*/*" - ] + ], + "web_accessible_resources": [ + { + "resources": ["content.html", "assets/*", "popup.css", "popup.js"], + "matches": [""] + } + ], + "permissions": [ + "tabs", "activeTab", "bookmarks", "browsingData", "history", "scripting" + ], + "host_permissions": [ + "https://www.googleapis.com/*", "https://gstatic.com/*", "*://*/*" + ] }