Storing a HTTP POST request in a bookmark or something similar as you would with a GET request

You can store a bookmark with a GET request like this:

http://url.com/service?variable=value

Can you store a POST request in some way in Chrome? Maybe with a plugin? Or maybe in Firefox?

The idea is that I store this in a bookmark and fire it quickly instead of having to fill up a form every time.

Solution 1:

You can create a bookmarklet that uses JavaScript to send a POST request when clicked.

The following code sends a POST request with payload foo=bar to https://example.com by appending a form to the currently active page and then submitting it:

post('https://example.com', { foo: 'bar' })

function post (url, formData) {
  const h = (tag, props) => Object.assign(document.createElement(tag), props)
  const form = h('form', { action: url, method: 'post', hidden: true })
  for (const [name, value] of Object.entries(formData)) {
    form.appendChild(h('input', { name, value }))
  }
  document.body.appendChild(form)
  form.submit()
}

To use it as a bookmarklet, just set the following as the target of a bookmark (replacing the URL and form data appropriately):

javascript:post('https://example.com',{foo:'bar'});function post(a,b){const c=(e,f)=>Object.assign(document.createElement(e),f),d=c('form',{action:a,method:'post',hidden:true});for(const[e,f]of Object.entries(b))d.appendChild(c('input',{name:e,value:f}));document.body.appendChild(d),d.submit()}

which is simply javascript: followed by the code from above in minified form.

Solution 2:

The idea is that I store this in a bookmark and fire it quickly instead of having to fill up a form every time.

For this purpose, the following HTML page will do. It should work in most browsers.

<html>
    <head>
        <title>getToPost</title>
        <script>
            function getToPost()
            {
                var form = document.getElementsByTagName('form')[0];
                form.style.visibility = 'hidden';
                form.action = document.location.hash.substr(1);
                var search = decodeURIComponent(document.location.search);
                search = search.substr(1).split('&');
                for(var i = 0, j = search.length, input; i < j; i++)
                {
                    input = document.createElement('input');
                    search[i] = search[i].split('=');
                    input.name = search[i][0];
                    input.value = search[i][1];
                    form.appendChild(input);
                }
                form.submit();
            }
        </script>
    </head>
    <body onload="getToPost()">
        <form method="POST"></form>
    </body>
</html>

Save it as C:\getToPost and you can bookmark the following URL:

file:///C:/getToPost?name1=value1&name2=value2#http://url.com/service

You'll be able to use most characters in names or values literally. Encode the following as usual:

#   ->   %23
%   ->   %25
&   ->   %26
=   ->   %3D

Storing a HTTP POST request in a bookmark or something similar as you would with a GET request

Solution 1:

Solution 2:

Related

Recent Posts