Repository
Repo: https://github.com/MattyIce/steem-keychain
PR: https://github.com/MattyIce/steem-keychain/pull/102
Context
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 https://steemit.com 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:
- Hate putting private keys into websites? Introducing Steem Keychain!
- Steemit's Security Values & How Steem Keychain Can Help
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:
https://steemsql.com/daily-subscription/
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:
Tada!
Now all Steem Connect links are even safer than they were before 😉
Roadmap
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:
This gives us this:
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.
The Mutation Observer handler will parse all anchor in the HTML source of the page and will try to parse any URL from steemconnect.com, it will also add an HTML class named steem-keychain-checkedso that it will ignore links that were already processed in the past.
The convertSteemConnectURL function calls the getVarsFromURlfunction to parse the parameters from the Steem Connect URL.
Next step is to decide which Steem Keychain event to emit, so here is my switch(true) block.
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 steemconnect.com/sign/transfer 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:
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:
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.