Develop Reference

Trying to access iFrame through source URL but showing up blank [duplicate]

I want to ask is there ANY way or extension that can pre-highlight text within the iframe whenever a new window is opened containing iframe? I have tried many extension but none of them works.
I need to filter out content based on certain keywords and the content is within iframe. I can do it with CTRL+F but there are many keywords like 10-15 within each article to be found. So it makes my job very tough and time consuming. Few extensions that I have tried from chrome are multi highlighter, pearls, FF but none of them seems to work.
I also know the reason why these extension can't access content within the iframe i.e. due to cross origin policies.
But I also remember around an year ago I worked with chrome extension named 'Autofill' that could pre-select form elements whenever I opened new chrome window containing iframe.
So is there any work around?

You can set your extension permission to run content scripts in all frames as document at http://developer.chrome.com/extensions/content_scripts.html#registration by setting all_frames to true in the content scripts section of your manifest file. Adding to Google's example from that page, part of your manifest file might look like
{
"name": "My extension",
...
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["mystyles.css"],
"js": ["jquery.js", "myscript.js"],
"all_frames": true
}
],
...
}
You'll need to be careful since your content scripts are going to be inject into the page once for the parent page and one for each iFrame on the page. Once your content script is injected into all frames on the page you can work your magic with finding and highlighting text.
if (window === top) {
console.log('Running inside the main document', location.href);
} else {
console.log('Running inside the frame document', location.href,
[...document.querySelectorAll('*')]);
}

How to access iframe in popup.html in a chrome extension

I have a chrome extension that opens a webpage via an iframe inside it's popup.html
What I need to do is detect when the user browses to certain URLs in the iframe, and then open those URLs as a new tab.
I was trying to access the .location of the iframe, but unfortunately was getting the policy issues between "chrome-extensions" and "http"
I've been researching, and I'm seeing a lot of notes on using content scripts, but I'm really not understanding how they work fully. Most examples are trying to inject code into current pages in the browser itself so I don't think they apply. Is a content script what I need?
Any help would be most helpful.

No this is not possible as chrome-extension popup is different domain site you cannot access it within your site.

I've been trying to do the same thing and i found this answer on SO. This worked for me and may be can work in our case as well. Just in case if the link may stop working in future, i'm copying his answer here:
"content_scripts": [{
"matches": ["http://*/*", "https://*/*"],
"js": ["content_frame.js"],
"all_frames": true
}],
By setting all_frames to true you will inject/include content_frame.js javascript file into top document and all iframes. In case you just need javascript injected in iframe but not in top document you can check inside your content_frame.js file like this:
if (parent === top) {
// here you can put your code that will run only inside iframe
}

Inject a content script into an iframe, within an action popup, of a different extension?

I need to be able to inject a content script into an iframe that is within an action's popup.html of another extension.
Previously, before an update to this extension in question, the extension injected the iframe into the active tab. I was able to configure my manifest like this:
"content_scripts": [{
"matches": ["https://*.domain.com/*"],
"js": ["content.js"],
"all_frames": true
}],
It worked fine, the content script was injected into the iframe. Now this extension has the iframe in the action's popup.html and I can't get this to work.
Is there any way to accomplish this?

In general, you can't do this because chrome-extension: is not/no-longer a valid scheme.
However, if you can target the popup.html without using wildcards, you might be able to get to work by setting a "bad flag" in the Chrome://flags page.
Obviously, this will only work for your own personal browser.

Trying to inject CSS after DOM loaded (Writing Chrome Extension)

I'm trying to write a Chrome Extension that just adds a CSS file to the end of a page's css definitions.
Google's documentation says that I can just use the function chrome.tabs.insertCSS() to add css to a page, but running it from a content_script included javascript file does nothing.
I'm trying two separate methods as documented on Google's site. I have an alert() statement to tell me where in the script I am, but it never runs the final alert. This makes me think that my script may be crashing somewhere in the middle.
Here are my source files:
manifest.json
{
"name": "Custom CSS to GOOGLE",
"version": "1.0",
"description": "The first extension that I made.",
"content_scripts": [
{
"matches": ["http://*/*"],
//"js": ["style_injector.js"],
"js": ["inject.js"],
"css": ["newstyle.css"]
}
],
"permissions": [
"tabs", "http://*/*"
]
}
inject.css
alert("newpage");
chrome.tabs.executeScript(null, {code:"document.body.bgColor='red'"});
chrome.tabs.insertCSS(
null,
{
code:"body{background:red;}"
}
);
alert("finishpage");

You can't call chrome.tabs.* API from a content script. You need to do it from a background page. If you need to communicate between a content script and a background page there is message passing available.
PS. Things like "This makes me think that my script may be crashing somewhere in the middle." could be easily checked by looking at the console (for content scripts it is just a regular console in a tab, Ctrl+J).

"I'm trying to write a Chrome Extension that just adds a CSS file to the end of a page's css definitions"
You might need to add the !important flag to the css you are changing:
When the browser is displaying an HTTP page and the user clicks this extension's browser action, the extension sets the page's bgcolor property to 'red'. The result, unless the page has CSS that sets the background color, is that the page turns red.
...the !important flag is the only way to change some things but you may have to write js to override other styles, check this
As serg said, the background.html page is where you use the injectCSS api:
/* in background.html */
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null,
{code:"document.body.bgColor='red'"});
});
/*in manifest.json */
"permissions": [
"tabs", "http://\*/*"
],

How to re-render a page from a Google Chrome extension?

I'm new to writing extensions for Google Chrome. I want to make an extension that only runs on a few pages (that I'll choose) and re-renders their CSS after the page has loaded (ideally I would like something similar to what you can do with GM_addStyle in greasemonkey scripts).
How can I accomplish this in a Chrome extension?

You can use Content scripts that have access to the pages DOM.
In your manifest.json you could have:
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["mystyles.css"],
"run_at": "document_end"
}
],
This will inject the css file mystyles in to any google page after the DOM has loaded. This doesn't completely overwrite the styles, but you will be able craft your CSS so it replaces their styles.
More information can be found on code.google.com. It also includes information about how to programmatically inject CSS into a page.