Modify contents from browser extension

[octavianSandu]

📝 I need to be able to change the text contents of a ckEditor 5 instance via a browser extension

I know this is possible as it is done by Grammarly, but I have no idea how.
I guess that this is more of providing some documentation link and not adding new functionality.

For the demo site ( https://ckeditor.com/ckeditor-5/demo/ ) all works as I am using the ckEditor API that is available in the window.editors array. But, in real life, the API is not directly available.

So, is there any generic way to get access to the ckEditor API ?
Or how is it safe to make changes to the view without being blocked by the model?

Mostly, the API is used for making a selection (with the text to be removed), inserting the content, moving the cursor, refocusing the editor when focus is lost.

[jswiderski]

Or how is it safe to make changes to the view without being blocked by the model?

Any changes done to HTML or selection in CKEditor 5 have to be done through model and there is no way around that. When you create editor, you are most likely assigning it to window object.

 ...
 } )
    .then( editor => {
			console.log( 'Editor was initialized', editor );
			window.editor = editor;	
...

Having that you can use a lot (not all) of API in the browser console e.g.

// move selection to the start of editor.
editor.focus();
editor.model.change( (writer) => {
	const position = writer.createPositionFromPath( editor.model.document.getRoot(), [0,0] );
	const selection = writer.createSelection( position );
	writer.setSelection( selection.focus );
});

[octavianSandu]

Thank you @jswiderski for your answer.

In the ckEditor demo, where the editor property is exposed (in window.editors array), I am, indeed, making the changes through the ckEditor model. It works flawlessly.

On the other hand, I am writing a browser extension for various clients.
They have no editor property exposed (and I looped through all the window properties hoping I would find it). But the Grammarly extension works. And it does play with the caret and it changes content, and it doesn't trigger ckEditor Errors.
So there must be a way to either get the API via the contenteditable htmlElement, or to make the model accept external manipulation.

There was a long discussion about it, but how it was eventually approached was not mentioned.

[octavianSandu]

Ok, so, for anyone interested in this, it is answered on FAQ

[cosimo]

@octavianSandu I tried that approach described in the FAQ, but the ckeditorInstance attribute is undefined when the browser extension code is running. When I do the exact same thing from the js console, it works. Any idea why? Could you share your browser extension manifest and/or code? Thanks.

[tavi100]

You need to run the code in the main world. See Chrome documentation.

[cosimo]

@tavi100 thanks, I didn't understand what that meant initially, but I got it to work. The only small problem I found is that Firefox does not support world: "MAIN", unfortunately.

[Durgaprasad-Budhwani]

@cosimo - How you were able to make that work ?

[cosimo]

@Durgaprasad-Budhwani it's unfortunately been a very long time since I've got that code working, and I haven't used it in a while.

This is what I believe worked:

// background.js

...

async function generateAnswer(prompt) {
  const response = await generatePossibleResponse(prompt);
  chrome.tabs.query({active: true, currentWindow: true},function(tabs) {
    const tabId = tabs[0].id;
    chrome.scripting.executeScript({
      target: {tabId: tabId},
      world: "MAIN", //undefined for Firefox?
      func: setEditorContent,
      args: [response.completion],
    });
    //.then(() => {
    //  console.log("response.completion=" + response.completion);
    //});
  });
}

function setEditorContent(response) {
  const domElement = document.querySelector(".ck-editor__editable");
  console.log("ckeditorInstance="+domElement.ckeditorInstance);
  const editor = domElement.ckeditorInstance;
  if (editor) {
    editor.setData("<p>" + response + "</p>");
  } else {
    console.log("Couldn't find the editor instance");
    console.log("Response: " + response);
  }
}

...

Hope this is useful.

[Durgaprasad-Budhwani]

@cosimo This works for me and thank you so much !!!