Google Chrome Extension toggle icon - javascript

I am trying to create a little chrome extension with a toggleable icon ("active" and "inactive") and a pupup-page. The icon should be active, when the popup is shown and inactive, when the popup is hidden.
I am allready able to toggle the Icon on click using the background-script, just like in this answer.
But unfortunately this doesn't work, if you have a default_popup-page, as the browser_action catches the clickEvent and the background-script does not get notified.
So my question is, how can i toggle the icon while using a default_popup-page?
EDIT:
The problem i have is, that the chrome.browserAction.onClicked method is not called, when you have a default_popup (it is also said in the comments to this answer). So i need something else to get notified, if the extension was clicked or not...

Related

How to close custom chrome extension overlay when extension icon clicked

I built a custom overlay in React that appears on initial click of my chrome extension icon. The overlay is injected as a shadow-dom element at the bottom of the DOM tree. When it does display, it covers the entire view which is the desired the effect. Now, I'd like to close the overlay by clicking on the extension icon, but can't quite figure out how to approach this. I'm tryin to achieve the same close functionality as the Loom extension.
Here is the current flow:
Initial extension icon click -> chrome message sent to content script -> content script triggers state change to display overlay
Extension icon clicked again -> message sent to content script to get visible state of overlay -> message response sent to popup.js with overlay state -> if overlay is visible, send message back to content script to close overlay, else open it.
When attempting to close via icon click, I'm seeing in that overlayVisible component state reads as false even though it is open. I have a feeling I'm approaching state management wrong.

Gmail message "Show details" pop-up box is is hidden upon mouse-over when InboxSDK chrome extension is installed

I am developing a chrome extension for Gmail using InboxSDK. I have an obscure, but frustrating issue. The email message "Show details" pop-up box disappears upon mouse-over whenever the extension is installed. The extension does not directly interact with the pop-up in any way. The issue usually goes away after a few replicating it a few times in a row for a thread.
I've looked at the live html and css of the page to see what's going on. The visibility css tag for the details pop-up is switching from "visible" to "hidden" against my will.
I expect for the pop-up to stay visible until I click outside outside of the pop-up. This is it's normal behavior.
The problem fixed itself when I updated my Chrome to Version 72.0.3626.96. This question is closed.

ionicModal disabling click-events

Ionic/cordova/angular/ios application:
I am using angular-notify to display overlay messages that have ng-click events attached. They show up fine and the ng-click events register EXCEPT when an ionicModal is open - while it's open and an angular-notify message displays, I can't click it. As soon as I click to close the modal (I have to click on my notification since it is overlaying the close button but it still closes the modal) the ng-click registers again.
I am not sure how to test this theory, but it feels like the click is getting captured or disabled by ionicModal. Is there something I can do (z-index is set to 99999) to make those clicks get registered?
-- UPDATE (Testing in Chrome w/inspector)
It doesn't appear to matter in which order the elements are loaded. Whether the modal, notification overlay or popup load in first, the issue remains.
Click events are cut off for my notification overlay until the modal and/or popup are dismissed.
When I look at the DOM inspector, I see some divs are created when the popup or modal instantiates. This one:
<div class="click-block click-block-hide"></div>
looks like it might be causing my issues but it sits lower in the DOM and when I delete the element (in Chrome Inspector) it doesn't fix my issue.
No matter what z-index I set or where I move the element in the DOM (via inspector) or what background div elements I delete, I still cant click my notification until any and all popup/modals are dismissed.
Any thoughts?
Can you explain the layout a bit better? Is the ionicModal sitting on top of the message? Or are they side by side?
If the modal is sitting above the message, then it is a matter of z-index. You need to make sure that the z-index for the class that is being used isn't overriding the z-index of 99999.
I figured it out, at least how to hack around it.
$ionicModal and $ionicPopup add a class to the body element <body class='popup-open modal-open'>. I didn't look into how, but it is blocking clicks to my notification.
So I added an interval to the angular-notify notification to remove the modal-open and popup-open classes from $ionicBody.
var notificationInterval;
notificationInterval = $interval(function() {
$ionicBody.removeClass('modal-open');
$ionicBody.removeClass('popup-open');
// console.log("removing those body classes while the notification is up.");
}, 1000)
For notification dismissal, I added to the $scope.$close function
$interval.cancel(notificationInterval)

Close a Chrome extension popup by clicking the browser action icon again

I'm developing a Chrome extension and I wanted to know if it is possible to close a popup by simply clicking again the icon that lets you open the popup: I tried anything but it looks like you must click elsewhere to close it. The docs states the onClicked event is:
Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup (http://developer.chrome.com/extensions/browserAction.html#popups).
Thanks in advance.
[UPDATE] I tried the following and it half (!) works:
1. in popup.html I link popup.js;
2. popup.js reads the value of a variable contained in background.js;
var currentStatus = chrome.extension.getBackgroundPage().open;
if(currentStatus==0){
chrome.extension.getBackgroundPage().open=1;
}else{
chrome.extension.getBackgroundPage().open=0;
window.close();
}
What happens: the first click opens the app, the second closes it, BUT it remains a micro popup with no content upon the icon. If I remove that, I reached my goal.
The onClicked event is called if your extension's browser action does not define default_popup in the manifest. That note from the documentation isn't about whether the popup is currently open.
If the manifest defines default_popup then clicking the button again closes and reopens the plugin. The mousedown closes and the mouseup opens. (So clicking on the button and dragging away and releasing the mouse does close the popup, not that anyone should do this.)
I recommend setting default_popup and making a button in the html for the popup that closes the popup with window.close;, or find a point in your popup's use case where closing makes sense.
Well It has been a long time, and the issue/bug still persists on Chrome browsers. I've found a workaround, it's not great, but it does what I need - closes the window on a second icon click. Here's what I did in the popup javascript file:
if(localStorage.getItem('firstClick')==='true'){
localStorage.setItem('firstClick', 'false');
window.close();
}
else {
localStorage.removeItem('firstClick');
localStorage.set('firstClick', 'true')
}

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.

Categories