I'm updating an old extension, passing from the old XUL code to html/css "chrome" code.
I have an issue with the "options_ui" tag in my .json file... if i load the extension using the current firefox version (46.0.1) i can't see the "options" button of the extension (as shown in about:addons).
But if i load it using the current developer version (48.0a2) it shows and works as espected.
Any suggestion of how can i fix this?, there must be a way to show the options button without using XUL code.
This is the section of options_ui in my json file:
"options_ui": {
"page": "html/options.htm" },
I have the same problem, here's what I found https://blog.mozilla.org/addons/2016/04/29/webextensions-in-firefox-48/ .
Seems that Firefox WebExtensions will be fully functional from v.48, that's why the Options button is so far only visible in the developer version of Firefox.
Related
I'm trying to get my extension (using Firefox Addon SDK 1.17) to work on SeaMonkey (2.30). After modifying install.rdf to allow my extension to be installed, I can see SeaMonkey accepted the extension. However -- my extension's button isn't visible anywhere in the UI. I am using sdk/ui/button/toggle. I have also tried require("sdk/ui").ActionButton but that doesn't seem to do anything either.
What do I need to do to make sure my extension can render a button into SeaMonkey's toolbar?
Looks like the answer is that SeaMonkey does not officially support the Addon SDK yet. Support is planned for SeaMonkey 2.33
There are a couple of options:
patch the sdk to allow support on seamonkey.
copy the button code from the sdk into your add-on, mark it as supporting seamonkey, and use that, possibly uploading the code to npm as a third party module.
I am using the latest version from Firefox Addon SDK (https://github.com/mozilla/addon-sdk) to build my extension. Additionally I am using Erik Vold's toolbarbutton package (https://github.com/erikvold/toolbarbutton-jplib) to display the extension button in the top toolbar. When running cfx xpi and installing the extension it tells me everything went fine (no restart or whatsoever required) but the toolbar button only shows up when I am actually restarting the browser.
How can I make it really restartless?
Use the moveTo function to force insert the toolbar button on install. I believe it's a bug in the code but I haven't asked Erik about it.
Something like this will work:
var ToolbarButton = require('toolbarbutton').ToolbarButton;
var tbb = ToolbarButton(options);
tbb.moveTo(options);
Is there any instruction how to debug typescript in Firebug and/or built-in Firefox js-debugger?
Something like but for Firebug and/or Firefox
Firefox Developer Edition allows debugging of TypeScript code.
The only thing missing is syntax highlighting.
Chrome canary supports this:
http://www.aaron-powell.com/web/typescript-source-maps
Firebug is closely integrated with the Javascript execution engine of Firefox. As long as Firefox or Firebug have no support for Typescript I guess you are out of luck.
For Coffeescript, there is AceBug which offers debugging support for Coffeescript. It should be possible to extend this to TypeScript. However, the structure of the source Typescript and the compiled Javascript can be quite different so the compiler would need to insert debug symbols to link Javascript to Typescript.
Firebug version 3.0 is being designed to run on top of the built-in debugger in Firefox. This means it also leverages the support for source maps and so the .ts files are loaded correctly.
You can try out preview releases from http://getfirebug.com/releases/firebug/3.0/
Current version of Firebug (2.0.13 + FF43) seems to be debugging typescript just fine. At least it worked for me so far.
On the web page you add the "compiled" .js with a reference to the source map. I.e.
<script src="register.js"></script>
And Firebug will show you the register.ts file instead in the list of scripts instead.
Make sure you have the source map generation on in your tsconfig.json:
"compilerOptions": {
...
"sourceMap": true
},
Do Chrome or Firefox make your extension's source code open to the host machine? And if yes where are the respective folder on Mac?
Yes, assuming some or all of your extension is written in an interpreted and un-obfuscated language. Plain Javascript is common for extensions in both browsers.
For any firefox extension, if you save the .xpi file instead of installing it, it is just a zip file and you can open it with any archive tool (e.g. 7zip or WinZip).
The same goes for the .crx files Chrome. As an test, I just downloaded and opened the .crx for Google Mail Checker Plus using 7zip, and it looks like this is entirely written in javascript and all the source can be read.
In either case, how much usable source code you can get from this depends on the language(s) that are used in the extension.
Google Chrome installs the extension into ~/Library/Application Support/Google/Chrome/Default/Extensions/<EXTENSION_ID>/ and registers it in its Preferences file (according to this).
As heb says, Firefox installs the extension to ~/Library/Application Support/Firefox/Profiles/PROFILE_ID/extensions/EXTENSION_ID/
For Firefox the path is:
/Users/YOUR_LOGIN/Library/Application Support/Firefox/Profiles/PROFILE_ID/extensions/EXTENSION_ID/
view online
View a Chrome/Firefox/Opera extension/addon’s source in browser (without downloading):
https://robwu.nl/crxviewer/
bookmarklets
bookmarklets usage
Click the bookmarklet when on an extension’s page in the Chrome Web Store, Firefox addon gallery or Opera addon gallery.
bookmarklets source code
load in same tab
javascript:location.href='https://robwu.nl/crxviewer/?crx='+location.href;
open in new tab
javascript:window.open('https://robwu.nl/crxviewer/?crx='+location.href,'_blank');
bookmarklets links
view extension source online (Chrome .crx) # https://robwu.nl/crxviewer/?crx= ← You can drag this link to your bookmark bar to create the bookmarklet, but you have to edit its URL afterwards: Delete everything before javascript, including the single slash: http://delete_me/
view extension source online in new tab (Chrome .crx) # https://robwu.nl/crxviewer/?crx=
I know it's an old topic but for future research.. it could be interesting..so following the link :
How to find extension code?
This article explains very well where are located extensions code for Firefox, Chrome (working on Chromium too of course) on Ubuntu and Windows!
Best,
Is there a way to beautify JavaScript and CSS in Firebug?
I'd like to be able to view formatted JavaScript code instead of the compressed version :).
There is now a plugin that intercepts JavaScript downloads and deminifies it at that point.
Unfortunately, the way it hooks into Firefox means that it applies to all JavaScript downloads and just not specific ones and the JavaScript files have to be served with an appropriate MIME type.
https://addons.mozilla.org/en-US/firefox/addon/247565/
CSS is already beautified in Firebug, as clearly seen by comparing the CSS tab or CSS pane with the raw source.
JavaScript, alas, is not. The best you can do, for now, is to paste the code into something like http://jsbeautifier.org/ .
However, if you write a Firebug extension that does this, you will have all of our gratitude. ;-)
Firefox Developer Tools has:
"Prettify Source" button: braces {} icon on bottom left
"Auto Prettify Minified Sources" setting: turns Prettify Source on by default.
To enable it: go to the engine icon on top right of the Debugger tab, not the global settings engine.
Tested on Firefox 42.