I'm developing a chrome extension similar to Grammarly. I see that Grammarly is injecting its G button into the textbox of all the web pages. As in this pic: G button inside textbox in the bottom right corner

How do they do it? I tried to add a div using the content script but some pages still preventing it from displaying. Here is what I tried(testing purpose):

let div = document.createElement('div');
  div.innerHTML = "<strong>Hi there!</strong> You've read an important message.";

  document.body.append(div);

So, how does Grammarly achieve that functionality? How to do it with the react-shadow package? or any other workaround to do it in React? I used shadow-dom but it is blocking the entire dom. And displaying the latest element. Of course, I don't want that effect. How to exactly implement like Grammarly did?