├── .DS_Store
├── LICENSE
├── README.md
└── showkeys
    ├── background.js
    ├── index.js
    ├── manifest.json
    ├── showkeys_128.png
    ├── showkeys_16.png
    ├── showkeys_32.png
    ├── showkeys_48.png
    ├── showkeys_blue_16.png
    └── showkeys_blue_32.png


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekBoySupreme/Show-Keys/4b5577c78354ff61ede326ed052a1785f34cd0a3/.DS_Store


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Shuvam Manna
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Show-Keys
 2 | 
 3 | <img src="https://user-images.githubusercontent.com/15321738/121798418-d5656800-cc43-11eb-8b1b-ac613da57859.png" width="50%"/>
 4 | 
 5 | ## Extension
 6 | <hr />
 7 | A Chrome Extension wrapper around <a href="https://github.com/siddharthkp/show-keys/">@siddharthkp's</a> script to show Key Press on a website.
 8 | <br/><br/>
 9 | PS - A lot of websites block this functionality (viz. most Google Subdomains)
10 | 


--------------------------------------------------------------------------------
/showkeys/background.js:
--------------------------------------------------------------------------------
 1 | let flag = 0;
 2 | 
 3 | chrome.action.onClicked.addListener(toggleShowKeys);
 4 | //chrome.tabs.onCreated.addListener(toggleShowKeys);
 5 | chrome.tabs.onUpdated.addListener(function (tabId) {
 6 |   let toggle = {
 7 |     message: "toggle",
 8 |     state: flag,
 9 |   };
10 |   chrome.tabs.sendMessage(tabId, toggle);
11 | });
12 | 
13 | function toggleShowKeys() {
14 |   if (flag == 0) flag = 1;
15 |   else if (flag == 1) flag = 0;
16 | 
17 |   let toggle = {
18 |     message: "toggle",
19 |     state: flag,
20 |   };
21 | 
22 |   setIconNew(flag);
23 |   chrome.tabs.query({}, function (tabs) {
24 |     for (var i = 0; i < tabs.length; ++i) {
25 |       chrome.tabs.sendMessage(tabs[i].id, toggle);
26 |     }
27 |   });
28 | }
29 | 
30 | function setIconNew(value) {
31 |   if (value == 0)
32 |     chrome.action.setIcon({
33 |       path: { 19: "showkeys_16.png", 38: "showkeys_32.png" },
34 |     });
35 |   else if (value == 1) {
36 |     chrome.action.setIcon({
37 |       path: { 19: "showkeys_blue_16.png", 38: "showkeys_blue_32.png" },
38 |     });
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/showkeys/index.js:
--------------------------------------------------------------------------------
  1 | chrome.runtime.onMessage.addListener(keyToggle);
  2 | 
  3 | 
  4 | let toggle_state = 0;
  5 | 
  6 | function keyToggle(togglekey) {
  7 |   if (togglekey.state == 1) {
  8 |     toggle_state = 1;
  9 |   } else if (togglekey.state == 0) {
 10 |     toggle_state = 0;
 11 |   }
 12 | }
 13 | 
 14 | const prettyMap = {
 15 |   ArrowUp: "↑",
 16 |   ArrowRight: "→",
 17 |   ArrowDown: "↓",
 18 |   ArrowLeft: "←",
 19 |   Shift: "⇧",
 20 |   Meta: "⌘",
 21 |   Alt: "⌥",
 22 |   Control: "^",
 23 |   Escape: "esc",
 24 |   Backspace: "⌫",
 25 |   Enter: "⏎",
 26 |   32: "space",
 27 |   CapsLock: "caps lock",
 28 |   Tab: "tab",
 29 | };
 30 | 
 31 | let keys = [];
 32 | let appearedAt = null;
 33 | 
 34 | const handler = (event) => {
 35 |   if (
 36 |     window.SHOW_KEYS_SKIP_INPUTS &&
 37 |     ["INPUT", "TEXTAREA"].includes(event.target.tagName)
 38 |   ) {
 39 |     return;
 40 |   }
 41 | 
 42 |   const key =
 43 |     prettyMap[event.key] || prettyMap[event.which] || event.key.toUpperCase();
 44 | 
 45 |   const modifiers = {
 46 |     Meta: event.metaKey,
 47 |     Shift: event.shiftKey,
 48 |     Alt: event.altKey,
 49 |     Control: event.ctrlKey,
 50 |   };
 51 | 
 52 |   const newKeys = [];
 53 | 
 54 |   Object.keys(modifiers)
 55 |     .filter((modifier) => modifiers[modifier])
 56 |     .forEach((modifier) => newKeys.push(prettyMap[modifier]));
 57 | 
 58 |   if (!Object.keys(modifiers).includes(event.key)) newKeys.push(key);
 59 | 
 60 |   const dismissAfterTimeout = () => {
 61 |     // TODO: Should probably clear this timeout
 62 |     window.setTimeout(() => {
 63 |       if (appearedAt === null) return;
 64 |       else if (new Date() - appearedAt < 1000) dismissAfterTimeout();
 65 |       else {
 66 |         keys = [];
 67 |         if (toggle_state == 1) render();
 68 |       }
 69 |     }, 1000);
 70 |   };
 71 | 
 72 |   keys = newKeys;
 73 |   appearedAt = new Date();
 74 |   if (toggle_state == 1) render();
 75 |   dismissAfterTimeout();
 76 | };
 77 | 
 78 | const css = `
 79 |   [data-keys] {
 80 |     display: flex;
 81 |     background: rgba(0, 0, 0, 0.5);
 82 |     backdrop-filter: blur(11px);
 83 |     border-radius: 12px;
 84 |     position: fixed;
 85 |     z-index: 1000000;
 86 |     top: 20px;
 87 |     right: 20px;
 88 |     padding: 3px;
 89 |     font-size: 24px;
 90 |     font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
 91 |       Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 92 |     animation: keys-zoom-in 50ms;
 93 |   }
 94 |   [data-keys][data-children="0"] {
 95 |     opacity: 0;
 96 |   }
 97 |   [data-keys] [data-key] + [data-key] {
 98 |     margin-left: 10px;
 99 |   }
100 |   [data-keys] [data-key] {
101 |     height: 58px;
102 |     min-width: 58px;
103 |     padding: 26px;
104 |     display: flex;
105 |     justify-content: center;
106 |     align-items: center;
107 |     color: #2e2e2e;
108 |     background: #ffffff;
109 |     background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,245,205,1) 10%, rgba(255,208,173,1) 100%);
110 |     border-radius: 4px;
111 |   }
112 |    @media (prefers-color-scheme: dark) {
113 |     [data-keys] {
114 |       display: flex;
115 |       background: rgba(255, 255, 255, 0.5);
116 |       backdrop-filter: blur(11px);
117 |       border-radius: 5px;
118 |       position: fixed;
119 |       z-index: 1000000;
120 |       top: 20px;
121 |       right: 20px;
122 |       padding: 6px;
123 |       font-size: 24px;
124 |       font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
125 |         Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
126 |       animation: keys-zoom-in 50ms;
127 |     }
128 |     [data-keys] [data-key] {
129 |         height: 58px;
130 |         min-width: 58px;
131 |         padding: 26px;
132 |         display: flex;
133 |         justify-content: center;
134 |         align-items: center;
135 |         color: #ffffff;
136 |         background: #2e2e2e;
137 |         background: radial-gradient(circle, rgba(49,49,49,1) 0%, rgba(52,52,52,1) 10%, rgba(0,0,0,1) 100%);
138 |         border-radius: 5px;
139 |       }
140 | 
141 | 
142 |   @keyframes keys-zoom-in {
143 |     from {
144 |       transform: scale(0.9);
145 |     }
146 |     100% {
147 |     }
148 |   }
149 | }
150 | `;
151 | 
152 | const insertCSS = () => {
153 |   const cssExists = document.head.querySelector("#keyscss");
154 |   if (!cssExists) {
155 |     const cssContainer = document.createElement("style");
156 |     cssContainer.id = "keyscss";
157 |     document.head.append(cssContainer);
158 |     cssContainer.append(css);
159 |   }
160 | };
161 | 
162 | const ensureContainer = () => {
163 |   let container = document.querySelector("[data-keys]");
164 | 
165 |   if (!container) {
166 |     container = document.createElement("div");
167 |     container.setAttribute("data-keys", "");
168 |     document.body.append(container);
169 |     return container;
170 |   } else {
171 |     return container;
172 |   }
173 | };
174 | 
175 | const render = () => {
176 |   const container = ensureContainer();
177 | 
178 |   if (keys.length === 0) container.outerHTML = ``;
179 |   else {
180 |     container.outerHTML = `
181 |       <div data-keys>
182 |         ${keys.map((key) => `<div data-key>${key}</div>`)}
183 |       </div>
184 |     `;
185 |   }
186 | };
187 | 
188 | if (typeof window !== "undefined") {
189 |   window.addEventListener("keydown", handler);
190 |   insertCSS();
191 | }
192 | 


--------------------------------------------------------------------------------
/showkeys/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "manifest_version": 3,
 3 |   "name": "Show Keys",
 4 |   "version": "1.0.5",
 5 |   "description": "Show keys as you type",
 6 |   "content_scripts":[
 7 |       {
 8 |         "matches":["<all_urls>"],
 9 |         "js":["index.js"]
10 |       }
11 |   ],
12 |   "background": {
13 |     "service_worker": "background.js"
14 |   },
15 |   "action": {
16 |       "default_icon": {
17 |           "128": "showkeys_128.png"
18 |       },
19 |     "icons": {
20 |       "16": "showkeys_16.png",
21 |       "32": "showkeys_32.png",
22 |       "48": "showkeys_48.png",
23 |       "128": "showkeys_128.png"
24 |     }
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/showkeys/showkeys_128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekBoySupreme/Show-Keys/4b5577c78354ff61ede326ed052a1785f34cd0a3/showkeys/showkeys_128.png


--------------------------------------------------------------------------------
/showkeys/showkeys_16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekBoySupreme/Show-Keys/4b5577c78354ff61ede326ed052a1785f34cd0a3/showkeys/showkeys_16.png


--------------------------------------------------------------------------------
/showkeys/showkeys_32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekBoySupreme/Show-Keys/4b5577c78354ff61ede326ed052a1785f34cd0a3/showkeys/showkeys_32.png


--------------------------------------------------------------------------------
/showkeys/showkeys_48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekBoySupreme/Show-Keys/4b5577c78354ff61ede326ed052a1785f34cd0a3/showkeys/showkeys_48.png


--------------------------------------------------------------------------------
/showkeys/showkeys_blue_16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekBoySupreme/Show-Keys/4b5577c78354ff61ede326ed052a1785f34cd0a3/showkeys/showkeys_blue_16.png


--------------------------------------------------------------------------------
/showkeys/showkeys_blue_32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GeekBoySupreme/Show-Keys/4b5577c78354ff61ede326ed052a1785f34cd0a3/showkeys/showkeys_blue_32.png


--------------------------------------------------------------------------------