I am new to writing chrome extensions and was wondering how can i do the following.
How can i make the popup(when someone clicks on extension icon) display at the center of the webpage instead of displaying the popup at the top right corner ?
Use chrome.browserAction.onClicked.addListener(), which fires "when a browser action icon is clicked." Then inject your popup manually into the DOM of the supplied tab, using something like chrome.tabs.executeScript().
Also consider adding a context-menu item, which might make more sense to a user depending on what your extension actually does.
Related
Is there a way to show/hide a chrome extension's icon based on the current tab's URL/location?
I'm writing a utility that I only want to use on certain sites, and I would like to be able to access it in one click while on those sites (i.e. not in the extension overflow menu) but hide it otherwise.
The DeclarativeContent API almost provides what I'm looking for, but it only greys out the icon, rather than hiding it entirely.
Is this possible?
Unfortunately this isn't possible (anymore). Declarative content or not, the presence of your extension's icon near the address bar is only decided by the user by pinning/unpinning it from the extension menu. In older versions of Chrome using chrome.pageAction would result in the extension icon being shown inside the address bar only for the matching websites declared in the manifest. However, things changed a while ago (actually quite some time, maybe >1y, can't recall exactly when): now all extension icons are on the right side outside the address bar and can be pinned/unpinned by the user, meaning they are either always shown or never shown. Pinned icons that use pageAction are greyed out when inactive (see this documentation page).
I have a very simple Chrome extension which produces a bubble pop-out in the top-right of the screen. In the bubble I present the mobile version of our site.
Currently when the extension icon is clicked the bubble pops out and the mobile homepage loads. The user can click around within the bubble and use the mobile site as they wish.
However, once the user clicks outside the bubble is closes. Clicking again repeats the above process.
I wondered if there was a way to make the bubble pop-up/out persistent? So, instead of it disappearing when the user clicks elsewhere it stays loaded until the user clicks the extension icon again. This way the button acts as an on/off switch rather than a single event trigger.
Is this possible, and would someone mind directing me to the code which would help me do this?
As stated in the FAQs, this is not possible. However, chrome.windows.create may meet your needs.
I am developing a Chrome extension with browser action. I want to make some action on clicking on browser action icon (it is easy, not a problem), and show popup if user clicks on down arrow at the right side of the icon (that is a problem). So, we will receive a functionality similar to the firefox toolbarbutton from XUL. Is it possible to do such thing with Google Chrome?
Just want to make button, like that:
button
If it is pressed on the main part - it will do something, if on the right "drop-down" part - it will show quick settings page.
But I see only single button possibility.
The entire browserAction button works as a single button. There is no way to detect if a specific area was clicked. The best you can do is either have multiple extensions each having their own button for different actions or have options in the popup that the user selects with a second click.
I'm building a web page that will be viewed on mobile devices (Blackberry specifically). I have navigation drop down of sorts implemented as a <select> in the upper left corner of the page. Rather than require the user to click on the drop down directly I'd like to have so that the user can click/tap anywhere on the page the select drop down in the upper left corner opens. The page has no other links or clickable objects other than the select drop down in the upper left.
Is this even possible? From what I've found so far it seems that it's impossible to programmatically open a <select> drop down, but I figured I'd throw this specific case out there.
Since it's not possible to fake key presses with JavaScript (and rightfully so for security reasons), the closest thing is to change the size of the <select> element (change it from a drop down control to a list box control and back).
Demo, Code (pure JS, no library)
When the user selects an option by clicking (or tapping) it, the click event handler 'closes' the list box by setting its size back to 1, after which it converts back to a normal drop down control. I have only tested this in (non-mobile) Chrome, let me know if it works on Blackberry or not.
Edit:
I have created a small jQuery plugin that wraps behavior and configurability into a more comprehensible control. I have tested this on Safari Mobile on iOS 4 and it behaves just like a regular drop down does in that browser, except it can be opened programmatically.
Demo, Code (jQuery 1.7)
It works like this:
$("select").openable({ triggers: $("#trigger") });
Clicking on any trigger will open the selection UI.
I have also added a handler for the key up event to catch Enter, Esc and Space to 'close' the list box. This mimics the drop down control's selection mechanism on desktop browsers.
Of course, on a desktop browser this will change the layout of your page, as it's different from the native drop down control. You will have to come up with a CSS solution for that (something with position: absolute and z-index probably). But on iOS the selection UI isn't rendered on the page, so it's not a problem.
Again, haven't tested this plugin on BlackBerry...
I'm just starting on a Chrome extension. I want it to load a popup element whenever the browser loads a Facebook url.
Is this possible? And how? // ANSWERED.
Okay, then.
Now, I now how to make an extension that drops down in a small window at the top right of the page beneath the extension icons. *But how can I create a new div anywhere on the web page, like this buzzgrowl extension:http://buzzgrowl.com/ *?
Yep it's possible. You can trigger a popup in your javascript. Set it to work only on facebook.com.
You can also do javascript checking of the url via window.location.