Javascript, Chrome Extension development, close popup - javascript

In my manifest i have this:
"popup": "1_options.html"
and in the above html file I have this code
var saved_email = localStorage['saved_email'];
if (saved_email !== undefined || saved_email != "a#a.com")
{
chrome.tabs.create({url: '0_register.html'});
}
which is working exactly as I want, it opens a new tab with the register.html BUT it still has the popup open on the top right :( (1_options.html)
is there anyway to close the popup automatically as I open this new tab?
Thanks!
Ryan

Have you tried :
self.close();

There's several ways to do this, but the easiest is just to call:
window.close();
You can even do this in a callback function when you create your tab...
chrome.tabs.create({url: '0_register.html'}, function() {
window.close();
});
You could also add a listener in your background script to check for tab updates, and if your new tab is your registration window, you could remove the popup:
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
if(changeInfo.status == "loading") {
if(tab.url == "chrome-extension://[extension-id]/0_register.html") {
chrome.tabs.remove(tabId);
}
}
});

chrome.tabs.create({url: '0_register.html', selected: true});
If you don't mind the new tab being selected when it is created, this also forces the popup to close.

Related

Reload Chrome DevTools Extension Sidebar on Page Change

This may be a dupe of the question at Google Chrome DevTools Extension - Detect Page Change, but it's been sitting for over a year without a real answer, and maybe my question will provide some new insight into the problem.
I've written a Chrome Extension which inserts a sidebar panel into DevTools. The side panel lists the dataLayer events, a user can click on the desired event and then use the element picker to select another element on the page, and the plugin displays the path between the elements in dot notation.
Here's the link to the Github project: https://github.com/gruebleenagency/gtm-data-layer-sifter
It works as I'd like it to normally, but if you navigate to another page, the sidebar is not initialized again, so it displays the info from the previous page.
You can see that I have this in my background.js file:
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
if (changeInfo.status == 'complete') {
reloadExtension();
}
});
function reloadExtension() {
// ???
}
I'm wondering if there's any way to make the sidebar reload at this point? Or am I going about this in the wrong way? I've spent a lot of time messing around with this trying to get it to work, but nothing seems to do the trick.
Thanks for any and all help.
Here's my solution. It's very possible that this isn't the way it should be done, but I don't have the time to rewrite the whole plugin at the moment, so it'll have to do for now. Any suggestions for how I should have done it would be greatly appreciated. And maybe it will be helpful to someone in a different situation.
Essentially, listen to the tabs.onUpdated event waiting for the 'complete' status, which indicates we've navigated to a new page. Then send message to Devtools.js to refresh the side panel, by setting its page to 'panel.html' again.
In background.js:
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
if (changeInfo.status == 'complete') {
reloadExtension(port);
}
});
function reloadExtension(port) {
var message = {action: "reloadExtension"};
port.postMessage(message);
}
In Devtools.js:
var sb;
createSidebar();
function createSidebar() {
chrome.devtools.panels.elements.createSidebarPane("GTM dataLayer Sifter", function(sidebar) {
sb = sidebar;
sb.setPage("panel.html");
});
}
var port = chrome.extension.connect({
name: "Devtools.js Communication"
});
// Listen to messages from the background page
port.onMessage.addListener(function(message) {
if(message.action == "reloadExtension"){
sb.setPage("panel.html");
}
});
You can do it by listen onNavigated event:
In Devtools.js
chrome.devtools.network.onNavigated.addListener(() => {
console.log('Inspected page reloaded');
});

Is there a way to open KCFinder in a lightbox, not through window.open?

The title says it all really, the way it works at the moment it will open as a popup in a new window, the problem I've found with this is that if you already have the window open and click the button to open up the popup, nothing will happen.
This means that people could potentially have the window open without realising, and get frustrated at clicking the button and having nothing happen.
Hope that makes sense, but the only way I can think to counter this would be to open KCFinder in a lightbox on the page, any ideas if this is possible?
I don't think there's a way to open it in a light box but you can record the name of the window it opens then check to see if the window is open and focus on it if it is already open. Try this:
window.KCFinder = {
callBack: function(fileUrl) {
// do something with fileUrl
window.KCFinder = null;
}
};
if(typeof kcwindow == 'undefined' || kcwindow.closed) {
kcwindow = window.open('/eshop/kcfinder/browse.php?type=images', 'kcfinder_textbox',
'status=0, toolbar=0, location=0, menubar=0, directories=0, resizable=1, scrollbars=0, width=800, height=500'
);
} else {
kcwindow.focus();
}

How to open a mailto: link from a Chrome Extension?

I have a URL shortening Chrome extension called Shrtr. Right now, it allows users to copy the shortened URL to clipboard, but in the next version, I've added the ability to email the shortened URL, using a mailto: link (i.e. mailto:?subject=<original page title>&body=<short URL>).
The problem is, you cannot just assign document.location.href = 'mailto...'; from an extension. The following 2 methods worked for me, but with both, I end up with an open blank tab in the browser:
Method 1: window.open
var wnd = window.open(emailUrl);
setTimeOut(function() {
wnd.close();
}, 500);
Notice the need to wait before closing the window. This works (i.e. mail client new message dialog appears, pre-populated), but the new tab remains open.
Method 2: using chrome.tabs
chrome.tabs.create({ url: emailUrl }, function(tab) {
setTimeOut(function() {
chrome.tabs.remove(tab.id);
}, 500);
});
Again, works - but tab remains open. Any ideas?
var emailUrl = "mailto:blah#blah.com";
chrome.tabs.update({
url: emailUrl
});
I realize this is an old question, but I myself had the same issue, and I figured out how to solve the problem so I thought I would share.
The issue stems from the fact that (I believe) you are calling the below code from your extension popup page.
chrome.tabs.create({ url: emailUrl }, function(tab) {
setTimeout(function() {
chrome.tabs.remove(tab.id);
}, 500);
});
The problem with this is that as soon as a new tab is created, the popup page dies and the callback code is never executed.
We can remedy this by moving that code into a function within the background page whose lifetime is not tied to the popup page:
function sendEmail() {
var emailUrl = "mailto:blah#blah.com";
chrome.tabs.create({ url: emailUrl }, function(tab) {
setTimeout(function() {
chrome.tabs.remove(tab.id);
}, 500);
});
}
and calling it via chrome.extension.getBackgroundPage().sendEmail() from your popup page.
Using the above method, the default email client will be opened, and the new tab will be automatically closed after 500 milliseconds.
wouldnt u need a close statement like this
close
credits go to Daniel How to close current tab in a browser window?
or even something like this
//keep a handle to the window you open.
var newWin = window.open('my window', 'http://.../');
...
//some point later in the code
newWin.close();
credits go to Tracker1 Javascript Code to close tab that works in IE, Firefox and Chrome?
I have solved the problem. Please check if it fits your solution space.
I have used the following code to open a mailto client in chrome extension.
$('.email').click(function(){
var hrefString = $(this).attr('href');
var myWindow = window.open(hrefString, "Opening mail client", "width=200, height=100");
myWindow.document.write("<p>Opening mail client.Please wait!!</p>");
setTimeout(function(){ myWindow.close() }, 2000);
});
where the element was :
<a style="padding: 0 0 0 5px;" href="mailto:abc#xyz.com" class="email">
This worked for me.
Hope it will help others.
Regards,
Karan Ratra

Prevent window.open from focusing

I want to open a page in a new tab in Google Chrome with window.open(), but I don't want that window to gain focus after it's opened, but to stay in the background.
Is this possible? It only has to work on Google Chrome. It can also use the Google Chrome extension API.
Thanks
The proper way would be to use extension API:
chrome.tabs.create({url: "http://...", selected: false});
Code should be placed in a background page. If you need it inside a content script you can pass a message to a background page, like so:
//content script
chrome.runtime.sendMessage({link: link});
//background page
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
if(message.link) {
chrome.tabs.create({url: message.link, selected: false});
}
});
window.open(url, name, features);
window.focus();
You will see the new window for a short moment though.
There is a way out in all the browser
function openURL(url, opt){
if (opt == 0){ // current window
window.location = url;
}else if (opt == 1){ // new window
window.open(url);
}else if (opt == 2){ // background window
window.open(url); self.focus();
}
}
so By using this you can do anything you want.
openURL( "http://www.google.com", 0 ) --> open in same window
openURL( "http://www.google.com", 1 ) --> open in new window
openURL( "http://www.google.com", 2 ) --> open in new window but in background.
Yes you can do that just use:
var myWindow = window.open(url,name,features);
myWindow.blur();
Activate parent window from child or activate self once child is opened.

Google Chrome Extension Running in the background

I am trying to make a google extension that basically checks the current tab URL to see if the URL is our prefix, so far I have this in my background.html (I have tab and background permissions set in my manifest):
<script type="text/javascript">
chrome.tabs.getSelected(null, function(tab) {
alert(tab.url);
if(tab.url == "http://www.google.com") {
alert("YOU'RE AT GOOGLE");
}
//changeTabURL(tab.url, tab);
});
</script>
So this seems to run only when I first load the extension, it tells me "chrome://extensions" and then it disappears. How do I get it to check each time the user goes to a new URL? Is this possible?
Thanks!
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
if(changeInfo.status == "loading"){
//do url check
}
});
use the following:
chrome.tabs.onUpdated.addListener(function(Tab tab) {...});
See the documentation here.

Categories