How to create Context Menu shortcuts

how-to-create-context-menu-shortcuts.markdown

How to create Context Menu shortcuts

How to create Context Menu shortcuts

A Pen by Calvin on CodePen.

License.

index.html

<img src="https://imgeasy.com/images/0e39c6c6a5c1b2b743f8f402c28fd0d2.png" class="no-img-style" alt="menus">
<h1>How to create Context Menu shortcuts</h1>
<div class="tags">Windows, Scripting, Productivity, Context Menu, Shortcuts, Dev Tools, Utility, Software Development</div>


<p class="intro-hook">Have you ever thought about having some utility, at a click of a button, a tool that assists you in your work? Something that would help your productivity, and not impeed or hinder your progress? How about something to help you shortcut part of the process and simplifies a step?
	<BR><BR>
	Creating a 'Windows Context Menu' shortcut might be a strategy that you can use and easily integrate into your process. It's much simpler than you may think, let me show you how.
</p>

<img src="https://imgeasy.com/images/1119aef674352c5d0b631b68f7073f16.png" alt="">

<p>There's a context menu shortcut that I like to use often for my projects but with this guide you can create whatever you need with a few components.
	<BR><BR>
	First let me tell you what my script does. The shortcut I use allows me copy every filename within a folder. All I do is right-click anywhere inside my folder and select the option "Copy all Filenames". Then the command runs a script that copies every file name (this script does not include folders, though you can change that if you wish) and allows me to paste those file names + extensions, where I may need to paste them.
	<BR><BR>
	Here's an example output:
	<img src="https://imgeasy.com/images/34f17e89714999d34978fb35b30d0dd2.png" alt="">
</p>
<p>I kept this script simple to suite my needs, but you can do much more advanced things with this script, using a few modifications; including getting the entire size of the files, the date it was created or modified, and anything else you may dream up. For now I'm going to try and keep it simple.
</p>

<p>
<h2>Getting Started</h2>
So to get started open "Registry Editor" / "regedit".
<img src="https://imgeasy.com/images/c791d32e50d8801b680f0dabf8ba9360.png" alt="">
</p>
<p>There is a lot of things you can do to create issues with your computer in "Regedit" so please be careful. As long as you follow along and don't delete anything important, you'll be fine!

	<BR><BR>
	The next step is to navigate to the path below within "Regedit", sort of like how you use the input in a browser to go to website URL, you can type or copy/paste the path below, to the top bar of the program and press enter. 
	<BR>
	<div class="easycopy_area">
			<input type="text" class="code" id="easycopy1" value="Computer\HKEY_CLASSES_ROOT\Directory\Background\shell\">
				<button onclick="easycopy1()">Copy Path</button>
		<div id="easycopy1Copied" class="hide">Copied!</div>
	</div>
</p>

<p><img src="https://imgeasy.com/images/addb0b311b71f7c63afe02d1f3ecdb3c.png" alt="">
	You should see some of the defaults when you land there, such as 'cmd', 'Powershell', and maybe programs you've installed that have Context Menu shortcuts, in my case, 'VSCode'.</p>

<p>
	Next we'll create a new sub-folder 'Key' under 'shell'. First, select the 'shell' folder on the left directory menu, then right-click, and go to the menu option 'New' then in the sub-menu: 'Key'. <img src="https://imgeasy.com/images/a87fe7cc12811d43a4c7a683181c8051.png" alt=""></p>

<p>I named my new key 'copyfilenames'. Note: This new Keys name will be our shortcut/commands name, when we open the 'Context Menu'.<img src="https://imgeasy.com/images/a87fe7cc12811d43a4c7a683181c8051.png" alt=""></p>

<p>
	Select your commands name, then within the right side of the program, right-click and create a new Key. Then, edit the name of this new sub-Key, 'Command'.
	<img src="https://imgeasy.com/images/28c50349040143924d71b72224f07b14.png" alt="">

</p>

<p>Within the 'Command' key, right-click the '(Default)' String Value, and click 'Modify'.
	<img src="https://imgeasy.com/images/23cd4e304e58a60378374f32a8cd1d32.png" alt="">
</p>
<p>We want to modify this value to add the script that allows us to copy all the filenames, so when we right-click and open our Context Menu within Windows Explorer / a folder, we will be able to select the option, then run the command.

	<img src="https://imgeasy.com/images/15c423181c146f9ec82c412bb763ea28.png" alt="">

	<div class="easycopy_area">
			<input type="text" class="code" id="easycopy2" value="cmd /c dir /b /a:-d /o:n | clip">
				<button onclick="easycopy2()">Copy Value Data</button>
		<div id="easycopy2Copied" class="hide">Copied!</div>
	</div>
</p>

<p>
	Once you press 'OK', you can test if it works, by right-clicking into a folder - with files, and viewing the context menu. There should be your new option there for us to click on. Left-click the command and test it out! Paste into your favorite text editor, like Notepad.
	<img src="https://imgeasy.com/images/a513b8ccee7092096b417a73e0e21d0d.png" alt="">
	<img src="https://imgeasy.com/images/228adee131ff3bbc25031b8aaada01e8.png" alt="">
</p>

<p>
<h2>Congrats!</h2>
We've successfully created a command for our Context Menu, that will allow us to copy all of the filenames within a folder. But we can do a few more things to clean up our command and make it easier to understand what it will do, when we click on it.
<ul>
	Let's do two more things to make this a cleaner looking context menu option.
	<li>Rename the Command; to something easy to understand</li>
	<li>Add an icon to the command; to something related to the function</li>
</ul>
</p>

<p>
<h2>Two More Things</h2>
Click on the main Key, the one called 'copyfilenames'. Since this is what we see within the context menu, let's rename it to something better, I'm going to use: 'Copy all Filenames'. In "Registry Editor", right-click the Key and click 'Rename'.
<img src="https://imgeasy.com/images/3d9f56671cf333318abc17880d7713e5.png" alt="">
</p>

<p>
	Our first task is complete, it looks better already. Test it out, in your own Context Menu.
	<img src="https://imgeasy.com/images/add809f2997bd23ae3a414a5ef169ca0.png" alt="">
</p>

<p>
	Next, let's add an icon. Windows gives you a lot to choose from and they're nested within '.dll' files, that are used by the operating system. Click into the freshly named, 'Copy all Filenames' key, and this time create a new 'String Value'.
	<img src="https://imgeasy.com/images/97712b2e1469161228fea0d687f6a33f.png" alt="">
	Name this new string, 'Icon'.
	<img src="https://imgeasy.com/images/1091c38d0a120f842da868157a9877f7.png" alt="">
</p>

<p>
<h2>Where are the Icons?</h2>
Before we add the icon, first, let's talk about the '.dll' files we have at our disposal. I found a great website that educated me on what we can use and maybe you'll find it useful too. <a href="https://www.digitalcitizen.life/where-find-most-windows-10s-native-icons/">Windows icons locations. Where are the default icons found?</a>
<BR><BR>Here's a few snippets from their article, of what we can use to add icons:
<BR><img src="https://imgeasy.com/images/8bbc14a496e3bdc8949f5e019953c191.png" alt="">


	<div class="easycopy_area">
			<input type="text" class="code" id="easycopy3" value="%systemroot%\system32\pifmgr.dll">
				<button onclick="easycopy3()">Copy pifmgr.dll path</button>
		<div id="easycopy3Copied" class="hide">Copied!</div>
	</div>
<BR><BR>

<img src="https://imgeasy.com/images/b0b56360593b058550286a96ef81987d.png" alt="">


	<div class="easycopy_area">
			<input type="text" class="code" id="easycopy4" value="%systemroot%\system32\shell32.dll">
				<button onclick="easycopy4()">Copy shell32.dll path</button>
		<div id="easycopy4Copied" class="hide">Copied!</div>
	</div>
<BR><BR>

<img src="https://imgeasy.com/images/0df93e00b063216d6d119f61e3e603b7.png" alt="">

	<div class="easycopy_area">
			<input type="text" class="code" id="easycopy5" value="%systemroot%\system32\moricons.dll">
				<button onclick="easycopy5()">Copy moricons.dll path</button>
		<div id="easycopy5Copied" class="hide">Copied!</div>
	</div>
</p>

<p>
<h2>Adding an Icon</h2>
These are some examples to get us going and there's plenty to choose from. Explore other '.dlls' or figure out how to create your own. So let's add the '.dll' path and see what icon appears; right-click and modify the 'Icon' string.
<img src="https://imgeasy.com/images/8501218e707299d05e62bb3c91ce81c2.png" alt="">
Next, paste in the '.dll' path you chose, I've gone with '%systemroot%\system32\pifmgr.dll'.
<img src="https://imgeasy.com/images/677effe53c5f1d95e60b71a0e17db11a.png" alt="">
Again, the ever important step - let's test what happens:
<img src="https://imgeasy.com/images/22e82ea2aaa7da9ba884778278405a1c.png" alt="">
</p>
<p>That is an interesting icon, but I wanted something different. So our next question is, How can we target specific icons within the '.dll' files?
<ul>This is a two part question, let's break it down:
	<li>What do we need to type to target the icon in the data that we add to the string value.</li>
	<li>What can we use to find the icon we want?</li>
</ul>
</p>

<p>
<h2>Using a Specific Icon</h2>
For the first part of the question, to target the icon in the data, all we need to add is a comma, followed a '-' by the icon ID.<br><br> This looks something like, "%systemroot%\system32\pifmgr.dll, -100"
<BR><BR>We're shown this icon when we add the '.dll' because by default it will use the first id.
</p>
<p>
<h2>Resource Hacker</h2>
For the second part of the question, a tool we can use to find the icon IDs inside of the '.dll' file, is called "Resource Hacker".

<BR><BR>
A quick description of "Resource Hacker" is: A GUI decompiler, which will enable us to view resources in executables (*.exe; *.dll; *.scr; etc). There are other uses, such as CLI functionality, but all we need to use it for is to view icons ids, within the '.dlls'.

<img src="https://imgeasy.com/images/fcf2374c67de4d7666cf3506c969890c.png" alt="">You can download "Resource Hacker" at this link: <a href="http://www.angusj.com/resourcehacker/#download">http://www.angusj.com/resourcehacker/#download</a>

</p>

<p>
	With "Resource Hacker" let's explore the icons in this file: "%systemroot%\system32\pifmgr.dll"<BR>

	<img src="https://imgeasy.com/images/37736f6d57cdee13fcbc42f9065e582b.png" alt="">
	This might be good, if we were making a context menu for some Stock Market project.<BR><BR>
	<img src="https://imgeasy.com/images/7bc5cde4133d0082db61d1895649d29a.png" alt="">
	This might be good, if we were making a context menu for some 'Big Apple' project.<BR><BR>
	<img src="https://imgeasy.com/images/2a006f53e72eaef6c9312a5ee46283b5.png" alt="">
	This one feels right for a file name copier command.
	<BR>
</p>
<p>
<h2>Finally</h2>
So we found the icon we want to use, the id of that filing cabinent is '15'. To use that id of 15, we need to add ", -15" at the end of our '.dll' path and test it.
<BR><BR>
So click in to your String Value one last time, and modify it, and append ",-15" to the end of the path. Note: if you used a different '.dll' you won't see the same icon.

<img src="
https://imgeasy.com/images/a2c90393ea1771e7e8dc557edafbd729.png" alt="">
	<div class="easycopy_area">
			<input type="text" class="code" id="easycopy6" value="%systemroot%\system32\pifmgr.dll, -15">
				<button onclick="easycopy6()">Copy pifmgr.dll,-15 path</button>
		<div id="easycopy6Copied" class="hide">Copied!</div>
	</div>
<BR><BR>
And as always, Test!
<img src="https://imgeasy.com/images/1119aef674352c5d0b631b68f7073f16.png" alt="">
</p>
<p>
<h2>Just the Begining</h2>
This is just an example of what you can do. There are a ton of possiblities and ways to improve your productivity through a little creativity, within the Context Menu, here are a few more ideas:<BR><BR>
<li>Rename every file in a folder</li>
<li>Open Command Prompt and 'cd' / Change Directory to the current folder</li>
<li>An option for Defraging a Drive</li>
<li>Open any type of text document in Notepad</li>
<li>Quick launch a Python Script, Program, or Batch file</li>
<BR>
Go make your work & life easier!
</p>

script.js

function easycopy1() {
  /* Get the text field */
  var copyText = document.getElementById('easycopy1');
	
  /* Select the text field */
  copyText.select();
  copyText.setSelectionRange(0, 99999); /* For mobile devices */

   /* Copy the text inside the text field */
  navigator.clipboard.writeText(copyText.value);

  /* Alert the copied text */
  // alert("Copied the text: " + copyText.value);
  	easycopy1Copied.classList.toggle('fade');
}

function easycopy2() {
  /* Get the text field */
  var copyText = document.getElementById('easycopy2');

  /* Select the text field */
  copyText.select();
  copyText.setSelectionRange(0, 99999); /* For mobile devices */

   /* Copy the text inside the text field */
  navigator.clipboard.writeText(copyText.value);

  /* Alert the copied text */
  // alert("Copied the text: " + copyText.value);
  	easycopy2Copied.classList.toggle('fade');
}

function easycopy3() {
  /* Get the text field */
  var copyText = document.getElementById('easycopy3');

  /* Select the text field */
  copyText.select();
  copyText.setSelectionRange(0, 99999); /* For mobile devices */

   /* Copy the text inside the text field */
  navigator.clipboard.writeText(copyText.value);

  /* Alert the copied text */
  // alert("Copied the text: " + copyText.value);
  	easycopy3Copied.classList.toggle('fade');
}

function easycopy4() {
  /* Get the text field */
  var copyText = document.getElementById('easycopy4');

  /* Select the text field */
  copyText.select();
  copyText.setSelectionRange(0, 99999); /* For mobile devices */

   /* Copy the text inside the text field */
  navigator.clipboard.writeText(copyText.value);

  /* Alert the copied text */
  // alert("Copied the text: " + copyText.value);
  	easycopy4Copied.classList.toggle('fade');
}

function easycopy5() {
  /* Get the text field */
  var copyText = document.getElementById('easycopy5');

  /* Select the text field */
  copyText.select();
  copyText.setSelectionRange(0, 99999); /* For mobile devices */

   /* Copy the text inside the text field */
  navigator.clipboard.writeText(copyText.value);

//   /* Alert the copied text */
//   alert("Copied the text: " + copyText.value);
	
  /* Alert the copied text */
  // alert("Copied the text: " + copyText.value);
  	easycopy5Copied.classList.toggle('fade');
}
function easycopy6() {
  /* Get the text field */
  var copyText = document.getElementById('easycopy6');

  /* Select the text field */
  copyText.select();
  copyText.setSelectionRange(0, 99999); /* For mobile devices */

   /* Copy the text inside the text field */
  navigator.clipboard.writeText(copyText.value);

//   /* Alert the copied text */
//   alert("Copied the text: " + copyText.value);
	
  /* Alert the copied text */
  // alert("Copied the text: " + copyText.value);
  	easycopy6Copied.classList.toggle('fade');
}

style.css

*{
	text-shadow:0 0 0 transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html,body{
	background:#eee;
	color:#222;
	font-family:sans-serif;
	margin:1em;
	padding:0;
	line-height:1.4;
}
a:link{
	color:#0089ff;
}
a:visited{
	color:#933b3b;
}
a:hovered,a:active{
color:#4d4dff;
}
h1{
	font-weight:bold;
	font-size:24px;
	margin:0;
}
h2{
	box-shadow:0 -.1em 0 #ccc;
	font-weight:bold;
	font-size:18px;
	margin:0 0 8px;
	padding-top:1em;
}
.tags{
	text-transform:uppercase;	
	color:#999;
	font-size:10px;
	margin:0 0 8px;
}
p{
	font-size:16px;
	margin:2em 0;
	max-width:50vw;
}
.intro-hook{
	padding:.64em;
	border:1px dotted #999;
}
img{
	height:100%;
	clear:both;
	display:block;
	margin:12px 0 16px;
	border-radius:0;
	border:1px solid #666;
	box-shadow:5px 5px 0 0 #cbcbcb;
}
.no-img-style{
	clear:both;
	display:block;
	margin:12px 0;
	border-radius:0;
	border:0;
	box-shadow:none;
}
input,
code{
	display:inline-block;
	color:#0e0081;
	border:0;
	background:#ccc;
	padding:.32em .64em;
	border-radius:0;
	box-shadow:inset 0 0 3px #999;
	min-width:30vw;
}
button{
	display:inline-block;
	color:#333;
	border:0;
	box-shadow:0 0 0 1px rgba(0,0,0,.25);
	border-radius:3px;
	padding:.24em .64em;
	cursor:pointer;
	transition:.3s all ease;
	background:#fff;
}
button:hover{
	background:#b9d1ff;
	box-shadow:0 0 0 1px rgba(0,0,0,1);

}
ul{
	margin:24px;
	padding:0;
	line-height:1;
}
ul li{
	margin-left:24px;
	list-style:disc;
	margin-top:8px;
}
i{
	font-style:italic;
	color:#888;
}
.hide{
	opacity:0;
	display:inline-block;
  transition: opacity 1s; 
	margin-left:5px;
	font-size:12px;
}
.fade {
  opacity: 1;
}
.easycopy_area{
	display:relative;
}