I'm developing a chrome plugin, similar to adblock and I'm trying to figure out how to get access to the resources being loaded on a particular page.
For example, if a page is loading an external javascript or an iframe that has some specific strings - I'd like to intercept it.
How can I see the source of these external resources? Can I use Javascript/JQuery for that or I need to use Webkit's functions?
Can you point me in the right direction please?
Related
CONTEXT
I am loading a third party website (e.g. google.com) into an iframe on my site. I would like to be able to apply my own script (e.g. jquery) to the page in order to change DOM elements, but obviously cannot due to CORS policy. I know that the solution to this is a reverse proxy but I haven't seen any simple versions or walkthroughs that explain how something like this is set up.
QUESTION
So far I've found the following two packages that try to solve this problem:
https://www.npmjs.com/package/corsproxy
https://www.npmjs.com/package/cors-anywhere
I'm not sure exactly what the simplest application of these would be to an iframe - is there an example/jsfiddle that shows this in action?
In Chrome Developers Tools, the Sources/Network tabs indicate a site has over 100 external scripts loading.
I'm trying to reduce this, however it's very hard to trace where and how each one is being loaded.
Only a handful of them are coming from traditional <script> tags in the main src. Others may be dynamically inserted, in iframes etc.
Is there any method or tool that would allow me to easily track where each script is loaded?
If I understand your question, there is a column in the Network tab that is called "Initiator" which shows where or what is calling the JS script. This includes ones that are being dynamically called and are in iFrames. Using this you can see where js files are coming from that aren't strictly on the page
I just did a proof of concept/demo for a web app idea I had but that idea needs to be embedded on pages to work properly.
I'm now done with the development of the demo but now I have to tweak it so it works within a tag on any websites.
The question here is:
How do I achieve this without breaking up the main website's stylesheets and javascript?
It's a node.js/socket.io/angularjs/bootstrap based app for your information.
I basically have a small HTML file, a few css and js files and that's all. Any idea or suggestions?
If all you have is a script tag, and you want to inject UI/HTML/etc. into the host page, that means that an iframe approach may not be what you want (although you could possibly do a hybrid approach). So, there are a number of things that you'd need to do.
For one, I'd suggest you look into the general concept of a bookmarklet. While it's not exactly what you want, it's very similar. The problems of creating a bookmarklet will be very similar:
You'll need to isolate your JavaScript dependencies. For example, you can't load a version of a library that breaks the host page. jQuery for example, can be loaded without it taking over the $ symbol globally. But, not all libraries support that.
Any styles you use would also need to be carefully managed so as to not cause issues on the host page. You can load styles dynamically, but loading something like Bootstrap is likely going to cause problems on most pages that aren't using the exact same version you need.
You'll want your core Javascript file to load quickly and do as much async work as possible as to not affect the overall page load time (unless your functionality is necessary). You'll want to review content like this from Steve Souders.
You could load your UI via a web service or you could construct it locally.
If you don't want to use JSONP style requests, you'll need to investigate enabling CORS.
You could use an iframe and PostMessage to show some UI without needing to do complex wrapping/remapping of the various application dependencies that you have. PostMessage would allow you to send messages to tell the listening iFrame "what to do" at any given point, while the code that is running in the host page could move/manipulate the iframe into position. A number of popular embedded APIs have used this technique over the years. I think DropBox was using it for example.
I'm working on optimizing my site, and one of the things Google PageSpeed is suggesting is to "defer parsing of JavaScript". I tried deferring all of my javascript files, but that breaks some functionality. I need some to load before and some after. Is there a way to determine this programmatically?
I want to add some external script to a webpage. This scripts are pluggins wich should only be able to acces and modify the part of the dom they are assign too. This scripts will be developed by eternals developers and I will not be able to control them all by hand.
I know I can easily handle this problems by creating an iframe for each pluggins to run in. Unfortunately this solution is really slow on mobile devices.
How can I sandbox this scrips without using an iframe? (I can also do some work server side)
Thanks a lot :)