Skip to content

Instantly share code, notes, and snippets.

@PixelRobot

PixelRobot/notes.js

Last active January 20, 2024 22:11
Download ZIP
A bookmarklet for taking notes in the browser
Raw
notes.js
javascript:(
function(doc){
doc.write('<body contenteditable style="font:12px monospace; max-width:50em; margin:0; padding:10px;">');
var key = 'PixelRobot';
var body = doc.querySelector('body');
if (localStorage[key] != undefined)
body.innerHTML = localStorage[key];
else
body.innerHTML = 'Type your notes here';
body.oninput = function(){
localStorage[key] = body.innerHTML;
}
}
)(document);
@PixelRobot
Copy link
Author

A little bookmarklet for taking notes on your browser.

It remembers your notes, but it uses local storage, so the data depends on the domain you're browsing when you click on the bookmarklet.

Based on something I saw on Hacker News once.

@PixelRobot
Copy link
Author

Tested only on Chrome because that's what I use and I really don't care if it works on anything else right now.

@magasine
Copy link

magasine commented Apr 22, 2023 •
edited
Loading

I really liked the idea!
Collaborating with some modifications:

(function (doc) {
  if (doc.getElementById('myOverlay')) {
    return;
  }

  var key = 'PixelRobot';

  // cria camada de sobreposição
  var overlay = doc.createElement('div');
  overlay.setAttribute('id', 'myOverlay'); // adiciona um id para referência posterior
  overlay.style.position = 'fixed';
  overlay.style.top = '0';
  overlay.style.left = '0';
  overlay.style.width = '100%';
  overlay.style.height = '100%';
  overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
  overlay.style.zIndex = '9999';

  // cria container da modal
  var modal = doc.createElement('div');
  modal.style.position = 'absolute';
  modal.style.top = '50%';
  modal.style.left = '50%';
  modal.style.transform = 'translate(-50%, -50%)';
  modal.style.minWidth = '30vw';
  modal.style.maxWidth = '70vw';
  modal.style.minHeight = '5vh';
  modal.style.maxHeight = '70vh';
  modal.style.overflow = 'auto';
  modal.style.backgroundColor = '#fff';
  modal.style.padding = '10px';
  modal.style.borderRadius = '5px';
  modal.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';

  // cria conteúdo editável
  var content = doc.createElement('div');
  content.setAttribute('contenteditable', true);
  content.style.backgroundColor = '#fff';
  content.style.color = '#000';
  content.style.font = '14px monospace';
  content.style.border = '2px solid red';
  content.style.margin = '0';
  content.style.padding = '15px';

  // adiciona o conteúdo armazenado ou padrão
  if (localStorage[key] != undefined) {
    content.innerHTML = localStorage[key];
  } else {
    content.innerHTML = 'Type your notes here...';
  }

  // adiciona evento para armazenar o conteúdo editado
  content.oninput = function () {
    localStorage[key] = content.innerHTML;
  }

  // adiciona o conteúdo à modal
  modal.appendChild(content);

  // adiciona a modal à camada de sobreposição
  overlay.appendChild(modal);

  // adiciona a camada de sobreposição ao documento
  doc.body.appendChild(overlay);

  // adiciona evento de clique fora do contexto da modal para fechá-la
  overlay.addEventListener('click', function (e) {
    if (e.target === overlay) {
      overlay.remove();
    }
  });
})(document);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment