I am beginner in Chrome extensions development. I need to extend existing extension (angularjs-batarang), but I have some problems with debugging.
manifest.json has entries:
"background": {
"page": "background.html"
},
"devtools_page": "devtoolsBackground.html"
The question is: how to debug devtools_page? I added to manifest.json additional entry
"options_page": "devtoolsBackground.html" and when I add this extension to Chrome I have possibility to run options page from chrome://extensions.
It works because application stops at breakpoints. But unfortunatelly I have no access to chrome.devtools API. So it is not solution.
How can I debug this and have access to this API?
To open the developer tools for a devtools page, I usually follow the following steps:
Open the developer tools.
Undock the developer tools if not already done (via the button in the bottom-left corner).
Press Ctrl + Shift + J to open the developer tools of the developer tools.
Optional: Feel free to dock the developer tools again if you had undocked it at step 2.
Switch from "<top frame>" to devtoolsBackground.html (or whatever name you have chosen for your devtools). (example)
Now you can use the Console tab to play with the chrome.devtools API.
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'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
I understand that I can log to the console when using a Firefox extension with the cfx run command.
Is there a way to log to a console after the extension has been packaged with cfx xpi? Logging to Firebug is fine if possible.
I have found two blog posts about this (here and here). Both are rather old and don't work any more.
I'm using version 1.10 of the add-on SDK and FF15.
You need to do 2 things:
enable logging for addons
• in about:config, add a new option extensions.sdk.console.logLevel and give it the value "all"
• restart Firefox
in Firefox open the Browser Console:
• Tools -> Web developer -> Browser console
• NOTE: this is different from the usual Web Console used to debug web pages
You should see addons logs there now.
TLDR:
Go to about:config url and create key extensions.sdk.console.logLevel with value all
See log messages either in Browser console (Ctrl+Shift+J) or in terminal you started Firefox from.
cfx or its successor jpm creates this configuration key automatically in development firefox profile.
From logging documentation:
extensions.sdk.console.logLevel: if set, this determines the logging level for all installed SDK-based add-ons.
extensions.extensionID.sdk.console.logLevel, where extensionID is an add-on's Program ID. If set, this determines the logging level for
the specified add-on. This overrides the global preference if both
preferences are set.
I will summarize recent changes that has taken with Firefox since this question got posted -- basically updated #LucaBonavita answer.
In about:config, check if option extensions.sdk.console.logLevel is enabled. If not, toggle to enable. You might need to create it if it does not exist
Open Browser Console
Menu Bar -> Tools -> Browser Tools -> Browser Console
Enable Show Content Messages in browser console.
Now, console.log triggered by Firefox addon/extension should display
Tested on Firefox 94.0.2 (64-bit) and 95.0b12 (64-bit)
Have you tried console.log() with Firebug? (I know you have tried Application.console.log() and Firebug.console.log() already)
I just tried it in the Web Console on FF16 running Firebug 1.10.4 and it seems to work:
Here are some more examples from the Firebug Wiki itself: FirebugWiki Console API
Additionally, you can write messages of different types in the console, such as: console.debug(), console.info(), console.warn(), console.error()
If you run console.log from Add-on code, it send up in the 'Messages' tab of the Error Console window:
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)