Add edit button to Shopify page

edit-button-min.js

(function(){if(document.getElementById("admin_bar_iframe")){var d=function(a){"undefined"===typeof a&&(a="Sorry, that can not be run here...");console.warn(a);return!1},e=function(a,c){var b=new XMLHttpRequest;b.open("GET",a,!1);b.onreadystatechange=function(){if(4==b.readyState&&200==b.status&&"function"===typeof c){var a;a:{try{JSON.parse(b.responseText)}catch(e){a=!1;break a}a=!0}if(!a)return d("That does not look like json...");a=JSON.parse(b.responseText);c(a,Object.keys(a)[0])}};b.send()},c=
document.createElement("button");c.id="admin_bar_iframe";c.style="position: fixed;top: 70px;right: 1em;background-color: rgb(16, 206, 223);padding: .75em 1em;color: #FFF;cursor: pointer;border:none;z-index:99999";c.innerHTML="Edit This";c.addEventListener("click",function(a){a.target.blur();if("/"===location.pathname)return d();if("blogs"===location.pathname.split("/")[1])return"undefined"!==typeof __st&&__st.s?(location.href=[location.protocol,"//",location.host,"/admin/articles/",__st.s.split("-")[1]].join(""),
!1):d();e([location.protocol,"//",location.host,location.pathname,".json"].join(""),function(a,b){location.href=[location.protocol,"//",location.host,"/admin/",b+"s/",a[b].id].join("")});return!1});document.getElementsByTagName("body")[0].appendChild(c)}})();

edit-button.liquid

<script>
  (function(){

    if(!document.getElementById('admin_bar_iframe')){ return }

    var lang = {
      'no':'Sorry, that can not be run here...',
      'not_json':'That does not look like json...'
    };

    var isJson = function(a) {
      try { JSON.parse(a) } catch (e) { return false }
      return true;
    };

    var nope = function(a){
      if(typeof a === 'undefined'){ var a = lang.no }
      console.warn(a)
      return false
    }

    var getJsonPath = function(){
      return [location.protocol, '//', location.host,location.pathname,'.json'].join('')
    };

    var getJson = function(u,c){
      var req = new XMLHttpRequest();
      req.open('GET', u, false); 
      req.onreadystatechange = function() {
        if (req.readyState == 4 && req.status == 200) {
          if(typeof c === 'function'){
            if(!isJson(req.responseText)){ return nope(lang.not_json) }
            var json = JSON.parse(req.responseText);
            c(json,Object.keys(json)[0]);
          }
        }
      };
      req.send();
    };

    var button = document.createElement('button');
    button.id = 'admin_bar_iframe';
    button.style = 'position: fixed;top: 70px;right: 1em;background-color: rgb(16, 206, 223);padding: .75em 1em;color: #FFF;cursor: pointer;border:none;z-index:99999';
    button.innerHTML = 'Edit This';
    button.addEventListener('click',function(e){
      e.target.blur();
      if(location.pathname === '/'){ return nope() }
      if(location.pathname.split('/')[1] === 'blogs'){
        /* fallback to the tracking script data, should it exist */
        if(typeof __st !== 'undefined' && __st.s){
          location.href = [location.protocol, '//', location.host,'/admin/articles/',__st.s.split('-')[1]].join('');
          return false;
        }
        return nope()
      }
      getJson(getJsonPath(),function(a,b){
        location.href = [location.protocol, '//', location.host,'/admin/',b+'s/',a[b].id].join('');
      })
      return false;
    });
    document.getElementsByTagName('body')[0].appendChild(button);

  })()
</script>

@suture I made a change to the code that should help here along with removing as many dependencies as possible (and making it more of a js drop in without liquid edits needed). I've also added this to a repo so others can contribute.

Is there a way to hide the button from the general public? At the moment it seems to be visible to everyone.

Many thanks

I tested the above code, but the edit button is no longer appearing, even when logged in as an admin user.
I ended up doing it this way https://gist.github.com/suture/17e7568e10bd743de2e8999426c0a416