Showing a drop down on button click in Chrome extension popup - javascript

I am using the split button dropdown from twitter bootstrap in my chrome extension.
When I use it as a dropup, everything works fine. However, if I use it as a dropdown, the size of the popup increases when the menu is displayed.
Can this be avoided? I would like the dropdown menu to be displayed below the button but not increase the size of the popup.
I am trying to mimic the popup menu shown in the Evernote Chrome extension popup for selecting the article, selection or full page clip.

Related

Can a Google Chrome Extension popup window remain open as a new window is opened on top of it and then closed?

I have a Google Chrome Extension that uses the Background.html and background.js files to show this popup window when the chrome extension icon in the tray menu is clicked on....
Inside my popup is a button to generate a screenshot image of the current tab URL and it then uploads the image to my server and fills in the text input with the URL of my image upload.
I am now wanting to add the capability to select a region on the webpage screen and generate a screenshot image cropped to be just the content inside the selected region like this image below shows the region selected on the page....
My roblem now is that I cannot simply have a button in my popup take me into region selection mode on the page. I could but it would close the popup window and I have researched and found out that you cannot programtically open the popup.
So once the popup would close, I would no longer be able to edit the record loaded in it before.
I am trying to come up with a new solution to achieve my desired result.
Idea 1
Move all the functionality that my current background popup has into a modal window displayed on the actual webpage.
This would be a big change as it would require a lot of message passing as the modal code would not have access to theextension API which is used to generate the screenshot and get all the tabs data.
I could then open a modal that looks like my popup in the image above when the extension icon is clicked on.
When the generate screenshot button is clicked it would then send a message to the background script to get the tab API and generate the screenshot and then send it back as a message to the content script in the page.
As for my new feature of selecting a region and creating image of that region. The modal would have a button to do that and on click would hide the modal window. Next it would let me make the selection which on edn would send a message to background again and generate a screenshot and crop it to the coordinates of my selection and return it back in a return message to the content script which would then show the hidden modal window and update the image inside to show the new image.
This is the hardest way bu the best I think.
Idea 2)
If it is possibble even, on a button click inside my current popup would then launch a new popup window of the current page and allow me to make my selection region and generate the image which on completion would close the popup window and send the result back to my extension popup.
I do not know if this would work because I am unsure if the extension popup would auto-close when I click the new popup window?
Does anyone know of other way to accomplish this or if my ideas would be practical?
You can look at Adblock Plus for inspiration.
They have a popup with "Block Element" button that switches to "now interact with the page" mode.
After the user clicks, they open follow-up UI injected into the page.
In any case, clicking outside the popup will make it lose focus, which closes it by design.
You could instruct the user to click your button again after they interact with the page, or you would need to inject some UI into the page itself.

Foundation 5 The expanded topbar menu remains visible when clicking the browser "back" button

I just looked at the Foundation site, and this appears to be the default behavior. It seems strange. Clicking the browser back button should load the previous page but, it opens menu dropdown.
How can I hide that menu drop down? And it should show the previous page.
Thanks

Bootstrap dialog doesn't show on "xs" screen

On a Bootstrap 3 site I have a dialog box. It always opens when its associated button is clicked. However, I would also like it to open when called by a certain function in Javascript:
$('#login').modal('show');
This code works on most screens, but doesn't work on mobile devices (screen size 'xs'). I can't work out why. Here is a minimal(ish) reproduction - resize the preview pane and reload to see what I mean.
http://jsfiddle.net/u7KW6/
The problem seem to appear because you placed your modal div inside your navbar-header. If you move it outside that div like in this example, it will work as you wish.

Designing UI for a Google Chrome extension

I'm writing a plugin for Google chrome that works similarly to the Adobe's web-capture plugin for Mozilla Firefox. I need some help designing the UI for the extension. As of now, the extension has a button, next to the wrench icon, that, when clicked, converts the page to a PDF file. I need to add a drop-down menu, just as it is on Firefox, which should display other options for conversion, and providing the same functions in context menu as well. I'm not sure if it's possible to have a main button and a drop-down menu button, where the main button initiates conversion directly, and the drop-down menu button shows the drop down menu showing other options, in Google Chrome as nothing is mentioned about it's possibility on the Chrome Extension development page. I could probably have a pop-up page but that would come up when I would click the main button. Could someone help me with this? If it is possible to have a both main button, and a drop-down menu button, then how should I go about doing it? Or if it is that I would have to use a pop-up page to show the options, then where should I place my functions, which will be used by context menu APIs as well.
As far as i understand i wouldn't prefer having 2 buttons. What you can do is, have a drop down button and once that appears after clicking, you can have a big button inside that saying "PDFy my current page" and below you can have rest of the options. I guess having two button will unnecessarily bring confusion and will make browser cluttered.

How can I show the list of of a dropdown in html?

I am developing an HTML based android app.
I need to implement option menu like the native android menu on long screen tap.
I thought to use invisible elements (positioned out of the viewable area), and cause showing the list by firing the click event.
Not working...
Any workaround?

Categories