Making a javascript bookmarklet that POSTs current URL

July 15, 2017, at 1:09 PM

I'm trying to make a javascript bookmarklet that posts the current URL to my API. For example, something similar to what the Instapaper bookmarklet does. I wrote the following script, have passed it through a minifier and added it as the href to an <a> tag that I am using as the button. I want to be able to drag this tag to the bookmarks bar.

javascript: (function() {
  var url = document.location.href
  var uri = "http://localhost:3001/api/v1/links/bookmarklet?url=" + url + "&id=1"
  xhr = new XMLHttpRequest();"POST", encodeURI(uri));

Currently I am just testing this out on my local server at localhost:3001 and am running my app on localhost:3000. If I press the button whilst on my app (on localhost:3000) it does make the post request but it adds the script itself to address bar on top of the current url.


If I drag the button to the bookmarks bar and click it from another site, it redirects back to localhost:3000 and does the same thing. Am I missing something obvious here? I can't really find any instructions on the web on how to implement a bookmarklet to post a current URL.

The HTML looks like this:

  <a href='!function(){var e="http://localhost:3001/api/v1/links/bookmarklet?url="+document.location.href+"&id=1";xhr=new XMLHttpRequest,"POST",encodeURI(e)),xhr.send()}();' id="button">post link</a>

The incoming params for my Rails API look like this

<ActionController::Parameters {"url"=>"http://localhost:3000/!function()%7Bvar%20e=%22http://localhost:3001/api/v1/links/bookmarklet?url=%22 document.location.href %22", "id"=>"1", "xhr"=>"new%20XMLHttpRequest,,encodeURI(e)),xhr.send()}()", "format"=>:json, "controller"=>"api/v1/links", "action"=>"create_link_from_web"} permitted: false>

So it does post to the correct route in Rails but it's all messed up. Many thanks in advance for suggestions!

Answer 1

Your href attribute is considered a relative path without an explicit protocol in the string, e.g. http: or javascript:, etc. This is why it was prepending the origin domain to your URL string.

Keep in mind that bookmarklets do not work in all browsers, so make sure you're compatible with at least your target audience.

To correct this issue, change your HTML to

<a href='javascript:!function(){var e="http://localhost:3001/api/v1/links/bookmarklet?url="+document.location.href+"&id=1";xhr=new XMLHttpRequest,"POST",encodeURI(e)),xhr.send()}();' id="button">post link</a>
JS Regex removes &ldquo;too much&rdquo; off of textarea

JS Regex removes “too much” off of textarea

Working towards submitting a list of ID numbers to the DBThe JS is intended to add/remove the id # from each "tag" and save to the form

jsplumb - moving connectors?

jsplumb - moving connectors?

I'm using the demo of jsPlumb here: https://jsplumbtoolkitcom/community/demo/statemachine/index

JavaScript - Join arrays of an array with concat method instead of push method

JavaScript - Join arrays of an array with concat method instead of push method

I have a problem that asks me to join arrays of an array and return a single array in the form of [ array[0][0], array[0][1], array[1][0], array[1][1], etc]

Can I use PHP wordwrap in HTML canvas javascript

Can I use PHP wordwrap in HTML canvas javascript

I'm looking for a simple solution to be able to word wrap within a fixed rectangle in my canvas