I have a Google Chrome extension that opens a Twitter Bootstrap dialog (using JQuery 1.7.x, but not JQueryUI) from a context menu item click, and I've been trying to do the same thing in the Firefox version (using Add-on SDK 1.6), to no avail.
I can intercept the menu item clicks OK in my lib/main.js, using context-menu, but I can't get a message to the content script (see https://stackoverflow.com/a/8493844/954442) which contains the function that creates the dialog DOM and that displays it. Nor can I create the dialog from my add-on script because there's no DOM there (and attempting to load JQuery into that via #mozilla.org/moz/jssubscript-loader;1 fails with "window is not defined")
I've looked far and wide for examples, but haven't found much that helps. Has anyone got an example of a context-menu Item click opening a dialog?
(What are the advantages/disadvantages of using the Add-on SDK to develop my Firefox extension? is the nearest thing I've found to my issue. I get the impression the poster found an answer eventually, but didn't update the question to say what it was.)
(NB. I'm not prepared to consider XUL, and very reluctant to go back to JQueryUI)
Ok, so I believe you want to do something like that:
https://builder.addons.mozilla.org/addon/1049738/latest/
Basically you add a contentScriptFile property to your context-menu's Item. A content script doesn't share the js variable with the page, however can access to the DOM. So you can add your panel and display it when the context-menu item is clicked.
Notice that you can pass to contentScriptFile multiple files using an Array, so you can load jQuery as well in this way.
Hope it helps.
Related
Currently, I'm developing an Firefox extension app. It will open a html file in a new popup window. When the poup window opened, it shows the title as format: "moz-extensions://", does anyone know how can I remove the prefix, the "moz-extension://"?
Thank you very much!
Answer
According to this bug report you can't currently do anything about it. It is present to prevent spoofing/phishing attacks against the user (acting like the popup is part of a UI).
Statement (Quote):
We've been trying to make it clear that when something happens, the
reason for it is clear to the end user. The ability to create a popup
with no URL bar means that there could be absolutely no info to the
user.
Custom Solution
If you want to have a popup with a custom title you would be better off creating your own HTML/CSS solution!
So I decided recently to create a firefox extension I have been thinking about, but do not have any prior experience with it. I read on the official tutorials and figured that the addons sdk seemed to fit me well, but I seem to have hit a hitch using it.
What I want to do is create an options popup dialog, similar to the one you see if you press alt-tools-options. That is, a border with title and close button on the upper part, and a bigger area inside the window where I can define an "intuitive" (default elements with the skin the user is used to) GUI.
The tabs at the top (general, privacy security etc.) is nothing I really need, though would not hurt either.
So the issue is that from my searches, when you use addon sdk, you are not supposed to use XUL which has those elements, but instead you seem to be supposed to create something custom using HTML in a panel. I don't think its possible to create the top-bar akin to the real options-menu when using that, although if I am wrong I would not mind being corrected.
I had a similar issue before, where I wanted a drop-down menu from the toolbar similar to the default ones, which I solved thanks to: How to add a dropdown menu to a firefox addon sdk powered addon toolbar button?.
Might be worth noting that that the button opening the options dialog is one of the menuitems created as described there.
I was considering that it could probably be possible (aka I am not sure) to use something akin to this, but sadly I do not know how I would create a "separate" (drag-able) popup that I could use this on.
If possible, I would prefer there to exist a solution, but if someone knows that it is indeed impossible, please do post that so and I can give up without regrets and just make some sort of custom HTML panel instead :)
tldr:
Is there a way to create a popup dialog similar (in style) to the options window you can open using alt-tools-options in firefox when developing using addon sdk?
Essentially, you aren't supposed to, at least not with the SDK.
But then again, it is still possible, but you need to do a lot of stuff yourself:
You need to register a chrome: package for your add-on, as the resource: URIs the SDK uses internally do not work correctly for XUL windows. Create a Chrome Registration (chrome.manifest file). The SDK supports this since Firefox 24 IIRC.
Create the XUL file. For preferences/options windows, there is already the <prefwindow> binding. Look at other extensions and or the Firefox Options dialog (which is a huge thing with multiple overlays, so better look at other extensions). Place the XUL file in chrome/content/<somefile>.xul. This will then correspond to chrome://<registered_package_from_1>/content/<somefile>.xul.
Implement something that will actually display the window. Normally non-SDK add-ons would just put em:optionsURL into their install.rdf, to have the Add-On Manager automatically create a Preferences button that will open the specified URL, but in the SDK this is generated from package.json and there is no way to put optionsURL in package.json if I'm not mistaken. But you could do other things, like using a simple-prefs type: control button to have a button in your about:addons page, or add it to some browser menu (which would require yet another heap of XUL-modifying, require("chrome") code.). To actually open the dialog, you could use window/utils.openDialog.
Don't forget to close any open windows again when your add-on gets unloaded.
As you can see, not a simple task...
If you're just after preferences in general, consider using simple-prefs.
I am new on add-on development using the SDK.
I want to ask you guys if it is possible to start my extension automatically after I open my browser? At the moment I starts after I press my widget icon in the toolbar (the panel shows a table with some data I get from the DOM).
Another thing I want to ask you: is it possible to show a loading screen (like a ajax gif) inside my panel (my extension needs a few seconds after switching a tab, to get the DOM data) every time I press the toolbar button.
First of all: One question per post, please.
Extensions are always started with the browser. When it comes to SDK add-ons, your main.js will be called. It's your job to perform any additional initialization form there.
Panels contain regular HTML pages and therefore can use images.
It's impossible to tell you more, without you providing more details and the code you got so far!
I just saw something odd, I'm using Google Chrome browser and I right clicked a tab with GMAIL open and selected to view the source. All I had returned was :
<!DOCTYPE html><html><head></head><body><div></div></body></html>
How would they have managed to do this ? I didn't think was possible ??
Because gmail is built with javascript it will also build the page dynamically after it is loaded with javascript.
gmail also uses a lot of iframes, you can have a look at the conent of those by inspecting them with Firebug for Firefox
I don't think it is possible. Did you use Tools -> View Source in the menu? It shows a lot with me. Maybe you clicked in an iframe?
depends where you click ... (you clicked in an iframe which is empty, and content is loaded with javascript from other frames...)
If you go to the options -> tools -> view source you will see the main frame and its code..
JQuery UI tabs are implemented by named anchors in an unordered list. When you hover over one of the tabs you can see this in the link shown at the foot of the browser:
http://mysite/product/3/#orders
Above would be the "orders" tab for example. JQuery obviously intercepts the click to this anchor and opens the tab instead.
However if I bookmark the link above or link to it from elsewhere in the site the page does not open on the specific tab.
In the tab initialisation block I was considering putting in some code that looks for a named anchor in the URL and, if it finds one, does an index lookup of the tabs and calls the select on it. This would mean it will still work with JS switched off.
But is there an easier/nicer/better way?
Found this example here:
if(document.location.hash!='') {
//get the index from URL hash
tabSelect = document.location.hash.substr(1,document.location.hash.length);
$("#my-tabs").tabs('select',tabSelect-1);
}
As of version 1.8 jQuery UI supports this functionality. See example here:
Second tab active by default
Third tab active by default
In versions of jQuery UI prior to 1.8 (not inclusive) that's pretty much the way you would have to do it. The tab extension (AFAIK) doesn't know to switch based on which anchor it is initialized with (when the page loads) so you have to do that bit manually (in the ready event, of course).
As another answer indicates, the new version of the tabs in jQuery UI 1.8 supports bookmarking out of the box.
I use the Session plugin to accomplish this in a custom tab class