Chrome browser plugin for showing Steemit voting power

Repository

https://github.com/AnatoliyStrizhak/steemit/tree/master/voting_power

Introduction

Hello, everybody. I know that there are enough services to learn your Voting Power, for example steemd.com or busy.org, but I like the usual Steemit interface (in night mode), so I decided to make my own chrome browser plugin wich embeds votting battery in top menu of steemit.com

Some details

The heart of the plug-in was the js library steem-js. I think it does not need a presentation.

The algorithm of operation is quite simple. When switching to steemit.com, an additional element with Id pwr is created by plugin in the top menu and the function get_pwr is called, which refers to api steemit via steem.js.

if(location.hostname.match(/steemit.com/i) && document.getElementById("content") && document.getElementsByClassName("small-7 large-4 columns Header__buttons"))
{
    var node = document.createElement("div");
    node.id = "pwr";
    node.innerHTML = "<img src="+bat1+" id='pwr_img' style='height:20px! important; margin-left:10px;' title=''&rt;";
    document.getElementsByClassName("small-7 large-4 columns Header__buttons")[0].appendChild(node);
    get_pwr();
}

Depending on the voting power level, the corresponding image of the battery is substituted (bat1, bat2, bat3). The images themselves are stored in variables as base64 strings.

function get_pwr()
{
    steem.api.getAccounts(['astrizak'], function(err, response){
        var res=response[0]['voting_power']/100;

        if(res<60) {document.getElementById('pwr_img').src = bat3;}

        if(res>70){document.getElementById('pwr_img').src = bat2;}

        if(res>90){document.getElementById('pwr_img').src = bat1;}

        document.getElementById('pwr_img').title = res+"%";
    });
}

In addition, for the created pwr element, the plugin adds a click event handler and when you click on the battery image, the function get_pwr is called again, to update the voting power status.

document.addEventListener('click', function(e) {
    var target = e.target
    currentItem = target.parentElement;
    if (currentItem.id == "pwr")
    {
        get_pwr();
    }
}, false);

To install the plugin, it is enough to save the contents of the repository. Next, you need to change the username of steemit user in the function get_pwr in steem api call ( steem.api.getAccounts (['astrizak'] ).

Then go to the browser menu Extensions, click "Load Unpacked extension" and specify the location of the plug-in. Well, in addition, you can select the option "Hide from toolbar", since the icon in the browser panel does not carry any load (for now).

That's all. The code is very simple. Anyone who wants to use my solution can easily modify it for his own needs.

In future, I plan to add automatic voting power status updates and maybe will add some sort of config menu to enter username and vp status thresholds.

Thanks for reading. I will be happy if my work is useful to someone.

Resources

https://github.com/steemit/steem-js