The SteemSwitch taskbar buttons now work!steemCreated with Sketch.

in utopian-io •  7 years ago  (edited)

Screenshot_20171026_164713.png

SteemSwitch now has a stylish taskbar menu so it can allow you to switch between Steemit and the mirror sites Chainbb and Busy, without having to inject an ugly menu onto your pages. It also allows you to quickly analyse a post, tag or user with steemd or steemdb with the click of a button.

The code behind the buttons

@dana-varahi previously shared her design for the menu, so my work was to get them to actually perform the necessary actions. I'm still new to Firefox WebExtension programming, so this was a bit of a learning process for me. After going down a few dead ends I finally found the way I needed to go.

You can see my commit with the change of functionality on github. I removed the old code that inserted the links to the top of the pages, and added the menu.js code so that a new tab could be opened from the taskbar menu.

I amened Dana's links in the menu to spans, and altered the css accordingly. This was to stop the links opening extra tabs with the site front pages.

The code in menu.js is pretty straight forward, at least was once I discovered that the code inside the gettingActiveTab.then((tabs) => { ... } was run asynchronously and the menu couldn't be closed until it had finished! It got a little frustrating for a few days before I learned that!

The code adds a listener to the page looking for clicks. It then checks if the click is on a button, indicated by checking if the clicked element has the css style class of steemswitch. The rest of the code only runs if this is so.

The code works out the destination hostname from the button text. Then it selects the active tab and retrieves its url. It replaces the hostname of the current tab with that of the button selected and uses this new url to open the new tab. Finally it closes the menu.

New version is now available from the Firefox Add-ons menu

You can now install the taskbar menu version direct from the Firefox Add-on menu. If you already installed the old version, it should update soon if it hasn't already. You can press 'check for updates' if you want to try it now.

Otherwise you can simply search the Add-on store for 'SteemSwitch'.

Step 1: Start the download

Screenshot_20171026_170616.png

Once you have found the SteemSwitch Add-on page, press 'Add to Firefox' button. This will start the install process.

Step 2: Confirm access to tabs

Screenshot_20171026_170813.png

SteemSwitch needs the 'browser tabs' permission in order to access the currently selected url, in order to modify it for your selected destination. It also needs this permission to open the new tab. Press 'Add' if you agree to grant SteemSwitch this permission.

That is it!

Screenshot_20171026_170904.png

You should now see a confirmation message that SteemSwitch is installed, and you should also see the logo in the taskbar! Clicking on this logo opens the menu.

Screenshot_20171026_164713.png

Using the menu is easy and intuitive. If you have any feature requests, bug reports or questions, please feel free to add these directly to our github issue tracker, or simply leave a comment on this post...


Open Source Contribution posted via https://utopian.io

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Thank you for the contribution. It has been approved on Utopian. Can you also add a direct link to the firefox add-on in Step 1?

[utopian-moderator]

Thanks. I have added the link! Thanks for spotting that it was missing.

awesome contribution my friend :)
[utopian-moderator]

This is lovely @antonchanning56OP

This is a great achievement. Keep it up

56OP? What does that mean?

I'm glad you like SteemSwitch. How are you finding using it?

Hey @antonchanning I am @utopian-io. I have just super-voted you at 61% Power!

Achievements

-I am a bot...I love developers... <3
-Good amount of information. Thank you!
-A very informative contribution. Good job!
-You have a good amount of votes on your contributions. Good job!
Up-vote this comment to grow my power and help Open Source contributions like this one.

What percentage of the reward is supposed to go to the open source contributor? Because it looks like 0% right now.

Steemdb is showing my pending reward for this post as $0.00. https://steemdb.com/@antonchanning/posts

It looks like 100% of the post reward is going to a list of beneficiaries: https://steemd.com/utopian-io/@antonchanning/the-steemswitch-taskbar-buttons-now-work @cryptoctopus, @elear, @freedom, @furion, @javybar, @johnsmith, @transisto and @xeldal.

This is a pretty serious bug, and one that makes it pointless for open source contributors to share their work on utopian. Hope you can fix this soon!