SteemSwitcher Chrome Extension

in #utopian-io6 years ago (edited)

SteemSwitcher Chrome Extension

The SteemSwitcher Chrome Extension is a new tool that allows you to switch between different sites on the Steem Blockchain quickly and with ease. Ever want to quickly look at a user on steemd? View a post on dmania without retyping the URL? Jump from a forum on ChainBB back to the corresponding tag on Steemit? SteemSwitcher will make that possible.

Demo Video

Switch between User Profiles

image.png

Switch between Posts

image.png

How Does it Work?

The extension is automatically run on all supported sites via a content-script injection. Once spun up, it looks at the current URL in full, and uses regex to parse the URL into its various components (tag, username, postname, base website, etc.)

...
    case "dmania.lol":
      if(urldata.path.match(/\/post\//)) {
        // Looking at a post
        var matches = urldata.path.match(/\/[a-zA-Z\-0-9@]+/g).map(s => s.substring(1));
        tag = "dmania";
        user = matches[1];
        postname = matches[2];
      }
      else if(urldata.path.match(/\/profile\//)) {
        var matches = urldata.path.match(/\/[a-zA-Z\-0-9@]+/g).map(s => s.substring(1));
        user = matches[matches.length - 1];
        // Looking at a user
      }
      break;
    case "d.tube":
      if(urldata.hash.match(/\/v\//)) {
        // Looking at a post
        var matches = urldata.hash.match(/\/[a-zA-Z\-0-9@]+/g).map(s => s.substring(1));
        tag = "dtube"
        postname = matches[matches.length - 1];
        user = matches[matches.length - 2];
      }
      else if(urldata.hash.match(/\/c\//)) {
        // Looking at a user
        var matches = urldata.hash.match(/\/[a-zA-Z\-0-9@]+/g).map(s => s.substring(1));
        user = matches[matches.length - 1];
      }
...

Once we have the parts that make up the URL, it is easy to generate all URLs that relate to a post or user. Then, we need to inject those URLs back into the page for the viewer to see.

function init() {
    chrome.runtime.sendMessage({
        msg: "request_generate_sister_urls",
        data: {
            host: window.location.host, 
            path: window.location.pathname,
            hash: window.location.hash
        }       
    }, function(response) {
        if ($('#contextmenu').length == 0) {
            $("body").append(`<div id="contextmenu"><ul></ul> </div>`)
        }
        $("#contextmenu ul").html("");
        if(response.sites.length == 0) {
            $("#contextmenu").addClass("hidden");
            $("#contextmenu ul").addClass("hidden");
        } else {
            $("#contextmenu").removeClass("hidden");
            $("#contextmenu ul").removeClass("hidden");
        }
        for(var i = 0; i < response.sites.length; i++){
            var it = (response.sites.length > 3) ? "user" : "";
            $("#contextmenu ul").append(`
                <li>
                    View ${it} on <a href="${response.sites[i].url}">${response.sites[i].name}</a>
                </l>`)
        }
    });
}

We offload all the URL calculations to a background page. In the future, this will make it easier to add settings, save user preferences, etc. Because of that, we must rely on Chrome's Message Passing runtime to communicate between the foreground context-script and the background process.

Since many Steem sites (Utopian.io, Busy, Steemit) are React Single Page Applications (SPAs), very often the URL will change without triggering a page event- which makes it difficult to track when we need to recalculate new URLs. I spent some time pondering this issue and decided the easiest thing to do was to just recalculate at a fixed interval, and it works pretty well so far - though if there was a way to peer into the React SPA's state that would be great.

What's Next?

  • Add user preferences
  • Add more sites to support
  • Get a cool logo

Proof of Work

image.png



Posted on Utopian.io - Rewarding Open Source Contributors

Sort:  

Thank you for the contribution. It has been approved.

Next step is to put this into Google Webstore.

You can contact us on Discord.
[utopian-moderator]

Hey @maxg I am @utopian-io. I have just upvoted you!

Achievements

  • You have less than 500 followers. Just gave you a gift to help you succeed!
  • Seems like you contribute quite often. AMAZING!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

mooncryption-utopian-witness-gif

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

Coin Marketplace

STEEM 0.35
TRX 0.12
JST 0.040
BTC 70753.86
ETH 3589.34
USDT 1.00
SBD 4.75