Keychainify - Trigger a Steem Keychain transaction from clicks on SteemConnect links

in #utopian-io9 months ago (edited)

View this post on Hive: Keychainify - Trigger a Steem Keychain transaction from clicks on SteemConnect links




Most of you must already know and use Steem Keychain extension for Chrome desktop browser, if not then I recommend you to give it a go. Even is now supporting this extension for authentication your session on their website.

What Steem Keychain does is allow you to store your Private Keys inside the browser (AES encrypted) and will sign and broadcast transactions on behalf of the websites supporting it. What this means is your Private Keys will never leave your browser, the Dapps will not need to know about them. This is, thus, much safer.

For more details, please read the following posts:

New Features

In the following issue raised on Steem Keychain GitHub repository Allow Steem Keychain to be triggered by a click on a Steem Connect link #41, I've suggested that the extension should parse the content of the current page and see if there are any Steem Connects links and divert the link into a Steem Keychain event instead. For example, it would be nice when someone clicks on a SteemConnect transfer link, the extension prevents the browser from opening a new tab to SteemConnect but, instead, open a Steem Keychain popup with all the data pre-filled in the form.

Wouldn't that be nice? Well it will be soon possible, as my pull request has just been approved and merged.

On the following subscription page to @steemsql, you can see the "Click here to execute the transfer via Steem-Connect" and the URL shown at the bottom confirms that this is a SteemConnect link:
Screen Shot 2019-07-01 at 5.43.56 pm.jpg

Now if I click on that link, my local development version of Steem Keychain will Keychainify the link and this is what happened when I click on the link:
Screen Shot 2019-07-01 at 5.44.17 pm.jpg

Now all Steem Connect links are even safer than they were before 😉


Due to technical reasons in the implementation of Steem Keychain, Keychainify currently only supports transfer links. More details on the following GitHub issue: Allow username selection for delegations and witness vote requests #101. Once this issue and @eonwarped's Add username choice for sign buffer requests #92 are solved, then I will be able to also support delegation and witness vote links. But I think, transfer links are the most important ones so for now it's good enough.

Technical talks

This is a #development post so lets talk coding a little bit.

Let start with the simple changes. On @yabapmatt and @stoodkev's request, I've added a config settings in the extension so users can toggle the feature, this was obtained by simply adding some little HTML code into the popup file:

Screen Shot 2019-07-01 at 5.57.49 pm.jpg

This gives us this:

Screen Shot 2019-07-01 at 5.58.10 pm.jpg

Screen Shot 2019-07-01 at 5.58.16 pm.jpg

Screen Shot 2019-07-01 at 6.00.39 pm.jpg

This will save the settings in the extension's local storage as seen in the code above.

The more interesting bit is the content script. I've used a Mutation Observer, a Javascript feature that is not often used but that is very useful for extension such as my Steemed Phish which needs to parse the content every time something changes on the page (lazy loading of comments for example). The Mutation Observer allows me to only trigger my event handler when it is needed instead of executing it at regular set interval.

Screen Shot 2019-07-01 at 6.04.38 pm.jpg

The Mutation Observer handler will parse all anchor in the HTML source of the page and will try to parse any URL from, it will also add an HTML class named steem-keychain-checkedso that it will ignore links that were already processed in the past.

Screen Shot 2019-07-01 at 6.07.21 pm.jpg

The convertSteemConnectURL function calls the getVarsFromURlfunction to parse the parameters from the Steem Connect URL.

Screen Shot 2019-07-01 at 6.09.00 pm.jpg

Next step is to decide which Steem Keychain event to emit, so here is my switch(true) block.

Screen Shot 2019-07-01 at 6.10.46 pm.jpg

WTF is switch(true) will you be asking 😅. Usually, we use the switch statement with a variable and we check if it matches a certain value. Here I'm passing true as the switch value and I will check any statement that will be true, in this case, I'm checking if the URL contains which means this is a transfer link from Steem Connect. I find switch/case cleaner and more readable than a succession of if/else blocks.

Once a transfer link identified, we will dispatch a request to Steem Keychain like this:
Screen Shot 2019-07-01 at 6.18.51 pm.jpg

The code is already prepared for delegations and witness votes, but it has been disabled and will forward to Steem Connect in the mean time:
Screen Shot 2019-07-01 at 6.19.01 pm.jpg

I'm excited to see this pull request merged and I'm looking forward to see the new version of the extension released to the public.

GitHub Account


Thank you for your contribution. A great post with all the details as well as a nice addition to an awesome extension. I agree with you once you add delegation and witness vote links then you do not need steem-connect and users can fully rely on KeyChainify.

I did not know about Mutation Observer, might be because "a Javascript feature that is not often used", but once people will know its importance might be it will be used often.

The code is of high quality and it follows all best practices.

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.

Need help? Chat with us on Discord.


Thank you for your review, @codingdefined! Keep up the good work!

That is an unbelievably gooood PR! Can't wait for implementation.