Find Caret Anywhere Position on Page

Question

I'm working on a new developer working on a Chrome extension to work as an internal CR tool.

The concept is simple, on the keyboard, the extension receives the word next to the carriage, checks for compliance with the pattern, and if the match is true, the word replaces the canned answer.

For this, I mainly used a modified version of this answer .

I ended up at the checkpoint because it works for the active element, but it doesn't seem to work for things like the create window in Chrome or sequentially through other services (Salesforce also doesn't seem to be like, for example). I thought a little that this could be a problem with iFrames, so I worked a little and changed this world of code:

function getActiveElement(document){ document = document || window.document; if( document.body === document.activeElement || document.activeElement.tagName == 'IFRAME' ){// Check if the active element is in the main web or iframe var iframes = document.getElementsByTagName('iframe');// Get iframes for(var i = 0; i<iframes.length; i++ ){ var focused = getActiveElement( iframes[i].contentWindow.document );// Recall if( focused !== false ){ return focused; // The focused } } } else return document.activeElement; }; 

(which I originally received from another SO message that I can no longer find). It seems that I was not lucky, like no dice.

Is there an easy way to always activate an active element with an active carriage on every page, even for a Gmail window and similar services, or am I going to get stuck in my own code for a growing list of services that my code cannot take a carriage?

My complete code is here. This is rude, while I'm just trying to get this to work, so I understand there the messy parts that need to be removed:

  function AlertPrevWord() { //var text = document.activeElement; //Fetch the active element on the page, cause that where the cursor is. var text = getActiveElement(); console.log(text); var caretPos = text.selectionStart;//get the position of the cursor in the element. var word = ReturnWord(text.value, caretPos);//Get the word before the cursor. if (word != null) {//If it not blank return word //send it back. } } function ReturnWord(text, caretPos) { var index = text.indexOf(caretPos);//get the index of the cursor var preText = text.substring(0, caretPos);//get all the text between the start of the element and the cursor. if (preText.indexOf(" ") > 0) {//if there more then one space character var words = preText.split(" ");//split the words by space return words[words.length - 1]; //return last word } else {//Otherwise, if there no space character return preText;//return the word } } function getActiveElement(document){ document = document || window.document; if( document.body === document.activeElement || document.activeElement.tagName == 'IFRAME' ){// Check if the active element is in the main web or iframe var iframes = document.getElementsByTagName('iframe');// Get iframes for(var i = 0; i<iframes.length; i++ ){ var focused = getActiveElement( iframes[i].contentWindow.document );// Recall if( focused !== false ){ return focused; // The focused } } } else return document.activeElement; }; 

Answer 1

It works for me for the Gmail window (and, presumably, other content elements, not just input elements).

Edit: The crash around the lines was caused by window.getSelection (). anchorOffset returns the offset relative to this particular element, while ReturnWord gets the text of the entire layout window (containing multiple elements). window.getSelection (). anchorNode returns node that the offset is computed internally.

 function AlertPrevWord() { var text = getActiveElement(); var caretPos = text.selectionStart || window.getSelection().anchorOffset; var word = ReturnWord(text.value || window.getSelection().anchorNode.textContent, caretPos); if (word != null) {return word;} } 

I initially used MutationObserver to take into account that the created Gmail div is created after the page loads, just to connect an event listener to it.

 var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { var nodes = mutation.addedNodes; //list of new nodes in the DOM for (var i = 0; i < nodes.length; ++i) { //attach key listener to nodes[i] that calls AlertPrevWord } }); }); observer.observe(document, {childList: true, subtree:true }); //childList:true notifies observer when nodes are added or removed //subtree:true observes all the descendants of document as well 

Edit: The delegated click handler I tested with. Key event handlers do not work yet.

 $(document).on( "click", ":text,[contenteditable='true']", function( e ) { e.stopPropagation(); console.log(AlertPrevWord()); });