Today we’ll be building a right click block explorer plugin extension for google chrome. Why do this? I’ve been wanting something like this for a few months now. I’m sure that different individuals have made extensions that were available on the chrome store to share this feature with you, but this is Bitcoin. I don’t like the idea of having an app extension that is specifically geared towards Bitcoin on a computer that I use to store some Bitcoin (spending money Bitcoin – smaller than my cold-wallet but larger than the spending money on a phone’s wallet). I’m paranoid that an app update would come around designed to hijack my private keys. Therefore, I made this mini extension that allows you to Right Click and open a bitcoin address in your favorite block explorer….why is this better than simply using Right Click Lookup? Well, Right Click, Lookup, will take you to a default search using that bitcoin address – if it’s cached then you can click on a block-explorer link on that result page – but now you have wasted a page load on that search engine result page. Use this extension to save time and skip that step! I’m not going to release this on google play store because it would be better that you build a tool like this yourself and KNOW there’s no bugs, trackers, malware, nor rootkits embedded…Let’s Begin.
Chrome plugins are made using Javascript. You don’t need to know programming or software development to follow/use this tutorial, but it would certainly help you make sense of things (particularly towards the end of this writeup) First create a new folder to hold your plugin files. In order for this to work you will need to make at least two files (with a 3rd image icon file as optional). Create your first file – call it manifest.json. The manifest.json file is used to name and declare the this extension so that Chrome knows how to load and use it. The file as you can see by the extension is a JSON formatted file (not unlike a .config file.) Your extension requires that you define a Name, Description, Version, Permissions, Background options, the Manifest Version and to define an icon name and location (should you choose to.)
{
"name": "Right Click BTC Address",
"description": "Reading is Fundamental",
"version": "1",
"permissions": [
"contextMenus",
"tabs"
],
"background": {
"persistent": false,
"scripts": ["sample.js"]
},
"icons": {
"16": "bitcoin_icon.png"
},
"manifest_version": 2
}
Explanation: Name, Description, and Version can be whatever you want – they are for your reference. “permissions” defines what features your plugin is allowed to utilize – for our purposes we need to enable contextMenus and tabs. (CaSe SeNsEtIvE: pay attention to the camelCaseFormatting) “background” has an option called persistent – this simply tells chrome whether or not we want the computer to keep the script running in memory at all times or if we only want it to run when needed. Set persistent to False so that it only runs when needed. “scripts” is used to define our 2nd file which actually holds the logic needed to make our lookup happen. the straight brackets [ ] denominate that this is an array which means we could define several scripts if desired (fyi). “manifest_version” specifies the version format of this manifest.json file – just set that to 2.
(Optional) Chrome extension icons come in three sizes – but for our purposes you only need the tiny 16 pixel by 16 pixel icon so that it appears next to our Right Click menu feature. Find your favorite bitcoin graphic and resize it to 16×16 then save it. Now, make an “icons” section. Fill in the size and the name of the image. Save the icon image and the manifest.json file in the same folder.
Finally, we create the actual script itself, name it whatever you want, I’m calling mine sample.js.
function onClickHandler(info, tab) {
var btcAddr = info.selectionText;
var btcURL = "https://btc.blockr.io/address/info/" + btcAddr;
chrome.tabs.create({'url': btcURL }, function(tab) {
// Tab opened.
});
};
chrome.contextMenus.onClicked.addListener(onClickHandler);
chrome.runtime.onInstalled.addListener(function() {
var id = chrome.contextMenus.create({"title": "Scan %s",
"contexts": ["selection"],
"id": "context" + "selection"});
});
Explanation: We begin the script by creating a Click-Handler Function. This function requires an info object and a tab object (these are defined by Objects generated from the Chrome browser). Within that function we first create a variable, btcAddr which stores our text from the selection. Now we create a 2nd variable named btcURL – I bet you can guess what that’s for! Enter in your favorite block explorer of choice and wrap it in quotes (this is known as a string. Strings are interpreted as text). at the end of that string you see the + sign? That means combine the strings to form one (technically it’s called concatenation). This will combine the BTC address on the end of the URL string so that your plugin can generate the link on the fly. Now that our custom URL has been formed, we can create a new browser tab and pass the URL into this created tab by using chrome.tabs.create(). We pass in our url : btcURL and make the script actually execute using an anonymous function that takes that same tab we’ve put together as a parameter requirement.
So we’re done now right???? Not Quite; We’ve only built the onClickHandler – we need to now build an event listener so that the extension knows when it should run that onClickHandler. chrome.contextMenus.onClicked.addListener() does the job – we simply pass in our onClickHandler and it does the rest.
Now we’re done….right?????? Couple more steps, but we’re almost there I promise! We need to build a constructor that actually makes the Right click menu feature appear. To do this, Chrome requires that we make a variable using chrome.contextMenus.create(). As you can see, this constructor requires a couple “key”:”pair” settings, notably the “title” (the text actually shown for your feature), “contexts” which is an array (we see the square brackets again) of the different features (for this simple plugin we only need “selection”), and finally the “id” of this specific feature within the plugin – rendered using “id”: “context” + “selection” (there’s that concatenation again!) That’s it! Save your javascript file in the folder with your icon and manifest.json.
Implementation: Open your Chrome Browser and get to your extensions by clicking or typing in this link: chrome://extensions/. Now on your computer, go to your created files…navigate up one level so that you can see the folder itself. Click and hold to ‘drag’ and ‘drop’ the entire folder into the extensions window – chrome will popup a small white box that says “Drop to Install”, do it. Congratulations, you can now right click to scan bitcoin addresses! Feel free to Right Click on the extensions icon at the top near the address bar and click “Hide in Chrome Menu”… it doesn’t work there anyway – only on addresses
Final thoughts: I’ve looked again just now and see that duckduckgo provides a way to see balances built into their search engine – Not sure if that’s a recent change or its been around for a minute…oh well. Anyhow, what I’ve shown you today is just scratching the surface on what you could potentially build. For instance, if you wanted, you could EASILY build a tipping mechanism that integrates with your wallet – pass the address with a predefined amount using a bitcoin style uri like:
bitcoin:1Kmib4CidHnpKh2dge68yzaH1aviB7DjxR?amount=.00034&label=Frankenmint’s%20test and form the btcURL such that btcURL = “bitcoin:” + btcAddr + ”?amount=0.0002…”; Now you simply right-click Send Tip – and it would pre-fill the information in for you. You could really get fancy with it and store the URL itself within the Label so that you have a detailed track record of who was tipped and when. Maybe you’re a power user – a cryptocurrency day-trader and you would rather have the ability to do this with Lightcoin, or maybe even with Lightcoin, Ethereum, Decred, NuBits, and more???? No problem! collect all your various block-explorer urls for each of the currencies you wish to track. From there, you would str.substring() to save the first character of the address into its own variable. You would then run a case(switch) statement for that character to figure out which coin it is…in each case you would then execute the onClickHandler with the url parameter specified each time on a case by case basis.
