Surveillance Observatory Bookmarklet

This is a fun mix of Gravity Forms and a bit of javascript.

We’ve got the Surveillance Observatory here and some ways to contribute stories. Participation there is sub-optimal. Lots of reasons for that and a chunk that I can’t solve but I can make submitting coverage easier. I wanted it to feel more like pinboard or the original del.icio.us.

What I should have done was just look at my current pinboard bookmarklet but I didn’t think to do that until I started writing this post.

First, I needed to allow the form fields to be populated dynamically. There are lots of ways to do that but Gravity Forms has an easy built-in way. I wanted to use the query string option. So I went and named my fields. That lets me populate the field with a URL like this
https://aftersurveillance.net/observatory/bookmarklet/?title=FOO&url=https://bar.com/&summary=BUZZ

So now I need some javascript that gets the page title, the url, and whatever text is highlighted.

var currentUrl = window.location.href;//get url
var title = document.title;//get title
var text = '';
if(document.getSelection()){
  text = document.getSelection();//get any highlighted text
}

Now I want to open that same URL I made earlier as a popup window with those variables as URL parameters.

var currentUrl = window.location.href;
var title = document.title;
var text = '';
if(document.getSelection()){
  text = document.getSelection();
}
newUrl = `https://aftersurveillance.net/observatory/bookmarklet/?title=${title}&url=${currentUrl}&summary=${text}`;
window.open(newUrl,"", "width=400, height=600");

Now to turn it into a bookmarklet, I just used the Bookmarkleter tool.

That gives me this code which you can drag to your bookmark bar — log privacy event.

I put this form on a new page just for the bookmarklet. I did a bit of CSS to remove extra elements so the page would work better in a popup window. I used the post id to make sure these changes only applied to this page.

.page-id-159 #main-nav,.page-id-159 #right-sidebar {
	display: none;
}