Use Emacs to edit textareas and online editors
Chrome Emacs Extension
Chrome Emacs enables seamless integration between Chrome's online text editors or textareas and Emacs, allowing you to edit online content directly in Emacs.
Quick Installation and Setup:
1. Install Chrome Emacs Extension: Add Chrome Emacs from the Chrome Web Store to your Chrome browser.
2. Configure Emacs: Install the corresponding Emacs package. You can find a recommended fork or the original Atomic Chrome package for installation instructions and setup details at: https://github.com/KarimAziev/chrome-emacs
3. Run the Server in Emacs: Make sure Emacs is running and execute the atomic-chrome-start-server function.
Usage Instructions:
- Ensure Emacs is running with the server started. Navigate in Chrome to any editable text area or online text editor.
- Activate the Chrome Emacs extension by clicking its icon or using a pre-configured keyboard shortcut to open the content in an Emacs buffer.
- Edit as needed in Emacs; changes will synchronize back to Chrome in real time.
Keyboard Shortcuts Configuration:
- Configure keyboard shortcuts for activating Chrome Emacs by going to chrome://extensions/shortcuts in your Chrome browser. This lets you quickly access editing functions.
For detailed information, including full installation and setup instructions, visit our GitHub page - https://github.com/KarimAziev/chrome-emacs.
Version 0.6.0
- Added support for CKEditor 4 and CKEditor 5. Introduced bidirectional editing functionality, though scroll synchronization remains unsupported.
- Improved keyboard input for editable elements: Hint key presses now work reliably, thanks to a temporary textarea mask that prevents interference from active editors like rich text tools.
Version 0.4.0
- Added an options page, which allows users to configure which letters to use for hints and exit keybindings.
- Pinned icons are now highlighted according to the tab.
Version 0.3.1:
- Fixed an issue on some sites, such as replit.com, where editing failed due to weird ID attribute values in DOM elements. Although IDs that start with a digit are valid in HTML, they require special escaping in CSS selectors.
Version 0.3.0:
- The main feature is the experimental support for vscode.dev, codesandbox.io, and other sites that do not globally expose the Monaco API.
- Improved textarea editing. Previously, e.g., on GitHub, after editing, the submit button would remain disabled. Now, it correctly recognizes changes.
- Hints now also highlight and make editable areas clickable, further improving the recognition of editable areas.
- Added support for coderpad.io.
Version 0.2.2:
- Manually configure file extensions for the Python and Latex languages in CodeMirror.
Version 0.2.1:
- Added selection handling in the Ace editor.
- Fixed the Monaco editor issue with tab switching on some sites (e.g., StackBlitz).
Version 0.2.0:
New features:
- Cursor and selection synchronization.
- Support for auto-placing the Emacs frame.
Changes:
- Changed the default shortcut for activating the extension to \"Ctrl+Period\" (on Mac, \"Command+Period\").
- Changed the default shortcut for activating hints to \"Ctrl+Shift+Period\" (on Mac, \"Command+Shift+Period\").
Fixes:
- Fixed detection of the Monaco editor on some sites.
- Fixed mode detection in CodeMirror.
Read more
Quick Installation and Setup:
1. Install Chrome Emacs Extension: Add Chrome Emacs from the Chrome Web Store to your Chrome browser.
2. Configure Emacs: Install the corresponding Emacs package. You can find a recommended fork or the original Atomic Chrome package for installation instructions and setup details at: https://github.com/KarimAziev/chrome-emacs
3. Run the Server in Emacs: Make sure Emacs is running and execute the atomic-chrome-start-server function.
Usage Instructions:
- Ensure Emacs is running with the server started. Navigate in Chrome to any editable text area or online text editor.
- Activate the Chrome Emacs extension by clicking its icon or using a pre-configured keyboard shortcut to open the content in an Emacs buffer.
- Edit as needed in Emacs; changes will synchronize back to Chrome in real time.
Keyboard Shortcuts Configuration:
- Configure keyboard shortcuts for activating Chrome Emacs by going to chrome://extensions/shortcuts in your Chrome browser. This lets you quickly access editing functions.
For detailed information, including full installation and setup instructions, visit our GitHub page - https://github.com/KarimAziev/chrome-emacs.
Version 0.6.0
- Added support for CKEditor 4 and CKEditor 5. Introduced bidirectional editing functionality, though scroll synchronization remains unsupported.
- Improved keyboard input for editable elements: Hint key presses now work reliably, thanks to a temporary textarea mask that prevents interference from active editors like rich text tools.
Version 0.4.0
- Added an options page, which allows users to configure which letters to use for hints and exit keybindings.
- Pinned icons are now highlighted according to the tab.
Version 0.3.1:
- Fixed an issue on some sites, such as replit.com, where editing failed due to weird ID attribute values in DOM elements. Although IDs that start with a digit are valid in HTML, they require special escaping in CSS selectors.
Version 0.3.0:
- The main feature is the experimental support for vscode.dev, codesandbox.io, and other sites that do not globally expose the Monaco API.
- Improved textarea editing. Previously, e.g., on GitHub, after editing, the submit button would remain disabled. Now, it correctly recognizes changes.
- Hints now also highlight and make editable areas clickable, further improving the recognition of editable areas.
- Added support for coderpad.io.
Version 0.2.2:
- Manually configure file extensions for the Python and Latex languages in CodeMirror.
Version 0.2.1:
- Added selection handling in the Ace editor.
- Fixed the Monaco editor issue with tab switching on some sites (e.g., StackBlitz).
Version 0.2.0:
New features:
- Cursor and selection synchronization.
- Support for auto-placing the Emacs frame.
Changes:
- Changed the default shortcut for activating the extension to \"Ctrl+Period\" (on Mac, \"Command+Period\").
- Changed the default shortcut for activating hints to \"Ctrl+Shift+Period\" (on Mac, \"Command+Shift+Period\").
Fixes:
- Fixed detection of the Monaco editor on some sites.
- Fixed mode detection in CodeMirror.
Source Manifest.json
{"update_url": "https://clients2.google.com/service/update2/crx", "name": "__MSG_appName__", "short_name": "__MSG_appShortName__", "version": "0.6.0", "manifest_version": 3, "minimum_chrome_version": "116", "description": "__MSG_appDescription__", "icons": { "16": "images/icon-16.png", "128": "images/icon-128.png", "19": "images/icon-19.png" }, "default_locale": "en", "background": { "service_worker": "scripts/service-worker.js" }, "action": { "default_icon": { "19": "images/icon-19-inactive.png", "38": "images/icon-38-inactive.png" }, "default_title": "Chrome Emacs" }, "commands": { "_execute_action": { "suggested_key": { "default": "Ctrl+Period", "mac": "Command+Period", "linux": "Ctrl+Period" }, "description": "Edit currently focused element" }, "query-edit": { "suggested_key": { "default": "Ctrl+Shift+Period", "mac": "Command+Shift+Period", "linux": "Ctrl+Shift+Period" }, "description": "Select and edit element" } }, "permissions": [ "activeTab", "scripting", "storage" ], "host_permissions": [ "http://*/*", "https://*/*" ], "web_accessible_resources": [ { "resources": [ "scripts/injected.js" ], "matches": [ "http://*/*", "https://*/*" ] } ], "options_ui": { "page": "options.html", "open_in_tab": false }}
Read more