How to package an unsigned Firefox WebExtension? - firefox

I'm trying to develop an extension to run on the FirefoxDeveloperEdition (which doesn't require signing) on mac.
I followed the "Your first WebExtension" guide and everything works fine when using the "Load temporary add-on". But when I try to package it and install it using the "install add-on from file", it shows "this add-on could not be installed because it appears to be corrupt".
I zip all the files (borderify.js, manifest.json, icons, without the container folder) and change the suffix to .xpi. Is this the correct way of packaging? some answers mention that there should be a "install.rdf" ?, if so, how can I create that file? it seems there is no guide on the docs.
UPDATE:
I've tried using the mac builtin "compress n items", xpi file, also tried using web-ext build, xpi file. they all end up with the same error alert.
UPDATE 2:
I've set xpinstall.signatures.required false in about:config.
My firefox version is: 51.0a2 (2016-10-17) (64-bit)
Is there anyone able to load the unsigned xpi? Is it a Firefox bug? or is it just me?

If you want to install .xpi, you need to provide an id.
Add this to your manifest.json root
"applications": {
"gecko": {
"id": "borderify#mozilla.org",
}
}
It's not particularly well documented, specifically this page tells that "add-on will be assigned a randomly-generated temporary ID when you install it in Firefox.". However, that only seems to work for installing over about:debugging - xpi installation still requires an ID. It might be any string, since you've running it on DevEdition with disabled checks anyway.
Goes without saying, that would not work on release Firefox.
P.S: Ctrl-Shift-J will open a browser console that will usually contain additional information about the extension installation error - might be useful next time.

Related

Install a personal firefox web extension permanently

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).

Firefox add-on signed by Mozilla “appears to be corrupt” when trying to install locally

I created a simple Firefox extension (using WebExtensions) that I want to use every day in Firefox without publishing it on addons.mozilla.org (AMO). I was able to install it temporarily and verify that it works by going to about:debugging, clicking on the "Load Temporary Add-On" button, and opening the manifest.json file.
Since I want to use the extension without having to go through that process every time I restart Firefox, I packaged it into an XPI file and tried installing it like a regular local extension. I archived the two files (manifest.json, content_script.js) and the one directory (icons/) into a ZIP file and renamed it to test.xpi. At about:addons, I clicked the gear icon, selected "Install Add-on From File", and selected the test.xpi file. But Firefox always gave me the error
"This add-on could not be installed because it appears to be corrupt".
In creating the ZIP file, I was careful to keep the manifest file at the top of the archive, and did not include the containing folder itself. I tried following some detailed instructions on installing an XPI file locally, and even installed Cygwin in order to get access to the "zip" utility that the instructions mention, but I'm not able to find that utility in any of the Cygwin folders.
To see if the problem was a lack of a Mozilla signature, I submitted it to AMO (addons.mozilla.org) for signing. AMO signed it and provided me with a new XPI file, which I assumed to be installable since it was signed. But this officially created and signed XPI file still got the error that it was corrupt.
Does anyone have ideas as to how I can figure out what's causing this?
I was able to solve this: It turns out that the manifest requires an "id" property, even though the Mozilla documentation claims otherwise: "However, from Firefox 48 you can develop, debug, publish, and update extensions without needing to set an explicit ID at all." and "When do you need an add-on ID? If you are loading the add-on from it's [sic] XPI file, are not loading it temporarily using about:debugging and it is not signed [my XPI file was signed]".

Firefox addon SDK error: Unable to Remove from Inner-Toolbar

After hours and hours trying to get things working, I have this error in my console:
[CustomizableUI] Widget action-button--myAddonID-misspelutton not found, unable to remove from inner-toolbar-myAddonID-the-title-of-my-addon1 CustomizableUI.jsm:171
So, the addon's widget id is misspelled somehow and stuck somewhere. The term does not appear in any of my code.
Details: I originally built this addon using XUL overlays, and am rebuilding it with the Firefox AddOn SDK. I think (but I'm not sure) this problem happens like this: I installed my signed addon from the Firefox Addon Repo, and then I used jpm post --post-url http://localhost:8888/ to install it into Firefox Developer Edition running the Extension Auto-Installer.
In my code I had this, but I've removed it and everything that pertains to it:
const { CustomizableUI } = Cu.import('resource:///modules/CustomizableUI.jsm', {});
[update]
I have also tried this: uninstall the addon, enter customization mode and choose "Restore to Defaults" which resets all the toolbars to default. Then I exited Firefox and restarted it. When I run jpm to install the addon, the error code persists.
Funny thing also is this: when I view the button using the toolbox inspector, it shows the #id of that button just like in the error.
With that said, how do I resolve the problem without creating a new firefox profile?
The 'widget' module has been deprecated due to a number of performance and usability issues, and has been removed from the SDK as of Firefox 40. Please use the 'sdk/ui/button/action' or 'sdk/ui/button/toggle' module
https://developer.mozilla.org/Add-ons/SDK/High-Level_APIs/ui
https://developer.mozilla.org/Add-ons/SDK/Low-Level_APIs/ui_button_action
https://developer.mozilla.org/Add-ons/SDK/Low-Level_APIs/ui_button_toggle
Something was "jammed" in the profile.
I knew this after I removed all code relating to customizableUI, then uninstalling the addon and then using "Restore Defaults" in the customization panel, restarting Firefox and reinstalling the addon, but the problem persisted.
So instead of using this with my existing profile:
jpm post --post-url http://localhost:8888/
I used this to run it on a fresh clean one:
jpm run --binary "C:\Program Files (x86)\Firefox Developer Edition\firefox.exe"
(I was using post instead of run because I run multiple instances of Firefox and did not want run to cause them to exit; but adding --binary and the path to Firefox dev did the trick )
In a fresh profile everything works just fine, even with the code utilizing CustomizableUI. There are no errors relating to that in the console.

Failed to Create Data Directory - Google Chrome Cannot Read and Write Its Data Directory - Cordova

I've been working on a Cordova app, and I've suddenly had troubles with Chrome.
I've wanted to start debugging, so I added support for a browser platform, and I use Chrome.
After running the app on Chrome, which worked before, I encountered this problem:
Failed To Create Data Directory
Google Chrome cannot read and write its data directory:
C:/Chromedevsession"
screenshot here: http://prntscr.com/876kax
Things I tried:
Deleting Chrome -> Reinstalling Chrome - found this online
Deleting Windows registry key HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Chrome - there's no
Chrome folder or key inside the Google folder, only an Update folder
While uninstalled, using a different browser as my default browser - the command that runs the app (cordova run) didn't open another
browser (I tried Firefox).
It already worked before, and I don't know why it suddenly happened. I tried upgrading to Windows 10 a few times and it failed, so could there be a problem in the registry?
I solved this issue by editing the run file (platforms/browser/cordova/run) and removing the speech marks from around C:/Chromedevsession on line 33.
The line now reads:
spawn('C:/Program Files (x86)/Google/Chrome/Application/chrome.exe', ['--user-data-dir=C:/Chromedevsession', '--disable-web-security', project]);
This is because the script that launches chrome, uses a folder location that typically can't be created with your permissions. That folder is used for history, bookmarks, cookies, etc (ie user data). This is beneficial for testing out features in Chrome (plugins, etc) and not affecting your normal instance. I don't consider it much of a concern here, more of a nuisance message. If you don't like it you could always just manually create that folder on your system as well.
You can see this here what causes the issue
switch (process.platform) {
case 'darwin':
spawn('open', ['-n', '-a', 'Google\ Chrome', '--args', '--disable-web-security', '--user-data-dir=/tmp/temp_chrome_user_data_dir_for_cordova_browser', project]);
break;
case 'win32':
//TODO: Use regex to fix location of chrome.exe
//TODO: Get --user-data-dir to work for windows
spawn('C:/Program Files (x86)/Google/Chrome/Application/chrome.exe', ['--user-data-dir="C:/Chromedevsession"', '--disable-web-security', project]);
break;
}
Since it can't use that folder, I believe it just reverts to the defaults which on Windows 10 would be
C:\Users\%USERNAME%\AppData\Local\Google\Chrome\User Data\Default
Remove Space in Path in Registry Policy
HKEY_CURRENT_USER\Software\Policies\Google\Chrome\UserDataDir
or
HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Google\Chrome\UserDataDir
Example:
${roaming_app_data}\Google\Chrome\User_Data
instead of
${roaming_app_data}\Google\Chrome\User Data
There is a simpler solution to this. Just specify the full path to the special directory you want to use for your debug chrome instance. In my case I set the user data directory to a folder next to the default user data directory, called "Debug". The following works for me specified as a script in my package.json:
"start-remote-debugging-browser": "C:\\PROGRA~2\\Google\\Chrome\\Application\\chrome.exe -incognito --app=http://localhost:4200/ --remote-debugging-port=9222 --user-data-dir=C:\\Users\\mmcin\\AppData\\Local\\Google\\Chrome\\User Data\\Debug"

Fastest way to debug Firefox addons during development

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)

Resources