Bookmarklets

Easy way to automate browser tasks

Problem

  • I am writing a diary with links to interesting articles using markdown
  • This is my way of getting rid of too many open browser tabs

Problem

  • I hate repetetive tasks
  • Steps:
    1. copy the url
    2. paste it to markdown page
    3. copy the heading
    4. paste it to markdown
    5. close the tab
  • Data format:
    * [heading](url)

What if we could automate?

Quick win: just one copy/paste

Decompose problem

  1. I need to read data from the web page
  2. I want that data in my clipboard
  1. I need the header text
  2. I need the url
  3. I need to put them together in a specific format

Details

What is a bookmarklet?

What is a bookmarklet?

Developer tools

= JS REPL

right click -> pick Inspect

Allow easy copy

Final code

prompt("", (function(){
  let header = document.querySelector('h1').innerText;
  let address = window.location.href;
  return `* [${header}](${address})`
})())

// find the code here: 
// https://jsbin.com/cononib/1/edit?html,js,output

What would you automate if you knew how?

Drop me a line: 

Press ⌘-c to copy

bit.ly/AskMaciej

Bookmarklets

By Maciej Jankowski

Made with Slides.com

Bookmarklets

  • 153

More from Maciej Jankowski