Overlaying the page contents from Google Chrome extension

[pletcherdkl]

I am writing a very simple Google Chrome extension, but have faced such a multitude of issues that it's a bit overwhelming for a project of such a miserable scale.The extension is a very simple one: upon arrival on any page (say, google.com) the page contents is hidden and the user is faced with a question (s)he has to answer correctly... or be redirected to some other page that provides the correct answer. In other words, the user cannot access pages on the Internet unless (s)he answers the questions correctly.To hide the page contents I decided to go for a simple overlay using the following approaches:Approach #1I tried appending to the current document's body a simple opaque \[code\]div\[/code\] with \[code\]position: fixed;\[/code\], \[code\]z-index: 2147483647;\[/code\] and width/height at 100%. That worked, but:

• The page's CSS kept interfering with the elements inside of my \[code\]div\[/code\].
• Flash content occasionally appeared on top of it (at least on Windows XP).Chasing \[code\]embed\[/code\]s all over the page and setting \[code\]wmode\[/code\] to"transparent" didn't help, offsetting to -10000px or setting\[code\]display:none;\[/code\] simply alleviated but didn't solve the problem. See also this question.

Approach #2I tried sandboxing the GUI in an \[code\]iframe\[/code\] that is created and injected into the page to behave exactly as the \[code\]div\[/code\] in the above approach. It perfectly solves the issues of the first approach, but:

• Apparently there's no way to access the contents of the \[code\]iframe\[/code\] because of cross-origin policy. And that access