1

I'm developing a chrome extension using React. I am using vanilla.js for background and content script. I want to implement a shadow-dom element like Grammarly do in textbox of web pages. Refer this pic: see the bottom right corner of the gif

Anyone has any idea how Grammarly achieve this functionality? any exact code segment from grammarly? I've tried attaching shadow elements into the content script, but the results aren''t satisfactory. Here is the code I tried:

var host = document.activeElement;
var root = host.attachShadow({mode: 'open'});
var div = document.createElement('div');
div.className = 'div';
div.innerHTML = '<style>.div{position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);}</style>this is shadow dom';
root.appendChild(div);

Then I tried the react-shadow package. But I couldn't get the element into the web page. So how to display this dynamic element in the exact same place of the textboxes as grammarly do?

  • Extension popup defined in browser_action or action keys of manifest.json is not related here. You need to create the button in the content script and set its position via CSS `position:absolute` and adjust `left` / `top` or use other positioning techniques available in CSS. – wOxxOm Oct 06 '21 at 05:08
  • I've tried it but some pages are overriding it. So, I think shadow-dom will be the perfect choice. –  Oct 06 '21 at 05:10
  • You need to do it inside SahdowDOM, of course. I thought you already know it. – wOxxOm Oct 06 '21 at 05:11
  • Yes, I tried shadow-dom. But the problem is it is blocking the entire page and displaying the new element. Also I want to have some fancy element, so I thought React-shadow will be perfect. Do you have any code to implement shadowDOM in the bottom corner without blocking the page? –  Oct 06 '21 at 05:14
  • See [How to really isolate stylesheets in the Google Chrome extension?](https://stackoverflow.com/q/12783217). As for React-shadow, try finding examples using google/bing/etc. – wOxxOm Oct 06 '21 at 05:18
  • That's the one I tried for ShadowDOM but it is blocking the entire view. –  Oct 06 '21 at 05:21
  • Use a different one then or show how you're using it ([MCVE](/help/mcve)) so people can help. – wOxxOm Oct 06 '21 at 05:22
  • I've added the code I tried. Please check it. –  Oct 06 '21 at 05:26

0 Answers0