I'm developing a chrome extension that calls a back-end server after selecting a phone number from any web page. So currently on my content script I have a code block such as this:
document.addEventListener("mousedown", function(event){
var selection = window.getSelection().toString().replace(/[^+0-9]+/g, "").trim();
//regex for phone number format
if(selection.match(/^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\./0-9]*$/g && selection.toString().length > 9) {
//create a clickable DOM object at the beginning/end of the selected number
}
}
To clarify, what I'm trying to do in the if-block is exactly as google translate's chrome extension.
That is, I would like to inject a DOM that appears after selecting a phone number, floats over other texts and is clickable. So how can I create such an object and is there anything I should be adding on the extensions manifest?
Many thanks in advance for any help.