I'd like to create Chrome bookmarks that perform actions when clicked. The vast majority of them will be manipulating the URL and reloading the page. Can you make Chrome bookmarks that contain large amounts of Javascript? Maybe even jQuery?
The better approach would be using javascript to load an external script and append it to the <head> of the document, this, IMO, makes it easier to work with your script as only the call to load the resources needs to be bookmarklet'd*.
Example : Load external jQuery script via Bookmarklet
For example, if you wanted to load jQuery onto the page you're looking at, you could run this bookmarklet from your bookmark bar. (Disclaimer: Best to do a check for jQuery already on the page to avoid conflict. More on that here ).
javascript(function({var%20external_script=document.createElement('script');20external_script.type='text/javascript';20external_script.src='http://code.jquery.com/jquery-latest.js';document.getElementsByTagName('head')[0].appendChild(20external_script)})();
*Note that it has been minified and URL encoded. If you use Textmate, there's an option to "Copy Javascript to clipboard as bookmarklet" which does the minifying and encoding automatically.
Worth pointing out that you can load multiple resources into the DOM with this method, including stylesheets.
Related
I am planning to analyse the top javascript libraries used in the web-pages found on Google search.
While doing the initial analysis, jsoup seems to be a good choice to connect to google and get the search results.
On top of this, I want to go to each and every search result URLs to get the javascript libraries used.
Does jsoup provides support this feature. Or for my use-case, any other libraries I can use on top jsoup.
Note : I am in analysis phase, yet to start the development?
If you want to use Jsoup you have to make sure the page your're parsing is not dynamically modified by javascript. So there are two things to consider:
Are all the links you want to parse in page source and are not added dynamically into DOM after the page is loaded? You can test it by disabling javascript in your browser and browsing page. Google works without javascript so that's not a problem.
Are all the scripts in the page source and no scripts are added by javascript after the page is loaded?
You can check it by analyzing raw page source visible in most browsers with using "View source" option and comparing your results with what you get by using firebug/inspector.
If you want to parse many pages the result may be missing dynamically loaded libraries. Jsoup will find:
<script src="jquery-3.3.1.min.js"></script>
but it will not be reliable to parse:
<script>
new Element("script", {src: "jquery-3.3.1.min.js", type: "text/javascript"});
</script>
because this one would require executing javascript.
I want to create my own Userscript for Tampermonkey for a specific site I often use and I want to add some features and I want to improve some things.
Since it loads some .js files, that do some stuff I don't want to happen, I want to replace these .js files and reimplement the things I need within my Userscript.
I don't want to replace functions, I want to completely remove specific .js files from the DOM before they get executed and reimplement them in my Userscript to my preferences.
I tried to use this method: http://userscripts-mirror.org/scripts/show/125936
But it didn't work at all, no errormessages or similar, it just doesn't execute the Eventlistener, I use Chrome, could it be that this has to be implemented in another way for Chrome?
beforescriptexecute event referenced in your question isn't implemented in Chrome and probably never will be.
There is no way for a userscript in Chrome to prevent some webpage script that is referenced in the page html <script> tag from loading.
The only solution is to use an extension that blocks urls via webRequest API.
If you don't mind making your userscript dependent on another extension then use HTTP Request Blocker, Requestly and others.
For a complete solution without dependencies you'll have to make your own extension, not a userscript.
I'm going to write a simple chrome extension using jQuery and jQuery UI. Before I start, however, I want to know: what might happen if a web page that my extension is going to interact with also uses this libraries? Can there be any conflicts (e.g. CSS for my jQuery-UI theme messing up the page's jQuery-UI theme)?
Javascript is sandboxed so there will be no conflicts, but CSS isn't, so any styles on parent site will affect your styling and vice versa (aka a nightmare).
Yes there can be conflicts, however you can prevent them. When you are setting up a theme, you need to download it with a namespace(you can find that setting in the right column of the jquery ui custom download page), and then use that namespace in your extension. The only possible issue at that point is if the site that is being viewed uses the same namespace that you choose, so make sure you choose something that won't have that problem.
It depends what type of extension you are making. If you are making a replacement for an existing Chrome page, well, it will be a full replacement (http://code.google.com/chrome/extensions/override.html). If it is a popup through either page (http://code.google.com/chrome/extensions/pageAction.html) or browser (http://code.google.com/chrome/extensions/browserAction.html) action, then again, you will have no conflicts because all of your code is sandboxed to itself.
The only time I can think of that you will run into an issue is if you are using content scripts (http://code.google.com/chrome/extensions/content_scripts.html), or actually injecting your code into the page by other means. Then, yes there could be conflicts, as the browser now runs your code along side the web sites code. Depending on what you need to do, you could try injecting your code as an iframe, but that will also prevent it from interacting with said web page.
<iframe src="yourPageUrl" height="iframeHeight" width="iframeWidth" style="border:none;"></iframe>
So without knowing what your extension's purpose was, it would be hard to know exactly how to help.
Is there a way to download javascript without executing it? I want to decrease my page load times so am trying to "lazy load" as much javascript onto the page while the user is idle. However I don't want the javascript to execute, I just want it to be in the browser cache.
Should I use an object tag? I noticed that I can use a LINK tag but that makes the browser think it's css which has a negative impact on my ui perf / responsiveness.
As long as you have all code in functions or classes and nothing in global scope nothing will execute.
You can then start your script with a call from
window.load(function() { //your initialisation here });
This will let the whole page load before running any scripts.
You could also add script references via script to make sure they load after any images in the page.
Just add a script element to head using script and it will load.
These pages has examples for this:
http://unixpapa.com/js/dyna.html
http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
This way if you have a slow connection or a sever that is overloaded, the visible elements will be loaded first by the browser.
As far as I know, there is no cross-browser compliant way to get around JavaScript loading in serial. If your javascript does something when it is loaded, you need to refactor your code. For instance, you don't write your jQuery commands/actions/code in the jQuery library script; you link the jQuery library and then put your jQuery commands into a separate file. You should do the same thing with your custom libraries. If this isn't possible, you have a big problem with the architecture of your code.
Also, make sure you stick non-executing JS at the bottom of the page near the </body> tag. This will allow everything else to load first, so that the bulky JS libraries don't slow down things like CSS and images.
The best practices way to deal with external javascript is to have it load after everything else on the page by putting it at the bottom of the page. Then everything that can be rendered will be and display and then the javascript at the bottom of the page will load and be compiled and cached. Of course this only works if the javascipt is a library of functions that don't need to be executed mid-page, in that case, you are stuck with serial javascript loading compiling and execution regardless.
Require.JS is a great library for automatically managing when your javascript loads.
You could load the file using the XMLHttpRequest object in JavaScript. (Aka AJAX). (end then of course just discard the result ^^).
My employer is blocking the Google CDN domain that provides the jQuery file to so many websites:
http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js
I want to use GreaseMonkey to provide that jQuery reference from a different domain. Is this possible? Can I use a GreaseMonkey script to tell a page to load it's jQuery reference from this URL instead?:
http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js
You could have GreaseMonkey add it's own javascript reference, but the problem will likely be that your jQuery code will have already run before jQuery is loaded. Is it possible to call the jQuery code after your GreaseMonkey script loads jQuery again? It seems that you'd have to restart execution of the jQuery code on the page in order for this to get the results you're looking for.
Greasemonkey acts when the DOM has already loaded. You can try to rewrite the code before it gets rendered with a full fledged browser extension. Look into LiveHttpHeaders. I think it may be useful because it intercepts the page before getting to the browser. Based on that, you can then rewrite the source to suit your needs