I'm trying to write a Firefox extension that intercepts a certain HTTP request and return static content without the request making it to the actual server (similar to AdBlock).
I've looked up the tutorials and I've got a basic file layout. I've also worked out that I need to use the nsITraceableChannel API and add an observer to do what I want and I have example code for that.
Problem is, where do I actually put this code? And when is my extension actually loaded and executed? Is it running constantly and asynchronously in the background or is it loaded per page view?
The documentation doesn't seem very clear on this. This extension won't need a GUI so I don't need the layouting XUL files (or do I?). I tried writing some XPCOM (I don't think I did it right though) component, registered it in chrome.manifest but it doesn't seem to run.
Can anyone explain exactly how the Firefox extensions work and where should I put my actual JavaScript code to monitor requests? Or have I got the whole idea of what an extension is wrong? Is there a difference between add-ons, extensions and plugins?
Concerning the difference between add-ons, extensions and plugins you should look at this answer. But in general, you seem to have the correct idea.
The problem is, there are currently three very different types of extensions:
Classic extensions (not restartless): these will typically overlay the browser window and run code from this overlay. Since there is one overlay per window, there will be as many code instances as browser windows. However, classic extensions can also register an XPCOM component (via chrome.manifest as of Gecko 2.0). This component will be loaded on first use and stay around for the entire browsing session. You probably want your component to load when the browser starts, for this you should register it in the profile-after-change category and implement nsIObserver.
Restartless extensions, also called bootstrapped extensions: these cannot register overlays which makes working with the browser UI somewhat more complicated. Instead they have a bootstrap.js script that will load when the extension is activated, this context will stay around in background until the browser is shut down or the extension is disabled. You can have XPCOM components in restartless extensions as well but you will have to register them manually (via nsIComponentRegistrar.registerFactory() and nsICategoryManager.addCategoryEntry()). You will also have to take care of unregistering the component if the extension is shut down. This is unnecessary if you merely need to add an observer, nsIObserverService will take any object implementing nsIObserver, not only one that has been registered as an XPCOM component. The big downside is: most MDN examples are about classic extensions and don't explain how you would do things in a restartless extension.
Extensions based on the Add-on SDK: these are based on a framework that produces restartless extensions. The Add-on SDK has its own API which is very different from what you usually do in Firefox extension - but it is simple, and it mostly takes care of shutting down the extension so that you don't have to do it manually. Extensions here consist of a number of modules, with main.js loading automatically and being able to load additional modules as necessary. Once loaded, each module stays around for as long as the extension is active. They run sandboxed but you can still leave the sandbox and access XPCOM directly. However, you would probably use the internal observer-service module instead.
Related
The idea is that when I open a certain site in Chrome using a desktop shortcut, I want a certain script to be automatically executed via the console. It is desirable that it starts executing when the page loads. This can be done? Through the properties of the shortcut or maybe a .bat file?
I want to make a shortcut for a quick reboot of the router, which, after opening the settings page, will log into the account and click on the necessary buttons to reboot. In manual mode, everything works, but I don’t know how to automate.
You can create your own chrome extension that does certain actions depending on what happens in the browser, it is actually quite easy to do and there are multiple guides out there on how to do it.
I will shamelessly plug my own guide on how to create one with react, be aware there are many other and probably better guides out there:
Guide
I have a long time stick with Conkeror as my default web browser and get used to configuring/adding new features to my browser using js code with all the XUL Api through the .conkerorrc file. I'm migrating to Firefox since it has better support and is actively maintained by Mozilla. However, one of the feature that I've been missing so much is the dot file, which I can easily configure anything that I like, back up all of them through git and eval the code directly (using Mozrepl) while I'm coding to see the result.
Is there any way that I can inject/execute a sciprt on Firefox startup, for example ~/.firefox/index.js?
There is no functionality in stock Firefox to execute JavaScript code supplied by the user at startup. Functionality like this has been something that has been requested of Firefox since 2006-04-02.
It is trivial to write an add-on in any of the different Firefox add-on types (XUL/Overlay, Restartless/Bootstrap, Add-on SDK, or WebExtensions) which would run whatever JavaScript you desire upon Firefox startup. This could be done to either run code that was included in the add-on (simple), or that runs the JavaScript contained in a file that is loaded from a location external to the add-on (more complex). Which add-on type you used to implemented this would impact which interfaces you had available within the code you write. One drawback of writing your own extension which runs code included in the add-on is that in order to use it with a release, or beta version of Firefox is that you would need to have it signed by Mozilla. While this is a quick and easy process, it does add some additional overhead to the development/test cycle.
You have not specified any of the firefox-addon tags in your question. In addition, you have not described the functionality you desire, except as generalities. It also does not appear to be the intent of your question to ask how you would implement such an add-on. Given those and the fact that there are already multiple add-ons that implement the functionality of running arbitrary JavaScript (including XUL) code supplied by the user, I am not going to supply code here which performs this function.
However, if you are interested in using an already existing add-on, here are a few options:
userChromeJS: This extension was derived from the code originally provided as an example of how to implement the functionality requested in bug 332529. Its first feature listed is: "Complete chrome customization is possible by running custom javascript code or overlaying chrome with .xul overlays." This is an Overlay based add-on with which you can use XUL. This sounds like the functionality what you are interested in obtaining.
uc: "A userChromeJS clone with built-in subscript/overlay loader capability."
Greasemonkey: "Customize the way a web page displays or behaves, by using small bits of JavaScript." This is a commonly used add-on which permits writing more complex JavaScript code. The code is executed in a sandbox, not in the scope of an extension. This is done for security reasons.
Custom Style Script (Inject desired CSS or JS): "Add Custom JavaScript Codes or Styles (CSS) to an specific page or all pages."
I have a migrated SharePoint application that brought over a bunch of old JavaScript files. One of these files is causing errors in the new environment but I'm unsure of the culprit. They aren't throwing console errors, but rather modifying elements by adding unwanted attributes and classes
Is there a way to prevent the loading of individual .js files without modifying the source? I know blackboxing will prevent the debugger from stepping into the code, but it still loads. If I can narrow it down to one file, I can fix the conflicts that are occurring
Another solution is using Fiddler (http://www.telerik.com/fiddler). It allows you to isolate particular js files and either force them not load, or it allows you to inject your own local JavaScript files on the fly. This way you don't have to migrate your project/solution locally for testing, you can continue to run this on your sharepoint server, and use your own local JS files..
Good luck!!
For the record, this can now be done directly in Chrome Devtools as of version 59.
Load the page, open devtools, then click the network tab. Find the request you'd like to block, right click on it, then select "Block request URL" & reload the page. That resource will be blocked this time around.
Very useful!
Ok, posting this as an answer:
Although intended for other uses, AdBlock Plus can do what you're asking, and it's available for all major browsers.
Just set up a filter like example.com/path/to/your.js and that script should no longer get loaded.
It isn't a coding question(I think :)). I have read manual about how to add bootstrap in to my FireFox extension, but what doing next?
I added bootstrap.js, modify install.rdf, what to do next?
What I need to do wiith my files in content folder?
My extension structure:
./chrome.manifest
./Icon.png
./Install.rdf
./chrome/content/Overlay.xul
./chrome/content/Overlay.js
./chrome/content/Options.xul
./chrome/content/Options.js
./chrome/content/Window1.xul
./chrome/content/Window1.js
./chrome/locale/<locales>
I written FireFox extension that's need browser restart, but restart isn't needed for extension work. I want remove that action, and I found something about bootstrap.
I think, now I need manually (un)register my windows, overlays, locales, where read about that?
Please, give me more info, url, links, how to modify my extension into bootstrapped.
Some chrome.manifest directives, e.g. chrome, skin, locale, are supported in bootstrapped extensions, so nothing special you need to do there.
Overlays are not supported, however. You need add some code that will use the DOM APIs to manually insert and/or change elements you normally would have in your overlay.
The "Further reading" section of the docs you already linked contains some stuff. Most bootstrapped add-ons I encountered use some variation of the watchWindows stuff.
It might be also helpful to look at real world examples, such as Restartless Restart (which happens to be rather small, and easy enough to understand).
I have a web page which includes insane amount of minified JS files. The web page works perfectly fine on my local network but throws some JS error on staging. There is an issue in JS and I wan't to debug it. When I load the JS in Firebug's script tag it appears in one long horizontal line. Is there a way out in Firebug that expands or beautifies the script for debugging? I know I can use jsbeautifier but they wont help me. I can not upload an expanded file to CDN, defeats the purpose of using CDN.
Points to be noted,
a) I can not control the box which serves JS, its on CDN, I mentioned it.
b) I can use beautifiers etc but would that help me in debugging the script in run time? IMHO, no
c) Being bound by NDA and other legal things I can not share the script but its a generic problem, you can encounter it with a minified jQuery
Beautify your script
Add the CDN host in /etc/hosts or your local DNS to resolve it to your own web server
Host the beautified version and everything that you need on said web server
Both Firefox and Chrome (versions as of this edit) support beautifying script with the {} button available in the inspector.
Just load the minified file and press the {} button at the bottom and it instantly beautifies, making breakpoints and other debugging possible. (True for Chrome too)
This is a common problem and the Chrome dev team have recently come up with an elegant solution, which they've called Source Maps - see http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/ for more info, I think you'll find it's exactly what you (and the rest of us) have been crying out for! :)
This is more a workaround, but it can help. The idea is that we will replace files coming from the server by files on your machine.
This will work with any browser.
It takes a bit of setup the first time (15 minutes maybe), but then it can be very convenient.
It can also helps testing your bug-fixes in a live/prod environment.
Get Fiddler (it's a web debugging proxy), install it, run it.
http://www.fiddler2.com/fiddler2/
(Restart browser after install to get the Fiddler extension)
If you debug an HTTPS website, check this first:
http://www.fiddler2.com/Fiddler/help/httpsdecryption.asp
From now on, you should see in Fiddler ("Web Sessions" pane on the left) all downloads made by your browser, including JS files.
If not, check this : Fiddler not displaying sessions
Find the file you want to debug in the list (Ctrl+F works)
Click on the file. Then either:
get the file content from the inspectors pane (textView tab), beautify it, save to a file on your local computer
or have access to a file which contains the source code (ex: from your source control)
Go to AutoResponder tab (top left pane).
Select "Enable automatic responses" checkbox.
Select "Unmatched requests passthrough" checkbox.
Drag your file from left pane to right pane (prefills rule editor at the bottom)
Set the other field with the path of your local file
Click the Save button
Reload the page and enjoy your debugging session.
Fiddler can do many more things, but this use-case answers the initial question.
Consider a Change!
Firefox w/ Firebug was my favorite JavaScript debugging method for almost a year, but I've recently moved to Google-Chrome's Developer-Tools which is far more superior.
Chrome supports an On-The-Fly (built-in feature) beautification of JavaScript resources
Once beautified, you are free to debug the JavaScript resource file, as it was "natively" downloaded beautified from the web-server. Breaking-points are set by clicking the line number.
One of the most extremely powerful feature,
Is once You've Stopped In A Breaking-point, You Are Free To Execute Commands (using console) In The Same Scope You ARE In The Breaking-point. In Firefox you can't do that.
Its so easy to debug (even anonymous functions), You'll never be back to Firefox.
Try It!
Pretty-print your JavaScript. Google this and you'll find multiple on-line JS beautifiers.
I happen to use http://jsbeautifier.org/ myself and it works fine, but search for others and use one that suits your needs.
Caveat: You still won't be able to get meaningful local variable names (which are usually renamed by a minifier). If the code was compiled by the Closure Compiler, then you absoutely won't get any useful information back at all, even when beutified, because then all variables and functions and properties are mangled (not only local ones).
Now, if your problem is with debugging code that comes from outside (e.g. a CDN), obviously that code would be minified, and you can't save your beautified version back there. In this case, you can replace the tags that load code from a CDN with a url pointing to your local version, then you can beautify the code (downloaded from the CDN) into your own server and you can then debug with FireBug.
Now, if you don't even control the HTML that contains those tags (e.g. they reside on a outside server), then unfortunately there is no way for you to do what you want without physically downloading the entire site to your own server. Even if you downloaded the entire site (with all the files), it may not work since the site may be driven by a back-end processing language or accesses a back-end database. In such case you'll also need to simulate all those data. It can be done, however -- you just have to go through a lot of pain. My recommendation is to save a version of the web page and run it on your own server, serving beautified code from your own server to debug.
Placing breakpoints on JavaScript makes debugging much easier, but if your code has already made it to production then it's probably been minified. How can you debug minified code? Helpfully, some of the browsers have an option to un-minify your JavaScript.
In Chrome and Safari, simply select the 'Scripts' tab, find the relevant file and then press the "{ }" (pretty print) icon located in the bottom panel.
In Internet Explorer, click the tool icon by the script selection drop down to find the option to format the JavaScript.
Opera will automatically prettify minified JavaScript. Source