I'm having this issue with a simple extension I'm working on.
The extension consists of a bunch of links. When I click a single link, the extension closes.
I would like to keep the extension window open so I can open more links before closing the extension/clicking on the page to continue working.
Is there a way I can keep the extension open once a single link is clicked and only close it when I click on the page/lose focus?
Thanks.
Switching to another tab in the same window closes the popup because the popup is conceptually bound to the tab where it was invoked. When you open a URL it opens in a new active tab by default ("active" means it's currently in foreground), the old tab loses its active status, its popup closes.
The solution is to open the links in an inactive tab i.e. in background.
document.addEventListener('click', evt => {
const a = evt.target.closest('a[href]');
if (a) {
evt.preventDefault();
chrome.tabs.create({url: a.href, active: false});
}
});
Alternatively, open the links in a new window using chrome.windows.create.
Related
I searched all over and haven't found an answer. I'm developing a Chrome extension and would like to know how to make the popup window stay open if the user chooses to open a link in a new background tab. (For example, clicking on the link while pressing the "ctrl" key.) Currently when I do that, the popup closes even though the user stays on the current tab.
It is different than How to keep Google Chrome Extension popup open?, as that's talking about when the user focuses on a different window, then the popup closes. I'm talking about when the user specifically stays focused on the popup, as in the example given that the user presses "ctrl" while clicking on the link, that the focus stays on current page.
chrome.tabs.create({ url, active: false });
From the docs:
active (boolean, optional): Whether the tab should become the active tab in the window. Does not affect whether the window is focused (see windows.update). Defaults to true.
Ref: https://developer.chrome.com/docs/extensions/reference/tabs/
I am creating a link in a Trello card to an external link. What I want to achieve is that this link opens in the same browser tab ( _self ) or opens in a new browser tab and return to this tab if the link is activated again. As it is now it generates a new browser tab every time clicking the link. Is there any suggestion to achieve this ?
You can set specific window's name, in order to open reuse the tab. You can do the following way.
Foo
Bar
Or this way also..
<div id="tabopen">
link
</div>
<script>
document.getElementById("tabopen").onclick = function(evt){
if (evt.target.tagName === "A")
window.open(evt.target.href, evt.target.href);
return false;
}
</script>
This is a very old question, but I thought I should add that in 2022:
Adding a link as an attachment to the card opens the url in a new tab when you click on it.
Adding a link as text in the description of the card opens the link in the same tab when you click on it.
My Chrome Extension has a popup with a few links, which I would like to be opened in the current tab if it's a New Tab page, or open in a new tab otherwise. So I believe I need to know the active tab's URL. Or is there another way to identify a New Tab?
I'd like to use the "activeTab" permission rather than "tabs" - I want the user to see as few permissions listed as possible.
The only way I've found to identify the tab's URL is by using a background page and
chrome.browserAction.onClicked.addListener(function(tab))
But this is not compatible with having a popup defined in the manifest. I can set the popup page programatically, but I can't see a way to make the popup appear. Is there a way to do that?
When I have default_popup defined in the manifest I use
document.addEventListener('DOMContentLoaded', function ())
to launch the related code, so no reference to the active tab is available. Is there another way to run the code, or to get the active tab?
Thanks.
The activeTab permission allows you to "Get the URL, title, and favicon for that tab via an API that returns a tabs.Tab object". So, to get the current tab URL from the popup you can do:
chrome.tabs.query( {active:true, currentWindow: true}, function(tabs) {
currentUrl = tabs[0].url;
});
I have implemented a chrome extension. Was wondering if the popup.html can be opened in a new tab? Every single click on the page, and the popup disappears :( .. Was wondering if I can stick it to the page or is there a way to open the extension in a new page?
Yes, a popup page is just a normal extension page, you can do the following to open a new popup tab from the background page. I use that every time when the user first installs the extension, I open the about page, you can do the same for the popup page.
chrome.tabs.create({url: 'popup.html'})
For one of my extensions, My Hangouts, I have a small "open as tab" button within the popup, I bind the click event for that link to execute this:
chrome.tabs.create({url: chrome.extension.getURL('popup.html#window')});
The reason why I passed the hash is because I wanted to add more content when the user opens it in a popup because there is more real estate to play with.
Within the popup, I use normal JavaScript to differentiate whether I opened the tab in the new tab page or in a normal page like the following:
if (window.location.hash == '#window') {
this.displayAsTab = true;
}
You can do tricks like this to make your extensions user experience better.
here is the same issue: Chrome Extension: onclick extension icon, open popup.html in new tab
use:
chrome.tabs.create({'url': chrome.extension.getURL('popup.html')}, function(tab) {
// Tab opened.
});
property "pinned" to stick the tab.
I'm trying to focus an existing tab when the content reloads. The usual window methods don't seem to work.
Here's whats happening: On page_1 I have a link like...
Go to my other page
If the tab doesn't exist, when the link is clicked it opens a new tab and takes focus. (Perfect)
If you then go back to page_1 and click the link again, it reloads the content in the existing tab (perfect) but doesn't focus (crap). I've tried the usual window.focus, $(window).focus methods on load with page_2 without luck.
Any recommendations?
It is impossible.
The following appears to work in IE8 and FF13:
<script type="text/javascript">
// Stupid script to force focus to an existing tab when the link is clicked.
// And yes, we do need to open it twice.
function openHelp(a) {
var tab = window.open(a.href, a.target);
tab.close();
tab = window.open(a.href, a.target);
return false;
}
</script>
Help
There is a workaround to this. Use javascript to open a window in a new tab, store a reference to that tab, and when you want to focus it; close it first and then re-open it.
if (window.existingWindow != null)
try { window.existingWindow.close(); } catch (e) { };
window.existingWindow = window.open("/your/url", "yourTabName");
We use a similar approach to opening the preview pane of the current page you're working on in our service called Handcraft where the above works as expected (we wanted the new window to always focus).
Without using a framework you can put a script block at the bottom of your page that will run once the page loads. Because it is after your HTML you can be assured that the HTML is refers to is actually available.
The script can set the focus to the element you want.