Can I embed iframe from my site using chrome extension - google-chrome-extension

I create chrome extension. When user hits special shortcut this extension will add iframe to current active page in chrome. This iframe will load js from external resource (my site) and show some data. Is this allowed (to load external js inside iframe)?
I did not find any restrictions in chrome developers about that, but I worry if my extension will not pass check at chrome webstore.

You can insert any HTML code into the DOM, but if you're inserting an IFRAME, it will be limited by same-origin restrictions which will likely prevent the embedded Javascript from running unless both websites share a common domain and protocol.
See https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy for further details.

Related

Allow opening of webview in chrome extension

I'm trying to create a responsive testing browser using chrome extension. Currently I'm using Iframes to render the web-contents. However iframes have a lot of issues opening third party websites in cross-domain origin sites. I found that webviews can quickly render the websites without any CORS or cookies issues. Is there any way in which I can use webviews in the chrome extension? Webviews are used by chrome apps which runs on chromium. So there might be some ways in which we can modify the chromium source code to allow webviews to open in extension.

Is it possible to create a chrome extension that loads an authenticated page

I'm looking to create a chrome extension that loads a mobile first web experience as content. The webpage that I'm loading requires authentication ( through Google ). I'm just wondering if this is possible with the current security limitation of chrome extensions.

is it possible to call browser api's from an iframe injected via webextension?

I am working on a webextension that will inject some ui in some pages. this ui will mostly be inside an iframe to better isolate css.
the problem I have is that I can do browser calls from inside the iframe scripts on chrome (I am also using webextension-polyfill) but in firefox I get browser is not defined error.
Am I missing something?
it seems like the errors I get are a firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1443253
a relevant comment on the bug page says
Chrome supports out-of-process frames, so Chrome is able to render an extension frame in an extension process (and the iframe can safely be granted access to extension APIs - https://bugs.chromium.org/p/chromium/issues/detail?id=550151 ).
In contrast, Firefox does not support out-of-process frames, so the iframe is handled by a non-extension process (with only limited access to extension APIs).

Is it possible to access DOM elements of a chrome app from another chrome app / extension?

This is something like a chrome extension changes the elements of a web page dynamically.
I am wondering if i can change the DOM elements of a chrome app from another chrome app or extension.
If this is possible, how can I do that ?
========================================================
Example:
There is a standalone chrome app working on the desktop
There is another app / extension works like a chrome app debugging tool which can access the content of that standalone app
The answer can be no, since when you are saying the DOM elements of a chrome extension, I guess you mean the popup/options page for the extension, its url starts with chrome://extensions while content script can't access this kind of page.
The answer can also be yes, since if you have control on both of the extension, you can do Cross-extension messaging, in this way, to some degree you can achieve change the DOM of a chrome extension from another extension.

how to get the debug information for chrome extension

I write a DOM tree protecter Chrome extension to examine if the DOM tree changes. I have the js files in background_page, how can i get those console.logs() in other test html files? What I can only find now is the debug information of chrome://extensions/ when i click on generated_background_page.html. So how can I get information of other webpages? Thanks for replying.
One thing I have found very useful when debugging chrome extensions is to use the "inspect element" feature of the chrome developer tools. If you have a page or an element (such as on a popup from your extension) that you want to debug:
Open up Developer Tools
Wait for your popup to appear (if its not already up)
Switch to the Elements view on Developer Tools
Click the magnifying glass at the bottom so you can select an element
Click on an element in the page you want to debug (e.g. the popup page)
Now your Sources view and other views line up to match the element you've clicked on. The console will now let you look at variables in that context.
If you are not able to get the extension to work, there could be a whole host of reasons.
Are all your scripts loaded form the extension's directory or are you serving
them from a site? Chrome will not load scripts from an external site
unless over https AND after the site that is serving the script has
been whitelisted. See the Chrome Content Security
Policy
for more info.
To inspect the DOM, you need to inject a content script into the page that is being loaded. Are you sure you are doing this correctly? The manifest.json must be done right or else your content script will not get loaded.
For your content script and extension to communicate, you must post and receive messages. More information is available here.
Perhaps the best suggestion I have is that you follow the Chrome extension "tutorial" carefully until you have something working and then amend it to suit your needs.

Resources