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.
Related
Edit - Is there any way to click outside of a modal window if there is an iframe present? I think that could be a solution. Is there a way to click on any point of a browser window without having to target a specific element while doing it? I noticed that if you click outside of the modal box, the modal disappears.
I am working on backtesting a modal popup window and I am having issues with selecting and closing the modal popup window.
It seems the DOM is not traversable (when you select the button with chrome inspector and try to trigger an action, any action I try to trigger doesn't seem to work because the element is null, however it is present and I am able to select it).
See iframe here -
https://servedby.flashtalking.com/container/18442;121244;12954;iframe/?ftXRef=[%INSERT_TRANSACTION_ID_HERE%]&ftXValue=[%INSERT_TRANSACTION_VALUE_HERE%]&ftXType=[%INSERT_TRANSACTION_TYPE_HERE%]&ftXName=[%INSERT_TRANSACTION_NAME_HERE%]&ftXNumItems=[%INSERT_TRANSACTION_QUANTITY_HERE%]&ftXCurrency=[%INSERT_TRANSACTION_CURRENCY_HERE%]&U1=[%INSERT_U1_HERE%]&U2=[%INSERT_U2_HERE%]&U3=[%INSERT_U3_HERE%]&U4=[%INSERT_U4_HERE%]&U5=[%INSERT_U5_HERE%]&U6=[%INSERT_U6_HERE%]&U7=[%INSERT_U7_HERE%]&U8=[%INSERT_U8_HERE%]&U9=[%INSERT_U9_HERE%]&U10=[%INSERT_U10_HERE%]&U11=[%INSERT_U11_HERE%]&U12=[%INSERT_U12_HERE%]&U13=[%INSERT_U13_HERE%]&U14=[%INSERT_U14_HERE%]&U15=[%INSERT_U15_HERE%]&U16=[%INSERT_U16_HERE%]&U17=[%INSERT_U17_HERE%]&U18=[%INSERT_U18_HERE%]&U19=[%INSERT_U19_HERE%]&U20=[%INSERT_U20_HERE%]&ft_referrer=https%3A//www.upwork.com/ab/find-work/domestic&ns=https%3A//www.upwork.com/ab/account-security/login&cb=121066.74962680253
In chrome inspector, you see the following Image of inspector
Any help would be greatly appreciated!
Here is how the modal is structured:
div.modal-static
up-c-transition
div.modal-backdrop
div.modal
div.modal-dialog
div.modal-content
div.modal-header
up-c-header
div.header-wrapper
div
slot
button
up-c-icon
span.sr-only
sr-only
up-c-load-svg
svg
Code in inspector
I'm not sure how to get the name of the iframe I should switch to, this is my biggest issue. I believe maybe if I can switch to the iframe I can potentially interact with the modal buttons.
Edit - Here is the full code that is produced - https://codeshare.io/2WxdLE
My application gives users a specific amount of time to pay for a service. We do this because we can only keep their reservation for X amount of time.
The time we give them should be sufficient, however if they are running out of time we notify them with a Bootstrap Modal as shown below:
However, as soon as the modal achieves focus by the user clicking on the button or anywhere on the modal window, the PayPal browser window moves behind the main window. See picture below.
Simple clicking anywhere on the black overlay will bring the Paypal browser window back. However, I was hoping that someone might have some idea on how to achieve this using the button click in the modal.
In other words, how can I bring the Paypal browser window back to the front by clicking on the 'Yes Please' button on the modal or the close event of the modal?
I have tried to simulate the clicking of the overlay element in code but it does not seem to work.
Here is the code of the page:
From what I have read because the PopUp browser window is being opened from an iframe and the content is from a different source I cannot access the popup for security reasons. So there is no way to move it to the front unless the user clicks the dark overlay or the link 'Click to Continue'
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)
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.
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...