I would like to know all the components and steps needed to create a Google Chrome extension that will be able to remove some DOM elements from inside an iframe within a certain page.
My research indicates that this is not possible through common javascript due to the same origin policy.
Manually removing the DOM elements from code inspection in Chrome is as far as I got, but I want to automate this.
From other similar questions (mainly this one), it appears that a Chrome extension should be able to do this.
I believe this is the most similar question but has not been answered as of yet, and also isn't as clear.
In all honesty, I could take it from here, but I think other people might benefit from this question and the answer, even if I end up answering myself.
Example HTML:
<!DOCTYPE html>
<html>
<body>
<iframe src="iframe.htm"></iframe>
</body>
</html>
And iframe.htm:
<!DOCTYPE html>
<html>
<body>
<div id="targetDiv"></div>
</body>
</html>
The end result should be the same as running (with jQuery):
$('#targetDiv').remove();
which of course does not work.
I accomplished what I wanted so here's the answer.
The first thing you need for Chrome extensions is the manifest file, manifest.json.
Here is a working example:
{
"manifest_version": 2,
"name": "iframe manipulation extension example",
"description": "This extension allows to run scripts that manipulate cross domain IFRAME contents.",
"version": "1.0",
"permissions": [
"*://target-site.com/*"
],
"content_scripts": [
{
"matches": [
"*://target-site.com/*"
],
"js": ["script.js"],
"all_frames": true
}
]
}
It has some self-explanatory values and then permissions and content_scripts.
It basically says that this extension will only work when accessing target-site.com.
We specify the file we want to run and also set "all_frames": true, which will run said file for each frame in the page.
You can of course run whatever javascript you need in the file/s you reference in your manifest.
Navigate to chrome://extensions/ to load your unpacked extension or pack it.
Please note there are other ways to get an extension to run scripts. This is just what I ended up with as the easiest way.
Related
The details of this issue are quite complex and confusing, but I will try to explain as clearly as I can.
I have written an app using NWJS which uses an iframe within which I am loading the web page generated by similar devices (surveillance cameras) on my local network, using ip addresses (192.168.1.252 and 192.168.1.245). One device is newer than the other.
I am able to access the older camera just fine using the url http:/192.168.1.252/ in the src attribute of the iframe.
However, I am unable to access the newer camera this way (http:192.168.1.245/), and get a "Page not found" error. BUT, I can access either camera just fine in Firefox using the ip address. HOWEVER, in Chrome, I can only access the older camera; the newer one gives me a "connection not private ... NET::ERR_CERT_AUTHORITY_INVALID" error.
I found this question on SO that is related, which talked about things getting screwed up due to redirection: HTTPS iframe inside a HTTPS page not working . In Firefox (where I can access both devices) I observe that in both cases, the url redirects to an https url. Based on the advice given in the SO question, for both urls, I have tried using various combinations in the src attribute of the iframe:
http://192.168.1.xxx
http://192.168.1.xxx/
https://192.168.1.xxx
https://192.168.1.xxx/
(What is really interesting to me, only http://... in src attribute the will work for the older device; if I use https://... (the protocol it gets redirected to when it works in the browser) I get "page not found". I don't know if this bit on information is helpful or more of a diversion.)
There is nothing that indicates this is a cross-origin issue, and there shouldn't be as I am using the nwfaketop nwdisable attributes as talked about on this page: Avoid iframe-busting with nwdisable and nwfaketop? .
The HTML in the NWJS app is as follows:
<!doctype HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ReolinkNWJS_TEST</title>
</head>
<body>
<iframe id="reolink_page" src="http://192.168.1.245/" nwfaketop nwdisable>
</iframe>
</body>
</html>
package.json:
{
"name": "ReolinkNWJS_TEST",
"description": "TEST",
"version": "0.0.1",
"icon": "icons/app.icns",
"main": "html/main.html",
"chromium-args": "--enable-logging=stderr --enable-spell-checking",
"window": {
"toolbar": false,
"width": 800,
"height": 500,
"position": "center"
},
"nodejs": true,
"node-remote": "*://*",
"scripts": {
"prod": "nwbuild --platforms win64 --buildDir dist/ ./"
},
"devDependencies": {
"nw": "^0.12.0",
"nw-builder": "^3.7.0"
}
}
I'll update with any other code if needed.
I am trying to create custom user CSS for someone to use, that will remove all the extra stuff on a website they are viewing, except the body content. I figured I could use chromes inspect to get the sites CSS code, then edit it and use a custom user css extension on chrome to implement it. However the site has over 7000 lines of code in their CSS and I am still very new to CSS. Is there any simple way to make this work without having to go through 7000 lines of code?
Here is just a quick, bare-minimum, "prove of concept"-type starter of how you can achieve what you want using Firefox browser, just to get you going.
Create two files: manifest.json and RemoveStuff.js.
Put this inside manifest.json
{
"manifest_version": 2,
"name": "RemoveStuff",
"version": "1.0",
"content_scripts": [
{
"matches": ["*://*.google.com/*"],
"js": ["RemoveStuff.js"]
}
]
}
and put this inside RemoveStuff.js
document.getElementById("lga").outerHTML='';
Now using Firefox browser navigate to about:debugging, click Load Temporary Add-on and select RemoveStuff.js. Now go to google and you shouldn't see google's logo (or whatever picture/animation they have there).
You can start learning about Firefox extensions here, or Chrome here
I have an extension that use an iFrame to embed a website in it, i want to inject a content script in it to modify the page inside the frame, i have managed to do that using:
"content_scripts": [{
"matches": ["http://website/*"],
"js": ["js/jquery/jquery-3.2.1.min.js", "src/myScriptToInject.js"],
"all_frames": true,
"run_at": "document_start"
}],
It works as intended but the problem is if i go now to the original website, it will naturally inject my script into it making it literally broken.
So i tried using chrome.tabs.executeScript(tab.id, {allFrames: true, runAt: 'document_start', file: 'src/myScriptToInject.js'}); but the thing is, if i understand correctly, i can not inject a script in a chrome extension for "security reasons".
Is there a way i have not thought of or a trick that would help me ?
I'm writing an extension for Chrome (currently testing in Chrome 51). I need the content script to run in dynamically created iframes.
For example, if I understand correctly, this site creates a new iframe each time the user clicks "Run".
This is my manifest (well, parts of it, which I thought were relevant):
"content_scripts": [
{
"matches": [ "<all_urls>", "http://*/*", "https://*/*"],
"match_about_blank": true,
"all_frames": true,
"run_at": "document_start",
...
}],
"permissions": [
"<all_urls>",
"http://*/",
"https://*/",
...
]
But the newly created frame still doesn't get my content script. I put a breakpoint in my content script's entry point and it isn't hit (it only hits for the main frame of the page, but not the frame which was dynamically created).
I know there are other similar questions but the Internet seems to be in agreement that match_about_blank is the way to go, but it doesn't work in my case.
UPDATE: So it turns out this wasn't the problem at all. I would have deleted the question (cause truly it's kind of embarrassing), but still there's a lesson to be learned here, since I spend A LOT of time investigating why my script isn't loaded.
In fact it WAS loaded. The breakpoint didn't hit probably because of some glitch in the map and/or source files (when I recompiled my TypeScript project and copied the files again, the breakpoint started hitting). I should have trusted the debugger window to see that my content script was loaded, instead of insisting on hitting the breakpoint...
if I write a Chrome extension that runs a snippet of JS on a page, will it also run in any iframes I create? If so, does this apply for iframes created by Javascript after the DOM has loaded?
Thanks!
Yes, a Chrome Extension "content script" can run in all iframes (that are initially in the HTML when the page is loaded). In order to have the content script run in all frames you need to configure it to do so in the Chrome Extension manifest.json using the all_frames property:
http://code.google.com/chrome/extensions/content_scripts.html
{
"name": "My extension",
...
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["mystyles.css"],
"js": ["jquery.js", "myscript.js"],
"all_frames": true
}
],
...
}
No, the content scripts will NOT execute in the iframes loaded dynamically via JavaScript in the page.
Content scripts defined in the manifest (with "all_frames": true) will run on newly created iframes. What matters is that a new navigation starts for every frame, and content scripts are scheduled to be injected at that point.
In contrast, if you dynamically inject code with chrome.tabs.executeScript(), then it will only be injected in the frames present at the time you call it. You'd need some mechanism to detect new frames (Mutation observers? webNavigation API?) if you want to keep up with them.