Geek Answers Handbook

Overlay page content on the Google Chrome extension

I am writing a very simple Google Chrome extension, but have encountered so many problems that it has been a bit overwhelming for a project of such a miserable scale.

The extension is very simple: upon arrival to any page (say google.com) the content of the page is hidden and the user has a question (s) that he must answer correctly ... or redirect to another page that gives the correct answer. In other words, the user cannot access the pages on the Internet if he does not answer the questions correctly.

To hide the contents of the page, I decided to switch to a simple overlay using the following approaches:

Approach No. 1

I tried to add a simple opaque div with position: fixed; to the current document position: fixed; z-index: 2147483647; and 100% width / height. This worked, but:

  • The CSS of the page kept interfering with the elements inside my div .
  • Flash content sometimes appeared on top of it (at least in Windows XP). Interrupting embed throughout the page and setting wmode to transparent did not help by compensating for -10000px or setting display:none; just relieved, but does not solve the problem. See also this question .

Approach No. 2

I tried isolating the GUI in an iframe that was created and injected into the page to behave exactly like the div in the above approach. It perfectly solves the problems of the first approach, but:

  • There seems to be no way to access iframe content due to cross-origin policies. And this access - I need to assign handlers to the input field where the user enters the answer, I need to remember who steals the focus from the input field of the answer in order to return it after the answer to the question, etc. Etc..
  • Using Message Passing didn't work for me, and I'm not even sure I have to get it working, because messaging makes the whole thing too complicated and forbids me to use the application as a simple web page (i.e. not as an extension) . Why even bother?

So ... where am I wrong in my approaches? Is there a third or fourth that I don't know about?

I appreciate, but really don't need the code as an answer. A hint or a push in the right direction would be just as good.

PS I believe that at some point someone will ask if I have a code for sharing. Yes, but there is a bunch of that. Which part would you like to see?

+4
source share
2 answers

I completely forgot about this question ... In the end, I went with approach 2, using messaging to communicate with the iframe, and it works very well. Here's the extension repo for anyone interested in reading the code: https://github.com/olegskl/invasive-kanji

+3
source

Approach No. 2

Concern No. 1

There seems to be no way to access the contents of the iframe, because the policies are cross-origin. And this access - I need to assign handlers to the input field, where the user enters the answer, I need to remember who steals the focus from the input field of the answer, to give it returns after the answer to the question, etc. etc. etc.

Yes, you get access to the contents of the iframe (s) for the substance of the entire code of the web page, no CSP, etc.

The content of the script that inserts the iframe.

I suggest this is the best approach, you can inject the script into dynamically generated frames, as shown here, and get the contents

Implementation example

manifest.json

 { "name": "Iframe", "description": "", "version": "1", "manifest_version": 2, "content_scripts": [ { "matches": [ "<all_urls>" ], "js": [ "myscript.js" ], "run_at": "document_end" }, { "matches": [ "<all_urls>" ], "js": [ "anotherscript.js" ], "all_frames": true } ], "permissions": [ "<all_urls>" ] }

myscript.js

 var iframe = document.createElement("iframe"); iframe.setAttribute("src", "https://www.facebook.com/plugins/like.php?href=http://allofrgb.blogspot.in/"); iframe.setAttribute("style", "border:none; width:150px; height:30px"); iframe.setAttribute("scrolling", "no"); iframe.setAttribute("frameborder", "0"); document.body.appendChild(iframe);

anotherscript.js

 iframes = document.getElementsByTagName("iframe"); for (iframe in iframes){ console.log(iframes[iframe].src); } console.log("In another Script");

If you look at messages recorded in the console, you see that messages are logged twice ( document log + iframe log + [any number of optional iframes in pages]* )

anotherscript.js , which runs during document idle states, runs in a dynamically generated iframe as soon as you can re-run the script content through chrome.tabs.executeScript () at any time.

Concern No. 2

Using Message Passing didn't work for me, and I'm not even sure if I have to get it to work, because messaging does it all excessively and forbids me to use the application as a simple web page (i.e. not as an extension) . Why even bother?

What do you want to achieve?

+4
source

More articles:


All Articles