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 ?
Related
I seem to be experiencing an issue where a random third party script keeps executing with each pageload on my site. I have a lot of pageview and event tracking in place and all of that is managed via GTM.
Script --
setTimeout(function(){var a=document.createElement("script"),b=document.getElementsByTagName("script")[0];a.src=document.location.protocol+"//dnn506yrbagrg.cloudfront.net/pages/scripts/0017/9988.js?"+Math.floor((new Date).getTime()/36E5);a.async=!0;a.type="text/javascript";b.parentNode.insertBefore(a,b)},1);
The above third party script is injecting an empty document inside the header tag. The body and the header of the doc is completely empty.The query parameter in the injected doc keeps changing.
Has anyone else has experienced this issue in the past? Any ideas what this could be?
I also have a lot of customjs variables in GTM - I wanted to see if I could search for this piece of code in one of the custom js variables - anyone knows if there is an easy way to search through all variables without going into each one at a time?
Any help is greatly appreciated.
You can Export your container as JSON file:
In Google Tag Manager, navigate to the desired container.
In the top navigation, go to Admin and then Export Container.
Select the desired container version from the selector.
Preview and confirm your export file and click Download.
(link to source: https://support.google.com/tagmanager/answer/6106997?hl=en)
Once you donwlaod the JSON file open it in any text editor and search for the code, or simply search just for the specific domain in the tag e.g. "dnn506yrbagrg.cloudfront.net". The name name of the Tag or Variable will appear in the corresponding object.
For example you should see something like this (if the code is in html tag):
...
"tag": [
{
"accountId": "001",
"containerId": "123",
"tagId": "3",
"name": "THIS IS THE NAME OF YOUR TAG",
"type": "html",
"parameter": [
{
"type": "TEMPLATE",
"key": "html",
"value": "setTimeout(function(){var a=document.createElement("script"),b=document.getElementsByTagName("script")[0];a.src=document.location.protocol+"//dnn506yrbagrg.cloudfront.net/pages/scripts/0017/9988.js?"+Math.floor((new Date).getTime()/36E5);a.async=!0;a.type="text/javascript";b.parentNode.insertBefore(a,b)},1);"
},
...
According to this documentation this seems to be the tracking code for Crazy Egg (heat maps and scroll maps) - the cloudfront URL matches. The parameter keeps changing because it's a random number generated by javascript to prevent caching.
This is obviously not part of GTM. Either you have configured this yourself in GTM or somewhere in your website, or you include a marketing tag (via custom HTML) that load Crazy Egg (which without a contract and a data processing agreement would be unethical and in many jurisdictions illegal).
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'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...
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.
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.