Close button opens new chrome store tab on Chrome extension popup - javascript

We have a Chrome extension download button on our site.
When you click it, it opens a popup that says 'Add extension', 'Cancel' etc.
http://i.imgur.com/RFuts0E.png
The image shows the popup I'm referring to.
It works fine, except for the cancel button opens a new tab and takes you to the plugins chrome store page.
I have no idea why it does this, or how to just get it to cancel.
The js:
chrome.webstore.install(webStoreURL, () => null, (error, errorCode) => {
window.open(PLUGIN_LINKS.Chrome, '_blank');
});
Any help is much appreciated.

Well, you indiscriminately try to open the Webstore page on "error". In fact, user clicking Cancel is one of many "error" conditions.
You need to analyze the errorCode to filter that out.
chrome.webstore.install(webStoreURL, () => null, (error, errorCode) => {
if (errorCode !== "userCanceled") {
window.open(PLUGIN_LINKS.Chrome, '_blank');
}
});
Note: as is obvious from the error code list, there are many other conditions that make opening the Web Store page useless. You should re-think this logic.

Related

How to display popup depending on the page in chrome extension?

I am trying to build this chrome extension that only displays the popup when I am on a youtube video page. However, I am having a lot of difficulties doing this and used many approaches.
My latest approach is to use chrome.action.onClicked and check if the URL contains https://youtube.com/watch. Then I would use chrome.action.setPopup to my HTML file. This works on all pages until when I click on the extension while on a youtube video page, then it would just show on every single page.
Here is my background.js:
chrome.action.onClicked.addListener((tab) => {
console.log(tab.tabId);
if (tab.url.includes("https://www.youtube.com/watch") == true) {
chrome.action.setPopup({ tabId: tab.tabId, popup: "/Pages/index.html" });
} else if (tab.url.includes("https://www.youtube.com/watch") == false) {
chrome.action.setPopup({ tabId: tab.tabId, popup: "" });
}
});
I think that it is not working because after setting the popup, that means it does not check the onClicked event anymore (specified here).
Any help would be much appreciated!
It's not tab.tabId but tab.id. You can check for it. And setPopup when onClicked, you have to click the extension twice will the popup show up.

How to manually close print preview of a browser using JavaScript or Typescript

I have been trying many solutions but nothing helps me to solve my problem.
I have a scenario when a user trying to print a webpage from the browser menu Print option I have to redirect them to a different tab with the print version of the parent page, which I'm able to do it using the below listener.
#HostListener('window:beforeprint', ['$event'])
onBeforePrint(event) {
window.open(printUrl, '_blank');
setTimeout(() => {
const escapeEvent = new KeyboardEvent("keydown", {
'key': 'Escape'
});
document.dispatchEvent(event);
})
}
Now until navigation is fine but on my parent screen the print preview is still open and its show the default page view.
I have tried checking all possible ways of trying to close or capture the cancel button event from the print preview of the browser but no luck.
Any help will be highly appreciated.

Javascript 'alert' function inside catch block only works when dev tools are opened in chrome

Hello StackOverflow community!
I've encountered a very weird problem and couldn't find any useful information on how to solve it.
Somehow, a piece of javascript code works only when the dev tools window is opened (docked or as a separate window) in google chrome.
The original problem: Due to our application structure, we need to open multiple popups automatically when a page is served. Since the popups are NOT opened through a direct user interaction (like onclick), modern browsers would automatically block these popups. Because of the large amount of code that would need to be refactored to avoid this, our solution was:
check if the browser is blocking some popups.
if so: inform the user about this and suggest to turn off their browser's popup blocking function for
our website (by adding it to the exception list for example).
Not a very elegant solution I know, but there was no other way so please don't comment on how to do this differently.
The javascript code:
let popupBlockingErrorShown = false;
this.OpenWindow = function (url, name, args) {
var i = Popups.length; //Popups is an array defined as a global variable that keeps track of all
//opened popup windows
Popups[i] = window.open(url, name, args);
try {
Popups[i].focus();
} catch (e) {
if (!popupBlockingErrorShown) {
alert("very user friendly message explaining to turn of popup blocking");
popupBlockingErrorShown = true;
}
};
}
The windows have to be popups. The popupBlockingErrorShown variable is to prevent having an alert message for each popup.
Works fine in firefox. But in google chrome there is this behaviour:
without dev tools open: the first popup opens normally, the others are blocked, there is no alert message.
with dev tools open: the first popup opens but gets 'stuck' on loading (it's an empty page). The alert message shows normally.
Keeping the browser-window open and simply switching between dev tools opened or closed gives the same behaviour.
Anyone can help me? Much appreciated!
This is my first stackoverflow question and I'm still very new to programming, I have a bit over a year of experience. Remarks on my 'asking questions'-skills are welcome.
Ok thanks to wOxxOm's comment I've found a workaround. So the problem was related to what window was focused on. I've added a piece of code in the catch-block to show an alert on a successfully opened popup (if there is one) :
try {
Popups[i].focus();
} catch (e) {
if (!popupBlockingErrorShown) {
if (Popups[i - 1]) { //there is a previous popup and it's been focused on.
Popups[i - 1].alert(UIMessages[33]); //show alert on opened popup.
popupBlockingErrorShown = true;
}
else {
alert(UIMessages[33]);
popupBlockingErrorShown = true;
}
}
}
Thanks #wOxxOm !

Why is my Chrome extension screenshare window disappearing?

I am first getting into Chrome Extensions. I have a browser_action that uses default_popup to open a tiny HTML page with a button. The JS used on that page is:
document.addEventListener('DOMContentLoaded', () => {
var shareButton = document.getElementById('share');
shareButton.addEventListener('click', () => {
chrome.desktopCapture.chooseDesktopMedia(["screen","window"], (streamId, options) =>{
});
});
});
When I hit the button, I see the OS window pop to ask what I want to share for a fraction of a second before it instantly closes.

catching events from a window.open handle

I am working on a Google Chrome extension. We need to display a pop-up login window for users to enter credentials, then handle logins. My extension project consists of three pages: extension, background and options. Options html and JavaScript pieces handle login, however reference to a window opened from options.html is always null.
Therefore, I tried sending a message from options to background scripts, and have the background script open the login window. That part is working, however I never receive any events from that popup, and therefore cannot process the results of login.
case 'openSignInWindow':
let loginWindowRef = window.open('https://myurl.com/client/signin.html', 'signinpopup', 'width=400,height=400,resizeable,scrollbars');
console.log('login window ref:', loginWindowRef);
loginWindowRef.onload = () => { alert("message one "); };
loginWindowRef.addEventListener('DOMAttrModified', event => {
console.log('event:', event);
});
break;
Tried onsubmit - the one that I am interested in, as well as other events. My ultimate goal is to catch the "DOM Mutation events."
What am I doing wrong?

Categories