insert text at cursor position in a search field - google-chrome-extension

Question

This is what I would like to do: copy some text in the clipboard. Place the cursor in a search field in the browser page, call the context menu of my extension which will bring a regular expression.
Apply the regex to clipboard content, put the result in the search field.
If I fetch the cplipboard content with:
navigator.clipboard.readText().then((clipText)=>
{
let val =applyRegex(clipText, data);
insertTextAtCursor(val);
}
InsertTextAtCursor below works, at least on google search page.
function insertTextAtCursor(text) {
log("insertTextAtCursor: " + text)
let el = document.activeElement;
let val = el.value;
let endIndex;
let range;
let doc = el.ownerDocument;
if (typeof el.selectionStart === 'number' &&
typeof el.selectionEnd === 'number') {
endIndex = el.selectionEnd;
el.value = val.slice(0, endIndex) + text + val.slice(endIndex);
el.selectionStart = el.selectionEnd = endIndex + text.length;
// && doc.selection.createRange)
} else if (doc.selection !== 'undefined' && doc.selection.createRange) {
el.focus();
range = doc.selection.createRange();
range.collapse(false);
range.text = text;
range.select();
//document.execCommand('insertText', false, text);
}
}//insertTextAtCursor
If I fetch the clipboard content with
function paste() {
var input = document.createElement('textarea');
//input.value = text;
//input.setAttribute('readonly', '');
input.style.position= 'absolute';
input.style.left= '-9999px';
document.body.appendChild(input);
input.select();
var result = document.execCommand('paste');
result = input.value;
log("paste: " + result);
document.body.removeChild(input);
return result;
}
doc.selection.createRange crash in InsertTextAtCursor, saying doc.selection is not defined.
I would prefer to stick with document.execCommand('paste'). So any help is welcome !
See https://sourceforge.net/p/skimtheclipboard-mv3/mercurial/ci/default/tree/
for the whole code.
Here is a test for a minimal example.
manifest.json
{
"background": {
"service_worker": "background.js",
"type": "module"
},
"content_scripts": [ {
"js": [ "contentok.js" ],
"matches": [ "\u003Call_urls>" ]
} ],
"description": "test",
"manifest_version": 3,
"name": "test",
"optional_permissions": [ ],
"permissions": ["contextMenus", "activeTab", "clipboardRead", "clipboardWrite" ],
"version": "0.0.1"
}
background.js
function buildContextMenu () {
let fcb =[ {fcb_context: "fcb_copy", title: "copy", context: ["selection", "link"]},
{fcb_context:"fcb_paste", context:["editable"], title:"paste"}];
for (let i=0; i< fcb.length; i++) {
let menu = fcb[i];
chrome.contextMenus.create({
title: menu.title,
id: menu.fcb_context,
contexts: menu.context,
});
} // for i
} //buildContextMenu
function log(msg, force=false) {
var debug = true;
if (force || debug){console.log(msg);}
}//Log
chrome.runtime.onInstalled.addListener( function () {
log("onInstalled called");
chrome.contextMenus.removeAll();
buildContextMenu();
}); //add listener
chrome.contextMenus.onClicked.addListener(function(info, tabs){
let data, sel, fcb_context;
let id = info.menuItemId;
log(" id: " + id ) ;
sel = info.selectionText;
fcb_context = info.parentMenuItemId;
( async () =>{
const [tab] = await chrome.tabs.query({active: true, currentWindow: true});
const response = await chrome.tabs.sendMessage( tab.id, {data: "go", context: fcb_context, sel: sel}, function(){} );
log(response);
})();
}); //onClickedadd
chrome.runtime.onStartup.addListener(function() {
log("onStartup called");
chrome.contextMenus.removeAll();
buildContextMenu();
}); //addListerner
contentok.js
chrome.runtime.onMessage.addListener(
function(request, sender) {
console.log("received in cs: " + JSON.stringify(request));
navigator.clipboard.readText().then((clipText)=>
{
let val = "Clipboard content : " + clipText;
insertTextAtCursor(val);
}
)
return true;
}
);
function insertTextAtCursor(text) {
console.log("insertTextAtCursor: " + text)
let el = document.activeElement;
let val = el.value;
let endIndex;
let range;
let doc = el.ownerDocument;
if (typeof el.selectionStart === 'number' &&
typeof el.selectionEnd === 'number') {
endIndex = el.selectionEnd;
el.value = val.slice(0, endIndex) + text + val.slice(endIndex);
el.selectionStart = el.selectionEnd = endIndex + text.length;
// && doc.selection.createRange)
} else if (doc.selection !== 'undefined' && doc.selection.createRange) {
el.focus();
range = doc.selection.createRange();
range.collapse(false);
range.text = text;
range.select();
// document.execCommand('insertText', false, text);
}
}//insertTextAtCursor
Once you have copied a string in the clipboard, you go to the google search page (or any page that have an editable field), place the cursor in that field, click on the paste menu of the context menu. This works as expected and inserts the clipboard content in the search field of the page.
Now you change the manifest to have the following content file used:
contentnotok.js which use the function paste()
chrome.runtime.onMessage.addListener(
function(request, sender) {
console.log("received in cs: " + JSON.stringify(request));
let val = paste();
insertTextAtCursor("Clipboard content: " + val);
return true;
}
);
function insertTextAtCursor(text) {
console.log("insertTextAtCursor: " + text)
let el = document.activeElement;
let val = el.value;
let endIndex;
let range;
let doc = el.ownerDocument;
if (typeof el.selectionStart === 'number' &&
typeof el.selectionEnd === 'number') {
endIndex = el.selectionEnd;
el.value = val.slice(0, endIndex) + text + val.slice(endIndex);
el.selectionStart = el.selectionEnd = endIndex + text.length;
// && doc.selection.createRange)
} else if (doc.selection !== 'undefined' && doc.selection.createRange) {
el.focus();
range = doc.selection.createRange();
range.collapse(false);
range.text = text;
range.select();
// document.execCommand('insertText', false, text);
}
}//insertTextAtCursor
function paste() {
var input = document.createElement('textarea');
//input.value = text;
//input.setAttribute('readonly', '');
input.style.position= 'absolute';
input.style.left= '-9999px';
document.body.appendChild(input);
input.select();
var result = document.execCommand('paste');
result = input.value;
console.log("paste: " + result);
document.body.removeChild(input);
return result;
}
If you inspect the page when calling the paste entry in the context menu, you have the Error in event handler: TypeError: Cannot read properties of undefined (reading 'createRange') in line 27 of the script.
As I said I would better use this paste function, which works looking at the log, but calling it seems to prevent insertTextAtCursor from working correctly.
If someone can give a correction ...
François

Answer 1

The textarea of the web page where the user calls the context menu loose the focus because of the paste function which create a new editable element.
So if I store it before calling paste and put the focus again on it after the calls return, insertTextAtCursor works.
In contentnotok.js :
chrome.runtime.onMessage.addListener(
function(request, sender) {
console.log("received in cs: " + JSON.stringify(request));
let field = document.activeElement;
let val = paste();
field.focus();
insertTextAtCursor("Clipboard content : " + val);
return true;
}
);
``