I've created an addon using the addon SDK and installed it in Firefox (version 35.0.1). The addon has the following files -
data/login.js (content script file)
lib/main.js (main addon code)
test/test-main.js (auto-generated)
package.json
In the main addon code I'm creating a panel, and the content script file is loaded using the contentScriptFile property of the panel. However when I launch the addon debugger, I'm able to see only the main.js script and not the content script. I've checked that the xpi file actually contains the content script file. So why isn't the debugger showing it?
I think I found it (using Firefox Developer Edition 42.0a2 though).
Open the Default Web developer Tools (Ctrl+shift+I)
Go to Settings (cog wheel top right)
Enable "Advanced Settings" > "Enable worker debugging (in development)"
Enable "Inspector" > "Show Browser styles" (for seeing your content style (files))
Reload the page
Try using the browser toolbox or the browser content toolbox which is not scoped to a single addon.
Afaik the addon debugger only shows scripts running in the same compartment as the addon main, which may miss scripts running in sandboxes/other compartments.
Its probably an error in your content script code that prevents the file from appearing in the debugger file list. I had this problem and it's difficult to find these errors as the Firefox error log often doesn't refer to the which file is in error or the line number. Check for unpaired braces that kind of thing
Related
Previously, I could write an addon for personal usage packed as something.xpi and I clicked on it to install it.
After a while, mozilla introduced xpinstall.signatures.required which you could still get around it.
However, it did not stop stabbing developers who are interested to have a personal addon isolated from the world. Today, only web extensions are working and my XUL based addon is thrown away. The tutorials only talk about temporary installation of a web extension while I want my one runs on firefox forever.
Beside whether I can use web extension to write into files or create a GUI in an independent page, I have a bigger challenge:
How can I install a local web extension permanently without creating a Mozilla account for personal usage?
Navigate to the folder where your extension is located. You can build it in the usual way using web-ext:
web-ext build
You can install this ZIP file permanently in Firefox by going to about:addons and dragging this file into the tab.
In order for this to work, you need to set xpinstall.signatures.required to false in about:config (works only for Nightly and maybe Developer Edition).
Apart from setting xpinstall.signatures.required to false, you need to add this to your manifest.json:
"browser_specific_settings": {
"gecko": {
"id": "some-name#example.org"
}
}
Found on https://www.reddit.com/r/firefox/comments/blqffs/how_to_permanently_add_temporary_addon/exh2u3o/, thanks to "alexherbo2".
You need a "blueish" Firefox -- Developer Edition (effectively beta) or Nightly (unstable, updated every night).
You can get them from https://mozilla.org/firefox/channel/desktop/.
Then xpinstall.signatures.required will work again.
(As for permissions--you can create a GUI in a tab or a popup, but I don't think you can do it in a separate window (unless you do a webpage-style popup window). You won't be able to write to arbitrary files anywhere on the system--which is a good thing! You can write to the Downloads folder, and read/write some sort of internal storage, but that may not expose the actual files involved. For more information see https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Working_with_files.)
What you should be looking for is having your extension signed by Mozilla as Unlisted.
See Mixing Listed and Unlisted Add-ons on addons.mozilla.org blog post for an overview.
That way, AMO does not host nor (normally) review your extension; it simply runs some basic automated checks and immediately signs your extension so that it can be privately distributed as an XPI.
For those interested in developing/running an extension from a local directory without having to package or load it manually via "Load Temporary Addon..." from about:debuggin#/runtime/this-firefox please go to this github repository.
From the README.md:
The procedure involves a few steps, but it needs to be done only once.
First you need to enable AutoConfig aka userchrome.js by copying the file config-prefs.js to [Your Firefox install directory]/defaults/pref
Note: For best security, on Windows it is best to leave your Firefox install in "c:\Program Files" so that your config-prefs.js and userChrome.js can only be modified when you are in root/admin mode.
Then you need to edit the file userChrome.js and modify the function installUnpackedExtensions() to reflect the locations of your own addons.
The modified userChrome.js then must be copied to your Firefox installation directory. For example on Windows this is usually "c:\Program Files (x86)\Mozilla Firefox" for the 32-bit version of Firefox. You can rename the file, but remember to modify the corresponding line pref("general.config.filename", "userChrome.js") in defaults/pref/config-prefs.js
Now your addons from your local directories will be loaded automaticaly whenever Firefox starts. After editing your code remember to reload it from about:debuggin. You can also get there via the menu by selecting "More Tools", then "Remote Debugging", and click on "This Firefox" on the left side (but the quickiest way is to bookmark it and then add a bookmark keyword such as "dbg" for quick access.)
Please note that this is an automated install of the extension every time Firefox starts, so it is not quite the same as a "permenent install". That is, this procedure has exactly the same effect as clicking on "Load Temporary Addon..." from the about:debuggin page, just that the process is now automated via userChrome.js. This means that if you have code that does something after the installation of the extension such as browser.runtime.onInstalled.addListener(details => { if (details.reason == "install") { ...do something after install... }); then this code will be called every time Firefox is launched.
You can try setting the preference extensions.legacy.enabled (this will only work in Nightly or Dev Edition).
I have FF (v.35), Opera (v.12), and IE (v.11) installed on my Win 7 x64 PC and wanted to debug a (locally stored) HTML file that loads a JS script.
After adding the file to a new project, I went to File > Settings > Tools > Web Browsers and unticked the web browsers that I do not have installed.
So those settings now looks like this:
After that I went to "Edit Configurations" and added the HTML file that I wanted to debug, as shown below:
(note that the HTML file is not empty, even though it is named that way)
Now if I click on the 'Debug (default)' button, I get these messages that Windows has a problem finding chrome and WebStorm is waiting for a connection from the Chrome plugin:
On another hand, if I click on the 'Run (default)' button it opens the page in Firefox as expected.
I am either doing something wrong or have something misconfigured.
How can I tell WebStorm not to use Chrome for debugging?
Thanks,
Simply put, JetBrains WebStorm does not support the JavaScript Debug configuration in any browser other than Chrome (or other Chrome-based browser such as Dartium).
To debug in FireFox versions 33-35 (for WebStorm v.10 this does not work in FF v.36), you have to enable Remote debugging in Firefox and then use the Firefox Remote run configuration, as explained here: https://youtrack.jetbrains.com/issue/WEB-13801#comment=27-904044.
ATM run/debug configuration of "JavaScript Debug" type only supports Chrome.
https://youtrack.jetbrains.com/issue/WEB-14987 -- watch this ticket (star/vote/comment) to get notified on progress (currently planned for WebStorm v11).
To debug using Firefox you have to use "Firefox Remote" type of configuration instead (for additional stuff /issues -- see related tickets).
I want to debug my firefox extension. I set
javascript.options.showInConsole = true
devtools.chrome.enabled: true
devtools.debugger.remote-enabled: true
run in sdk console cfx run, after that i go to Web Developer -> Browser Toolbox get incoming connection and i see my extension main.js. But after that, the code in main.js already been executed. How to debug it after cfx run?
also, two other things might be messing with your approach:
1) when you use cfx run, that by default creates a new profile on every run, so any settings that you have changed will not persist. to avoid this, you need to specify a profile directory with --profiledir=DIR (warning: don't use your main profile).
2) if the addon main.js code has already run by the time you open the debugger, you should start firefox manually, setup the debugger, and then drag the addon xpi into a tab.
Bug 899054 - [Meta] Implement an Add-on Debugger
this is really close to landing (the UI bits in bug 911098 are in m-c), so if you grab a Nightly tomorrow, or the day after, it should be in there, and might just work (for some undefined value of "work").
I need to trace redirect using network tab, but it works only if I open web inspector and then reload page. Unfortunatly, I open this page from external native program and need to found, which URL is passed to browser. Is it possible to do this? I bneed to do this on Windows 7.
As far as I know this isn't possible. The complete list of up-to-date chromium command line switches can be found here: http://peter.sh/experiments/chromium-command-line-switches/
I thought you might be able to to get something working using --wait-for-debugger-children, giving you enough time to open the developer tools before the page loads, but setting that flag also gives the developer tools a 1 minute delay before loading.
Debugging a Firefox addon is a slow process: (1) edit source code in a JS editor (2) package into XPI using a build script (3) drag into Firefox to install (4) restart Firefox (5) open the JavaScript Debugger
Can we speeden up the process? Like install it into Firefox without a restart, or configure the build script to install it into Firefox as well?
You'll want to locate your profile folder. Once you find it, go into the folder called 'extensions', and then locate the folder for the add-on you are working on. Replace that folder with a file of the same name (minus .xpi if that's part of the name), and inside the file place the full path to your source directory of the add-on.
In Linux and Mac, that'll look like:
/full/path/to/yourExtension/
And on Windows:
C:\full\path\to\yourExtension\
Remember the trailing slash and beware of extra whitespace.
As long as you don't use jar files inside your add-on, you will no longer have to rebuild (this is covered in a bit more depth here).
Additionally, you'll want to set nglayout.debug.disable_xul_cache to true. For edits to xul or js files, you'll just have to open up a new window to see your changes instead of restarting the application. There are other preferences here that you may find useful as well.
Extra tips:
Starting firefox with a certain profile (dev), while other firefox profile is open and with the debugger already on:
"C:\Program Files (x86)\Mozilla Firefox\firefox.exe" -no-remote -P dev -jsconsole
Check out the restart addon (saves time).
i use Netbeans with the Foxbeans Plugin for addon development, there you just press the "run button", and firefox starts up with the addon installed (into a test profile). maybe you should give this a try!
You need the "edit source" and "restart firefox" steps; they can't be removed from the process...
When you install the addon, the javascript ends up on disk, in your firefox profile. If you edit it in there, and restart firefox, the new stuff will be picked up. When you're done, create the xpi from the files in your profile.
http://simplygenius.com/2005/08/debugging-firefox-mozilla-extensions_25.html contains a good description of debugging FF extensions in venkman
Came here via google - FF nightly 31 has new tools for debugging add ons. Its a god send. Details here:
https://blog.mozilla.org/addons/2014/04/08/add-on-debugger-now-in-firefox-nightly/
To make development of the add-on faster, an important goal is to eliminate restart of FF to test every code change. Three options that I can think of:
Use the FF nightly 31 build, based on the other answers in this post.
Use the following add-on https://addons.mozilla.org/en-US/firefox/addon/autoinstaller/
Build it in your code with a restartless add-on. Refer to the answer in this post firefox restartless bootstrap extension script not reloading
I have used the last two options and it works greatly for me.
You can also set dynamic breakpoints via the debugger keyword. Open the "Browser Toolbox" to make the debugger stop at the line.
I think it's nice because you don't have to lookup the source file and line after every restart.
Also take a look at this Debugging extension code in firefox answer which mention the improved debugger capabilities for restartless extensions since Firefox 23.
As of 2022 most of the old answers are quite outdated.
Installing unsigned extensions/addons/themes is not possible anymore for the Release versions of firefox, especially just copying them into the profile/extension folder ("sideloading", see here).
Only ESR, Developer, Nightly and Unbranded versions of firefox still allow installation of unsigned extensions.
Mozilla gives a nice Firefox workflow overview for creating extensions.
For running and debugging extensions you can use the tool web-ext or the following (both methods described in link above):
in firefox open a new tab exteand type about:debugging
under This Firefox you can Load temporary Addon... to load your extension
(don't load a .xpi file, just select any file within the directory you develop your extension in)
the extension is loaded and you can debug it
you need to use the Browser Toolbox to debug extensions
in case the devTools won't work make sure devtools.chrome.enabled = true in about:config
when you made code changes you can click Reload in the debugging tab
Finally, after coding and testing, when you want to create a new .xpi file, VS Code's Tasks are handy.
This here is a very simple task that uses 7-zip on Windows to create a .xpi:
{
"version": "2.0.0",
"tasks": [
{
"label": "Make Theme .xpi",
"type": "process",
"windows": {
"command": "C:\\Program Files\\7-zip\\7z.exe",
"args": ["a", "-tzip", "${relativeFileDirname}-theme.xpi", "${fileDirname}\\*"]
}
}
]
}
(this snippet uses variable substitution to read files and put .xpi file into specific dir)