We Keep Coding

Display firefox extension popup programmatically

I'm developing a Firefox extension and I've been looking for a way to display it automatically (with JavaScript) under certain conditions, as if the user had clicked on the icon.
I know it is possible because some extensions already do it (like Wanteeed, see image below)
I have my javascript getting all the informations that I want, I know when my condition is okay the only thing that I need now is a way to make my little extension's 'popup' magically appear
I've looked for answers as I could, I hope that I didn't miss an already existing post, sorry if I did and thank you very much for your answers !

Are you using the latest WebExtensions format? If so, then you can't just open the popup page programmatically, this is for security reasons. From the MDN web docs:
When the user clicks the button, the popup is shown. When the user clicks anywhere outside the popup, the popup is closed. The popup can be closed programmatically by calling window.close() from a script running in the popup. However, you can't open the popup programmatically from an extension's JavaScript: it can only be opened in response to a user action.
An alternative is to use content scripts to append a position:fixed div to the current page, and then to style it with CSS to match the popup style. This is probably what the extension you referenced is doing.

How did the popup of this chrome extension open from bottom?

I know about chrome extensions and I built one.
As far as I know, popup can only be opened from the button action (page action too) and will be closed once they lose focus (i.e. if users clicks somewhere on the webpage).
But how did this extension - barc manage to
1) open from bottom
2) refrain from closing even after losing focus
I looked at my chrome://flags/#enable-panels and found panels to be disabled. So, this ain't the cause.
I'll be happy if some one can point me to the underpinnings of this implementation or API?

It's injecting custom UI into pages via content scripts, not showing it in a panel.
You can test it by minimizing/moving the Chrome window.

Is there a way to do an accessible modal?

I'm working on a project with Twitter Bootstrap and playing around the JavaScript components using a screen reader.
When I trigger the modal dialog, Jaws skips the modal going to the next link in the page.
Is there a way to implement a accessible modal?
Another solution that I think is to make a static page to the functionality of the modal, and redirect to this page when the user use a screen reader. Can I detected somehow if the user are using a screen reader?

EDIT 2019: N. Hoffmann wrote and maintains an accessible modal component both in vanilla JS (along other components in its van11y project) and jQuery.
Behavior and styles are easily modified via data-* attributes and classes.
It's been tested in way more conditions (screen readers, etc) that what you'd do with your own script ;-)
Also Bootstrap 4 has a fairly accessible modal and Bootstrap 3 in its latest versions (much or all of the Paypal Bootstrap accessibility plugin was backported to 3.3.x).
Modern ressources: Access & Use european initiative details a lot of interesting aspects in a simple manner and points to other resources, including the latest ARIA Deisgn Pattern.
Here's an accessible modal dialog: http://hanshillen.github.com/jqtest/#goto_dialog
Once the modal is activated, keyboard navigation is trapped inside the dialog till it's explicitly closed by the user.
http://irama.org/web/dhtml/lightbox/ details such an accessible implementation (there's little difference between a lightbox and a modal dialog, the important thing is the modal part and keyboard management).
You can also read in Unofficial copy of the DHTML Style Guide the dialog modal part and W3C/WAI-ARIA Making a Dialog Modal.
J. Wajsberg wrote a jQuery plugin able to trap the keyboard input inside a DOM element if you need a more DIY approach.

i don't know any solution to detected automatically if user using a screen reader. but there is the google solution to hide a link at the begining of the page (with left:-1000em and position:absolute) that can be activate if you use keyboard and display a "special mode".
Screen reader users, click here to turn off Google Instant.
for your modal dialog try to use aria and aria-atomic="true" aria-live="assertive" attribute on the dialog html div. it should announce the content of you dialog box.

Popup a message upon exiting a webpage

We'd like to have a message popup when a visitor to specific webpages leave those webpages. So we could tie some Javascript to the links on those webpages, but then we can't control if the user exited the webpage by typing in a URL, using a bookmark or just closing the window...
I assume we have limited options if the user tries closing the browser window... but I do know it's possible because Google Docs' Documents offers the chance to cancel closing the window if you have unsaved work while closing the browser.
What are my options? Can I have Javascript called upon going to another webpage? Can I control the text in the popup when trying to close the window?
I'm using jQuery, so if there are good solutions implemented with jQuery that's perfectly fine.

Yes.
https://developer.mozilla.org/en/DOM/window.onbeforeunload
jQuery UI Dialog OnBeforeUnload

There is onunload event you can bind to, first example:
http://www.codetoad.com/javascript/miscellaneous/onunload_event.asp

Is there a way to get a Telerik RadEditor to not show the toolbar by default when editor.set_html(value) is called in ShowOnFocus mode?

I'm trying to simulate keypresses and clicks in jQuery, which is working to blur the toolbar in IE6 but in Firefox it seems to remain open.
Is there some way to blur the editor or some setting that I'm missing that makes it so that it doesn't steal focus and show the toolbar by default?
Update it is showing up because I am calling editor.set_html(value); in the OnClientLoad() event for the editor. Is there any way to get the toolbar to hide after calling the set_html() function?

After much googling, I discovered this post:
When the set_html() method is fired, the operation is added to the Undo list. You should use the innerHTML attribute of the editor's content area to set content in the editor
So instead of editor.set_html(value);, I use editor.get_contentArea().innerHTML = value; and now the toolbar doesn't open by default!