Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Suggestions for 3 approaches</p> <h1>Content script injecting a fixed html element</h1> <p>Yes, the styles if specified are too generic in web pages </p> <p><strong>Ex:</strong> </p> <pre><code>div { border:none; } </code></pre> <p>does effect content script(s) elements even you assign rare combination of id(s) and classes to css, Solution is to specify (or) override all styles using css which is very cumbersome</p> <p><strong>Ex:</strong> Over ride every style which is error prone and cumbersome.</p> <pre><code>html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } </code></pre> <h1>Content script injecting an iframe.</h1> <p>I suggest this is best approach , regarding your concern on script injection on dynamic iframes; Yes it is possible to inject script to dynamic generated iframes</p> <h2>Sample Implementation</h2> <h3>manifest.json</h3> <pre><code>{ "name": "Iframe", "description": "", "version": "1", "manifest_version": 2, "content_scripts": [ { "matches": [ "&lt;all_urls&gt;" ], "js": [ "myscript.js" ], "run_at": "document_end" }, { "matches": [ "&lt;all_urls&gt;" ], "js": [ "anotherscript.js" ], "all_frames": true } ], "permissions": [ "&lt;all_urls&gt;" ] } </code></pre> <h3>myscript.js</h3> <pre><code>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); </code></pre> <h3>anotherscript.js</h3> <pre><code>iframes = document.getElementsByTagName("iframe"); for (iframe in iframes){ console.log(iframes[iframe].src); } console.log("In another Script"); </code></pre> <p>If you observe console logged messages you observe messages are logged twice (<code>document</code> log + <code>iframe</code> log + <code>[any number of optional iframes in pages]*</code>)</p> <p><code>anotherscript.js</code> which runs during <code>document idle</code> states does execute in dynamic generated iframe, how ever you can re-run content script through <a href="https://developer.chrome.com/extensions/tabs.html#method-executeScript" rel="noreferrer">chrome.tabs.executeScript()</a> any time.</p> <h1>Extending the Devtool panel</h1> <p>You have clearly identified problems, so eliminating it as an alternative.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload