Blogger Update Breaks My App

Add-ons Development
1

I have a context menu Mozilla addon which automates adding html and bbcodes, bbCodeWebEx.

The basic algorithm is:

  1. Read the value of the selected text in a text area of some sort.
  2. Perform text operations on that value, including potentially using information from the clipboard.
  3. Replace the value of the selected text.

When I wrote it, there was an issue: There are a number of boards that use http: as opposed to https: plain text areas for user input, and the clipboard API only works on secure (https) pages.

For the method for plain boxes without encryption is clickedElement.value, which does not work on rich text boxes, so I use document.execCommand('paste') on the rich text boxes.

I use an if statement:

let txtcont = document.activeElement.value;
if (txtcont !== undefined) {
some stuff with the http plain text box
} else {
some stuff with the https rich text boxes
}

The problem is that the new google edit box in html mode, in addition to sucking like 1000 hoovers all going at once, (no new features, it’s just a change because … Google) is a plain text area in a https page, and so does not work.

A regular text box will return value like the value of its contents, and a rich text box will return “undefined”.

Unfortunately, the google html composition box returns a document.activeElement.value of an empty string, which is what the so the text manipulations are not put back into the dialogue box.

There are some potential solutions:
Find a way to replace the text in a text box which is not dependent on the encrypted status of a page, and works in both regular and rich text boxes.

  • Detect whether the page is http:// or https://, and modify the if statement to handle this.
  • Find a universal solution to manipulate text in textareas and content editable page elements that is not restricted by the http-https status of the page.

I know that I have now is both ugly and twitchy, so I am looking for a better solution. (Is there a library out there that would handle this?)

Code, less the text manipulation is below:

async function CommandParse(argString) {
        let txtcont = document.activeElement.value; //contents of edit box, textbox undef if content editable
		if (txtcont !== undefined) {// process as text/input box
			console.log("dialogue box case 1");
			let selstart = clickedElement.selectionStart; // index of selection start
			let selend = clickedElement.selectionEnd; //index of selection end
			let selcont = sanitize(txtcont.substring(selstart, selend)); // selected text content sanitized
			        let firsttext = txtcont.substring(0, selstart); //stuff before the selection
					let lasttext = txtcont.substring(selend); // stuff after the selection
					// various string manipulations
        clickedElement.value = firsttext + deSanitize(argString) + lasttext; //desanitize and insert element
		} else { // for rich text and iframe edit boxes only works on https pages			
			console.log("dialogue box case 2");
			let currentClipBoard = await navigator.clipboard.readText();
			let currentSelection =  window.getSelection().toString().trim(); //store current selection contents
			// will give empty string if the area is just clicked in, and not selected,
			let selCont = sanitize(currentSelection); // selected text content sanitized
		
			// various string manipulations
			await navigator.clipboard.writeText(deSanitize(argString));
			console.log("moo");
			document.execCommand('paste'); // paste to cursor location or selection
			console.log("cclip",currentClipBoard);
			await navigator.clipboard.writeText(currentClipBoard);
		}}
2

OK, found a fix, though my code is still ugly enough to cause cancer in Tardigrades, so I still want to find a more universal solution to this.

Here is the change.

Was:

        let txtcont = document.activeElement.value; //contents of edit box, textbox undef if content editable
		if (txtcont !== undefined) {// process as text/input box

Is:

        let txtcont = document.activeElement.value; //contents of edit box, textbox undef if content editable
        let locProt = location.protocol;
		if (txtcont !== undefined && locProt != 'https:') {// process as text/input box on an insecure page

Is there a way to manipulate text in either a text area or a content editable field that is not dependent on it being a secure or insecure page?