0

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.

screenshot

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.

program_k
  • 1
  • 2
  • Use a [content script](https://stackoverflow.com/a/4532567). – wOxxOm Jun 30 '20 at 17:00
  • @wOxxOm yes thanks but i'm having trouble with positioning the DOM over the selected text (just like the screenshot) – program_k Jun 30 '20 at 17:12
  • This is not specific to extensions then. Quick googling reveals [Insert text before and after the selected text in javascript](https://stackoverflow.com/q/4770457) – wOxxOm Jun 30 '20 at 17:15
  • These are very helpful thank you. The above example @wOxxOm shared directly adds the DOM before/after the selected text. I'm trying to make the clickable DOM float over any other text that may be there. – program_k Jun 30 '20 at 20:31
  • Use CSS `position:absolute` and related properties to adjust the element. – wOxxOm Jul 01 '20 at 03:57

0 Answers0