contributing.md

Contributing

Requirements

Node.js version 18 or later is required.

Workflow

First clone:

git clone https://github.com/fregante/GhostText
cd GhostText
npm install

When working on the extension or checking out branches, use this to have it constantly build your changes:

# Build once
npm run build

# or listen to file changes and automatically rebuild
npm run watch

Then load or reload it into the browser to see the changes.

Loading into the browser

The built extension will be in the distribution folder.

• Load it manually in Chrome
• Load it manually in Firefox

Or use web-ext to load it automatically and watch for updates:

# Install tool globally
npm install -g web-ext

# Run extension in Chrome
web-ext run --target=chromium

# Run extension in Firefox
web-ext run

Adding support for more editors

"Support" is made of 2 parts:

• detection (it could be URL-based if it's a custom editor, but ideally it's attribute-based)
• text read/write

If the value an be set via DOM, like for a standard contentEditable, the second point would be easy:

GhostText/source/ghost-text.js

Lines 14 to 30 in febe6a6

	class ContentEditableWrapper {
	constructor(element) {
	this.el = element;
	this.dataset = element.dataset;
	this.addEventListener = element.addEventListener.bind(element);
	this.removeEventListener = element.removeEventListener.bind(element);
	this.dispatchEvent = element.dispatchEvent.bind(element);
	}
	get value() {
	return this.el.innerHTML;
	}
	set value(html) {
	this.el.innerHTML = html;
	}
	}

In the more likely case where you have to access the website’s own script data, you'd have to go through the AdvancedTextWrapper, which communicates with the advanced-editors-messenger script to get and set the text:

GhostText/source/unsafe-messenger.js

Lines 35 to 51 in febe6a6

	function codeMirror(target) {
	const editor = target.CodeMirror;
	sendBack(target, editor.getValue());
	editor.on(
	'changes',
	throttle(50, (instance, [{origin}]) => {
	if (origin !== 'setValue') {
	sendBack(target, editor.getValue());
	}
	}),
	);
	target.addEventListener('gt:transfer', () => {
	editor.setValue(target.getAttribute('gt-value'));
	});
	}

You can see the above piece of code uses a local CodeMirror property and then sends the value via events.