<h1>JS to URI link</h1>

<p>Use this utility to inject custom javascript into webpages by clicking a bookmark link!</p>

<div class="box">
  <div>
    <h2>Paste your JS here</h2>
    <textarea name="code" id="input" cols="30" rows="10">console.log('Hello world!')</textarea>
  </div>
  <div>
    <h2>Output URI</h2>
    <p>Drag and drop this in your bookmark bar</p>
    <a href="" id="output">Drag this!</a>
  </div>
</div>
textarea {
  width: 100%;
  height: 100%;
  display: block;
  resize: none;
  background: transparent;
  outline: none;
  border: 2px solid #eee;
  font-family: 'Inconsolata', 'Deja Vu Sans Mono', 'Consolas', 'Monaco', 'Courier';
}
var decodedUri = '';
var encodedUri = '';
var fullUri = '';

document.getElementById('input').oninput = function (ev) {
  decodedUri = this.value;
  encodedUri = encodeURIComponent(decodedUri);
  fullUri = 'javascript:(function()%7B' + encodedUri + '%7D)()%3B';
    
  document.getElementById('output').href = fullUri;
}

External CSS

  1. https://codepen.io/ninivert/pen/YWVJqO

External JavaScript

This Pen doesn't use any external JavaScript resources.