Simple Bookmarklet Example

Drag the link below into your bookmark bar.

FvB Simple

Generating this bookmarklet

  rails g easymarklet:simple fvb_simple

You'll get a simple shell of a bookmarklet and a css file.

app/assets/javascripts/fvb_simple_bookmarklet.js

//= require easymarklet/simple

(function(){
  
  var FvbSimpleBookmarklet = {
    css : ['/assets/fvb_simple_bookmarklet.css'], // could be an array or a single string
    init : function(full_host){
      var div = document.createElement('div')
      div.id = 'fvb_simple_insert'
      div.appendChild(document.createTextNode('FvbSimple Insert'))
      div.onclick = function(){
        document.body.removeChild(div);
      }
      document.body.appendChild(div);
    }
  }
  
  window.FvbSimpleBookmarklet = FvbSimpleBookmarklet;

})();

var fvb_simple_simple = new Easymarklet.Simple(FvbSimpleBookmarklet);
fvb_simple_simple.init();

The EasyMarklet.Simple class will automatically include any stylesheets included in the css array.

app/assets/stylesheets/fvb_simple_bookmarklet.css

  #fvb_simple_insert{
  position:absolute;
  top:10px;
  left:10px;
  background:black;
  border:3px double white;
  color:white;
  padding:10px;
  -webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
  -moz-box-shadow:    7px 7px 5px rgba(50, 50, 50, 0.75);
  box-shadow:         7px 7px 5px rgba(50, 50, 50, 0.75);
}

Update the code

Then we just alter the code to give the user the option to submit the url to our app or not.

Note : Easymarklet sets a full_host variable that you can use to point back to your app.

//= require easymarklet/simple

(function(){
  
  var FvbSimpleBookmarklet = {
    css : ['/assets/fvb_simple_bookmarklet.css'], // could be an array or a single string
    init : function(full_host){
      full_host = full_host == undefined ? '' : full_host
      var div = document.createElement('div')
      div.id = 'fvb_simple_insert'

      var go = document.createElement('a')
      go.appendChild(document.createTextNode('Vote on the Foo V Baz status of this page.'))
      go.onclick = function(){
        var dest = full_host + "/pages/new?url=" + encodeURIComponent(document.location)
        document.location = dest;
      }

      var no = document.createElement('a')
      no.appendChild(document.createTextNode('Nevermind.'))
      no.onclick = function(){
        document.body.removeChild(div);
      }

      div.appendChild(go)
      div.appendChild(no)
      document.body.appendChild(div);
    }
  }
  
  window.FvbSimpleBookmarklet = FvbSimpleBookmarklet;

})();

var fvb_simple_simple = new Easymarklet.Simple(FvbSimpleBookmarklet);
fvb_simple_simple.init();

Link to the bookmarklet

The easymarklet_js helper function makes it easy to link to your bookmarklet in a template.

  <%= link_to 'FvB Simple', easymarklet_js('fvb_simple_bookmarklet.js') %>