emacs-edit-chrome

No more pain of editing text in your browser - use Emacs!

This Chrome extension lets you grab text from Chrome and send it to Eamcs for editing.

Highlights

Edit text in <textarea> and <input> elements: Demo1, Demo2

as well as multiple browser-based editors:

• CodeMirror - including the ancient version used by Google Apps Script.
• Ace
• TinyMCE
• contenteditable editors like: GMail and jbt's markdown-editor.
• React-based editors such as the Wix website editor.

How to use

1. Install this Chrome extension.
2. Setup your .emacs (see suggestion below).
3. Click on a textarea and right-click or press Control-Shift-E to invoke 'Emacs Edit'.
4. Emacs should popup ... edit your text then press C-x-# to exit emacs.
5. You should see your text inserted back into the textarea.

.emacs setup

I highly reccommend you use use-package to organize your .emacs and invoke edit-server.

(use-package edit-server
  :if window-system
  :ensure t
  :defer t
  :init
  (add-hook 'after-init-hook 'server-start t)
  (add-hook 'after-init-hook 'edit-server-start t))

Security

Installing a chrome extension can be a big security risk. With that in mind we:

• Use the minimum possible permissions. See manifest.json. TODO(wdm) Can we use CORS to avoid needing any permissions?
• Do not run a content script on every webpage, just on the pages where you invoke it.
• Kepp the code-base small and auditable: background.js and injected.js total less than 300 lines.

Prior work

Inspired by the awesome Edit with Emacs but written from scratch with:

• No fancy options, no UI is added to the current page.
• Tiny code base.
• Bubbles the input event which is required to support React components.
• No problems with dynamically added textareas.

Known bugs

None. Let me know what you run into!