How do I create an options popup dialog using firefox addon sdk? - javascript

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.

Related

Javascript automation to add add-on tool to the toolbar in Acrobat

Hello everyone,
I am a complete beginner in developing Acrobat functionalities, and I had been given a task of adding a button to the toolbar, which on pressing would display a pop-up, using Javascript. I was able to add a button to the add-on toolbar and then I manually added the button from the add-on tools to the toolbar. I have been asked if this manual addition could be automated, I went through the Javascript API reference and found that it provides the execMenuItem method but it only is able to perform some commands such as Save As. Could it be possible to write a script that would automate the manual addition ? The manual addition that I am talking about is Going to View -> Show/Hide -> Toolbar Items -> Customize Quick Tools
I am aware that we can add a button to the toolbar directly using plugins but that would require developing in C++, and our team is trying to explore functionalities that could be achieved using JS scripts
Thanks
You can use addToolButton() from page 100 of the JavaScript for Acrobat API Reference to achieve similar functionality.
However it appears that adding to Quick Tools is not supported through the JavaScript API, according to one AcrobatUsers post:
Note that as of version X you cannot place a button on the toolbar automatically, no matter what code you write - it will ALWAYS appear on the Tools Pane, down at the bottom corner - from where the user has to manually drag it into the Quick Tools area.

Chrome extension: default pop_up vs injecting a div in page

I am getting confused understanding the practices generally followed in the popular chrome extensions. I am trying to develop my own chrome extension and after going through the basic tutorial, I have a default popup page that opens whenever I click the extension icon near my address bar. So far so good! While checking the source codes of some good extensions installed in my chrome browser, I came to know, none of them uses the default_popup page but definitely invokes some javascripts through either the background page or content scripts. But the final behaviour as seen by the user is functionally like a popup at the upper right corner of the screen, though more presentable. Is there any reason for not using default_popup over using other mechanisms?
I think it really depends on what your app needs in terms of functionality and design. As there are no real reasons why you might want to choose one over the other. Most information can be passed from the page to the extension app and vice versa. Users expect a popup when they click on the button but injected popups are also supported and commonly used in Chrome, Firefox and Safari.
Pros/Cons:
If your extension depends on the page content then you can inject scripts that analyze the page and inject divs accordingly. You can send analyzed data back to the extension and open a popup but thats an additional step. If your extension has nothing to do with the specific page then you would be better off using a popup.
Popups close when you switch tabs or your browser loses focus. Injected popups need not.
Don't inject scripts and stylesheets into pages willy nilly. They interfere with a website's native js/css and also stuff injected by other externsions which is near impossible to fully account for.

Automated conditional browsing in background with chrome extension

I am researching the possibility that I might be able to use a Chrome extension to automate browsing and navigation (conditionally). My hope is that the extension can load a remote page (in the background) and inject a javascript to evaluate clickable links and click (by calling the click method) the appropriate (evaluated by some javascript logic) link, then repeat process for the resulting page.
My ability to javascript is not the problem - but I am struggling to discern whether (or not) a chrome extension can load pages in the back and inject script into them (making the DOM accessible).
I would be pleased if anyone could confirm (or deny) the ability to do so - and if so, some helpful pointers on where I should research next.
#Rob W - it seems the experimental features fit the bill perfectly. But my first tests seem to show the features are still very experimental ... ie. no objects get returned from callbacks:
background.html
function getAllosTabs(osTabs){
var x = osTabs;
alert(x.length); // error: osTabs is undefined
}
function createOffScreenTabCallback(offscreenTab){
document.write("offscreen tab created");
chrome.experimental.offscreenTabs.getAll(getAllosTabs);
alert(offscreenTab); // error: offscreenTab is undefined
}
var ostab = chrome.experimental.offscreenTabs.create({"url":"http://www.google.com"}, createOffScreenTabCallback)
alert(ostab); // error: ostab is undefined
Some further digging into the chromium source code on github revealed a limitation creating offscreenTab from background:
Note that you can't create offscreen tabs from background pages, since they
don't have an associated WebContents. The lifetime of offscreen tabs is tied
to their creating tab, so requiring visible tabs as the parent helps prevent
offscreen tab leaking.
So far it seems like it is unlikely that I can create an extension that browses (automatically and conditionally) in the background but I'll still keep trying - perhaps creating it from script in the popup might work. It won't run automatically at computer startup but it will run when the browser is open and the user clicks the browseraction.
Any further suggestions are highly welcome.
Some clarifications:
there's no "background" tabs except extension's background page (with iframes) but pages loaded in iframes can know they are being loaded in frames and can break or break at even the best counter-framebreaker scripts
offscreenTab is still experimental and is very much visible, as its intended use is different from what you need it for
content scripts, and chrome.tabs.update() are the only way handle the automated navigation part; aside being extremely harsh to program, problems and limitations are numerous, including CSP (Content-Security-Policy), their isolated context isolating event data, etc.
Alternatives... not many really. The thing is you're using your user's computer and browser to do your things and regardless of how dirty they are not, chrome's dev team still won't like it and will through many things at you and your extension (like the v2 manifest).
You can use NPAPI to start another instance chrome.exe --load-extension=iMacros.

Possible to run Javascript from address bar (bookmarklet) within Google Chrome's settings panel?

I would like to make a bookmarklet to open google chrome's settings panel and clear my cache with a single click.
For a while now, Ive had a bookmark that opens chrome's settings panel with the 'clear cache' setting already selected. After clicking the bookmark (normally opening it in a new tab) I have to then opent the tab and submit the form. However, when developing this is a task I have to do quite often and these several repeated steps just seem unnecessary.
This link opens the page to clear one's cache (obviously for Chrome users only): chrome://chrome/settings/clearBrowserData#cache
I recently discovered bookmarklets and thought it would be a good way to accomplish the task of clearing my cache with a single click. However, I've discovered that putting even a basic javascript sample in the address bar when on the settings page (linked above) fails to work.
For example, this works in the address bar on any given page, but not from the chrome settings page:
javascript:alert('hello stackoverflow');
Is there a way to execute javascript from the chrome settings page? Are there other options? Im looking for any route to achieve this goal and would love to learn something along the way, even if it means doing some evil. :)
add a bookmark:
javascript:document.write('<form onsubmit="window.open(\'javascript:\'+js_line.value, \'target\');return false;">javascript:<input type=text name=js_line style="width:90%;"/></form><iframe src="" name="target" style="width:100%;height:90%;"/>');
What you want might not be fully possible through a bookmarklet, but it's certainly possible with a Chrome App. There is an app Clear Cache already. I find it pretty useful.

Open JQuery/Bootstrap dialog from context-menu

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.

Categories