0

I'm working on a Chrome extension that would prevent me from visiting time-wasting websites.

Whenever I visit such website I would like to append an element to the body that will stay position:fixed on top of the page.

What I'm struggling with is that often styles from the original page are leaking towards my appended markup.

1.

One solution could be using iframe but we have 2019 and I've been living under a rock for a year or two and as I'm returning to web development everything is React, virtual DOM, CSS4 who knows.

Here I've found a solution using iframe: https://stackoverflow.com/a/4199540

  function writeToFrame() {
    var doc = document.getElementById('testing').contentWindow.document;
    doc.open();
    doc.write('<html><head><title></title><style>body{ background: blue }</style></head><body>Hello world.</body></html>');
    doc.close();
  }

It works, the background: blue is not leaking.

I'm worried that using iframes can bring some difficulties further down the line - namely communicating with the extension scripts.

2.

Option two would be using reset.css but it doesn't work: enter image description here

Do you have maybe better ideas, maybe there is something obvious that I'm missing?

Mars Robertson
  • 12,673
  • 11
  • 68
  • 89
  • 1
    You can use ShadowDOM, see [How to really isolate stylesheets in the Google Chrome extension?](//stackoverflow.com/q/12783217), or just plain overwrite the page using document.write() in your content script. – wOxxOm Mar 29 '19 at 11:42
  • @wOxxOm thanks! I was looking for that question, mark mine as duplicate :) – Mars Robertson Mar 29 '19 at 18:03

0 Answers0