How to inject some dynamic elements into a webpage with a chrome extension? [duplicate]

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? Is it possible to do such DOM injection using React(I'm using React to develop the extension)?