Use Emacs to edit textareas and online editors

Latest Version

Version
0.6.0
Update
December 3, 2024
Size
243KiB
Developer
Category
Users
196
Rating
5 ★
Manifest Version
3
Web Store Status
Languages Support
English
See more
Permissions
ActiveTab
Scripting
Storage
See more

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

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

How to download and manually install Chrome Emacs extension for Chrome

Looking for a way to install Chrome Emacs extensions for Chrome, you can search for them in the Chrome Web Store, clicking the "Add to Chrome" button, and following the straightforward process.

However, you may need to install Chrome Emacs extensions manually, this article outlines two simple methods to effortlessly install Chrome Emacs extensions, whether they come as unpacked folders in compressed formats like .zip or as .crx files.

Method 1: Download Chrome Emacs extension and manually install through Drag &Drop

If you ever need to manually install a Chrome Emacs extension for Chrome, don't worry, it's a simple process. Just follow these easy steps, and you will have your extension ready to use in no time.

Step 1: Download the Chrome Emacs Extension by clicking the "Download CRX" button on the website.

Look for the Chrome Emacs extension you wish to install. Go to the website and download the Chrome Emacs extension package, which is usually a .CRX file and comes in a zipped file. Here ".crx" file is the format for Chrome Emacs extension that contains all the data.

Step 2: Extract &Arrange Files

Once the file is downloaded, extract that file into its own folder. Similarly, give that extension files a permanent home. In other words, keep it in a folder that you don't accidentally delete it because these files will be needed to make that extension work.

Step 3: Go to the Chrome Extensions Page

Open Google Chrome and in the address bar, type chrome://extensions; it will open the Google Chrome extensions page. Make sure that "My extensions" is selected in the sidebar.

Step 4: Drag and Drop the Extension

Now, go to the folder where you extracted the Chrome Emacs extension and drag &drop the extension file from there anywhere onto the extension page within Google Chrome.

Step 5: Complete the Installation

Once you drag and drop the extension file, follow the steps that Google Chrome takes you through. Similarly, if the extension file is of .crx file format, you will be required to review the permissions and then add the extension.

Now, you can manage that added extension as you would like to with any other Chrome extension that you added through Chrome Webstore. Its icon will also appear in the Google Chrome Menu on the right side of the address bar once you activate it.

Method 2: Download Chrome Emacs extension for Chrome and install in Developer Mode

This is another method to install Chrome Emacs extension manually, but the twist is that here, you install by enabling the developer mode option provided in Google Chrome. This mode is commonly used for testing extensions or running unpublished tools.

Step 1: Download the Chrome Emacs extension file

Select and download the Chrome Emacs extension by clicking the 'Download CRX' button on the website.

Step 2: Extract the downloaded contents

Convert the file to a ZIP file if it is in CRX format then extract the Chrome Emacs extension zip file or folder that you downloaded. Make sure you extract it using the same folder name and keep it safely in another folder, so you don't delete it by mistake. The extracted folder will be needed to keep your Chrome Emacs extension running.

Step 3: Open Chrome Extension Setting Page

In the address bar of Google Chrome, type chrome://extensions and open the Chrome Extension Page.

Step 4: Enable Developer Mode

After opening the Chrome Extension page, look at the top right side, and you will find the toggle option of "Developer mode."Simply enable that developer mode option.

Step 5: Load the Unpacked Extension

Once you enable the developer mode option, you will see the menu of Load Unpacked, Pack Extensions and Update. From that, select the option "Load unpacked."

Step 6: Select the Extension Folder

Once the pop-up opens upon clicking Load unpacked, select the Chrome Emacs extension directory and click on the "Select Folder "button.

Step 7: Confirm and Install

After you select an extension folder of a Google Chrome extension you're installing manually, confirm its installation for the final time and let the installation complete.

Conclusion

Here we've made a step-by-step guide on How to manually install Chrome Emacs extension in 2 ways. We hope this guide proves helpful.

Similar Extensions