Programmatically (or optionally) override Chrome's New Tab page

Programmatically (or optionally) override Chrome's New Tab page - javascript

I've written a Chrome extension that overrides the New Tab page:
manifest.json:
"chrome_url_overrides": {
"newtab": "new-tab.html"
},
Is there a way to make this override optional? That is, I'd like to enable the user to uncheck a checkbox in the options page and disable the New Tab override. This must be possible because when I open a new tab for the first time, there's a popup informing of an extension changing the New Tab settings and asking whether to keep changes or restore settings:
I couldn't find any API for controlling overrides. The New Tab Redirect project doesn't have an option to display the native New Tab.

Google made a Star Wars new tab replacement which allows you to view the default new tab page. The url it uses is chrome-search://local-ntp/local-ntp.html.
Example:
options.html:
<input type="checkbox"> Use default new tab page
options.js:
var checkbox = document.querySelector("input[type=checkbox]")
checkbox.addEventListener("click", function() {
chrome.storage.sync.set({ defaultnewtab: checkbox.checked })
})
newtab.js:
chrome.storage.sync.get("defaultnewtab", function(storage) {
if(storage.defaultnewtab) {
chrome.tabs.update({ url: "chrome-search://local-ntp/local-ntp.html" })
}
})

Instead of using the chrome_url_override you could write a listener that listens for when tabs update using the chrome.tabs.onUpdated.addListener(), then check if the url is chrome://newtab/ and if it is and the check box is ticked, then using chrome.tabs.update() relocate them to another page.

Using the Star Wars method as described #Daniel Herr, I did this, which is working well. Although feels a little hack-y.
I have an option being set in the popup.html whether the Extension is "on" or not.
First off, set the default new tab page using the Chrome defined method:
manifest.json
"chrome_url_overrides": {
"newtab": "newtab.html"
},
Then in your Extension's newtab.html call a new JavaScript file, newtab.js (or whatever).
I am also using jQuery, so my code uses that, but you can do this natively using DOMContentLoaded.
newtab.js
$(document).ready(function(){
// It takes a moment for the Chrome query/update so sometimes there is a flash of content
// Hiding the Body makes it look blank/white until either redirected or shown
$('body').hide();
var background = chrome.extension.getBackgroundPage();
var _app = background._app;
// App is OFF, show Default New Tab
if(!_app._on){
// Get the current Tab
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
var active = tabs[0].id;
// Set the URL to the Local-NTP (New Tab Page)
chrome.tabs.update(active, { url: "chrome-search://local-ntp/local-ntp.html" }, function() { });
});
// App is ON, show custom content
} else {
$('body').show();
}
});
Basically, the methodology is to update the Tab so that it is redirected to chrome-search://local-ntp/local-ntp.html which is the hard URL to the default Chrome NTP.
Since this is a Chrome internal URL -- the URL field still appears blank.

Related

How can I open a link in new tab after ajax call? [duplicate]

I'm trying to open a URL in a new tab, as opposed to a popup window.
I've seen related questions where the responses would look something like:
window.open(url,'_blank');
window.open(url);
But none of them worked for me, the browser still tried to open a popup window.

This is a trick,
function openInNewTab(url) {
window.open(url, '_blank').focus();
}
// Or just
window.open(url, '_blank').focus();
In most cases, this should happen directly in the onclick handler for the link to prevent pop-up blockers, and the default "new window" behavior. You could do it this way, or by adding an event listener to your DOM object.
<div onclick="openInNewTab('www.test.com');">Something To Click On</div>
Reference: Open a URL in a new tab using JavaScript

Nothing an author can do can choose to open in a new tab instead of a new window; it is a user preference. (Note that the default user preference in most browsers is for new tabs, so a trivial test on a browser where that preference hasn't been changed will not demonstrate this.)
CSS3 proposed target-new, but the specification was abandoned.
The reverse is not true; by specifying certain window features for the window in the third argument of window.open(), you can trigger a new window when the preference is for tabs.

window.open() will not open in a new tab if it is not happening on the actual click event. In the example given the URL is being opened on the actual click event. This will work provided the user has appropriate settings in the browser.
<a class="link">Link</a>
<script type="text/javascript">
$("a.link").on("click",function(){
window.open('www.yourdomain.com','_blank');
});
</script>
Similarly, if you are trying to do an Ajax call within the click function and want to open a window on success, ensure you are doing the Ajax call with the async : false option set.

This creates a virtual a element, gives it target="_blank", so it opens in a new tab, gives it the proper URL href and then clicks it.
function openInNewTab(href) {
Object.assign(document.createElement('a'), {
target: '_blank',
rel: 'noopener noreferrer',
href: href,
}).click();
}
And then you can use it like:
openInNewTab("https://google.com");
Important note:
This must be called during the so-called 'trusted event' callback—e.g., during the click event (not necessary in a callback function directly, but during a click action). Otherwise opening a new page will be blocked by the browser.
If you call it manually at some random moment (e.g., inside an interval or after server response), it might be blocked by the browser (which makes sense as it'd be a security risk and might lead to poor user experience).

Browsers have different behaviors for how they handle window.open
You cannot expect the behavior to be the same across all browsers. window.open doesn't reliably open pop-ups on a new tab across browsers, and it also depends on the user's preferences.
On Internet Explorer (11), for example, users can choose to open popups in a new window or a new tab, you cannot force Internet Explorer 11 to open popups in a certain way through window.open, as alluded to in Quentin's answer.
As for Firefox (29), the behavior for window.open(url, '_blank') depends on the browser's tab preferences, though you can still force it to open URLs in a popup window by specifying a width and height (see the "Chrome" section below).
Internet Explorer (11)
You can set Internet Explorer to open pop-ups in a new window:
After doing that, try running window.open(url) and window.open(url, '_blank').
Observe that the pages open in a new window, not a new tab.
Firefox (29)
You can also set the tab preference to open new windows, and see the same results.
Chrome
It looks like Chrome (version 34) does not have any settings for choosing to open popups in a new window or a new tab. Although, some ways to do it (editing the registry) are discussed in this question.
In Chrome and Firefox, specifying a width and height will force a popup (as mentioned in the answers here), even when a user has set Firefox to open new windows in a new tab
let url = 'https://stackoverflow.com'
window.open(url, '', 'width=400, height=400')
However, in Internet Explorer 11 the same code will always open a link in a new tab if tabs is chosen in the browser preferences, specifying a width and height will not force a new window popup.
In Chrome, it seems window.open opens a new tab when it is used in an onclick event, and a new window when it is used from the browser console (as noted by other people), and pop-ups open when a width and height are specified.
Additional reading: window.open documentation.

If you use window.open(url, '_blank'), it will be blocked (popup blocker) on Chrome.
Try this:
//With JQuery
$('#myButton').click(function () {
var redirectWindow = window.open('http://google.com', '_blank');
redirectWindow.location;
});
With pure JavaScript,
document.querySelector('#myButton').onclick = function() {
var redirectWindow = window.open('http://google.com', '_blank');
redirectWindow.location;
};

To elaborate Steven Spielberg's answer, I did this in such a case:
$('a').click(function() {
$(this).attr('target', '_blank');
});
This way, just before the browser will follow the link I'm setting the target attribute, so it will make the link open in a new tab or window (depends on user's settings).
One line example in jQuery:
$('a').attr('target', '_blank').get(0).click();
// The `.get(0)` must be there to return the actual DOM element.
// Doing `.click()` on the jQuery object for it did not work.
This can also be accomplished just using native browser DOM APIs as well:
document.querySelector('a').setAttribute('target', '_blank');
document.querySelector('a').click();

I use the following and it works very well!
window.open(url, '_blank').focus();

I think that you can't control this. If the user had setup their browser to open links in a new window, you can't force this to open links in a new tab.
JavaScript open in a new window, not tab

An interesting fact is that the new tab can not be opened if the action is not invoked by the user (clicking a button or something) or if it is asynchronous, for example, this will not open in new tab:
$.ajax({
url: "url",
type: "POST",
success: function() {
window.open('url', '_blank');
}
});
But this may open in a new tab, depending on browser settings:
$.ajax({
url: "url",
type: "POST",
async: false,
success: function() {
window.open('url', '_blank');
}
});

Whether to open the URL in a new tab or a new window, is actually controlled by the user's browser preferences. There is no way to override it in JavaScript.
window.open() behaves differently depending on how it is being used. If it is called as a direct result of a user action, let us say a button click, it should work fine and open a new tab (or window):
const button = document.querySelector('#openTab');
// add click event listener
button.addEventListener('click', () => {
// open a new tab
const tab = window.open('https://attacomsian.com', '_blank');
});
However, if you try to open a new tab from an AJAX request callback, the browser will block it as it was not a direct user action.
To bypass the popup blocker and open a new tab from a callback, here is a little hack:
const button = document.querySelector('#openTab');
// add click event listener
button.addEventListener('click', () => {
// open an empty window
const tab = window.open('about:blank');
// make an API call
fetch('/api/validate')
.then(res => res.json())
.then(json => {
// TODO: do something with JSON response
// update the actual URL
tab.location = 'https://attacomsian.com';
tab.focus();
})
.catch(err => {
// close the empty window
tab.close();
});
});

Just omitting the strWindowFeatures parameters will open a new tab, unless the browser setting overrides it (browser settings trumps JavaScript).
New window
var myWin = window.open(strUrl, strWindowName, [strWindowFeatures]);
New tab
var myWin = window.open(strUrl, strWindowName);
-- or --
var myWin = window.open(strUrl);

This has nothing to do with browser settings if you are trying to open a new tab from a custom function.
In this page, open a JavaScript console and type:
document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").click();
And it will try to open a popup regardless of your settings, because the 'click' comes from a custom action.
In order to behave like an actual 'mouse click' on a link, you need to follow spirinvladimir's advice and really create it:
document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").dispatchEvent((function(e){
e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
false, false, false, false, 0, null);
return e
}(document.createEvent('MouseEvents'))));
Here is a complete example (do not try it on jsFiddle or similar online editors, as it will not let you redirect to external pages from there):
<!DOCTYPE html>
<html>
<head>
<style>
#firing_div {
margin-top: 15px;
width: 250px;
border: 1px solid blue;
text-align: center;
}
</style>
</head>
<body>
<a id="my_link" href="http://www.google.com"> Go to Google </a>
<div id="firing_div"> Click me to trigger custom click </div>
</body>
<script>
function fire_custom_click() {
alert("firing click!");
document.getElementById("my_link").dispatchEvent((function(e){
e.initMouseEvent("click", true, true, window, /* type, canBubble, cancelable, view */
0, 0, 0, 0, 0, /* detail, screenX, screenY, clientX, clientY */
false, false, false, false, /* ctrlKey, altKey, shiftKey, metaKey */
0, null); /* button, relatedTarget */
return e
}(document.createEvent('MouseEvents'))));
}
document.getElementById("firing_div").onclick = fire_custom_click;
</script>
</html>

function openTab(url) {
const link = document.createElement('a');
link.href = url;
link.target = '_blank';
document.body.appendChild(link);
link.click();
link.remove();
}

(function(a) {
document.body.appendChild(a);
a.setAttribute('href', location.href);
a.dispatchEvent((function(e) {
e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, true, false, false, false, 0, null);
return e
}(document.createEvent('MouseEvents'))))
}(document.createElement('a')))

You can use a trick with form:
$(function () {
$('#btn').click(function () {
openNewTab("http://stackoverflow.com")
return false;
});
});
function openNewTab(link) {
var frm = $('<form method="get" action="' + link + '" target="_blank"></form>')
$("body").append(frm);
frm.submit().remove();
}
jsFiddle demo

Do not use target="_blank"
Always use a specific name for that window, in my case meaningfulName. In this case you save processor resources:
button.addEventListener('click', () => {
window.open('https://google.com', 'meaningfulName')
})
In this way, when you click, for example, 10 times on a button, the browser will always rerender it in one new tab, instead of opening it in 10 different tabs, which will consume much more resources.
You can read more about this on MDN.

jQuery
$('<a />',{'href': url, 'target': '_blank'}).get(0).click();
JavaScript
Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();

To open a new tab and stay on the same location, you can open the current page in the new tab, and redirect the old tab to the new URL.
let newUrl = 'http://example.com';
let currentUrl = window.location.href;
window.open(currentUrl , '_blank'); // Open window with the URL of the current page
location.href = newUrl; // Redirect the previous window to the new URL
You will be automatically moved by the browser to a new opened tab. It will look like your page is reloaded and you will stay on same page but on a new window:

Or you could just create a link element and click it...
var evLink = document.createElement('a');
evLink.href = 'http://' + strUrl;
evLink.target = '_blank';
document.body.appendChild(evLink);
evLink.click();
// Now delete it
evLink.parentNode.removeChild(evLink);
This shouldn't be blocked by any popup blockers... Hopefully.

There is an answer to this question and it is not no.
I found an easy workaround:
Step 1: Create an invisible link:
<a id="yourId" href="yourlink.html" target="_blank" style="display: none;"></a>
Step 2: Click on that link programmatically:
document.getElementById("yourId").click();
Here you go! It works a charm for me.

Here's an example of how we can put it inside an HTML tag
<button onClick="window.open('https://stackoverflow.com/','_blank')">Stackoverflow</button>

How about creating an <a> with _blank as target attribute value and the url as href, with style display:hidden with a a children element? Then add to the DOM and then trigger the click event on a children element.
UPDATE
That doesn't work. The browser prevents the default behaviour. It could be triggered programmatically, but it doesn't follow the default behaviour.
Check and see for yourself: http://jsfiddle.net/4S4ET/

This might be a hack, but in Firefox if you specify a third parameter, 'fullscreen=yes', it opens a fresh new window.
For example,
MyPDF
It seems to actually override the browser settings.

The window.open(url) will open the URL in a new browser tab. Below is the JavaScript alternative to it:
let a = document.createElement('a');
a.target = '_blank';
a.href = 'https://support.wwf.org.uk/';
a.click(); // We don't need to remove 'a' from the DOM, because we did not add it
Here is a working example (Stack Overflow snippets do not allow opening a new tab).

There are lots of answer copies suggesting using "_blank" as the target, however I found this didn't work. As Prakash notes, it is up to the browser. However, you can make certain suggestions to the browser, such as to whether the window should have a location bar.
If you suggest enough "tab-like things" you might get a tab, as per Nico's answer to this more specific question for chrome:
window.open('http://www.stackoverflow.com', '_blank', 'toolbar=yes, location=yes, status=yes, menubar=yes, scrollbars=yes');
Disclaimer: This is not a panacea. It is still up to the user and browser. Now at least you've specified one more preference for what you'd like your window to look like.

Opening a new tab from within a Firefox (Mozilla) extension goes like this:
gBrowser.selectedTab = gBrowser.addTab("http://example.com");

This way is similar to the previous solutions, but implemented differently:
.social_icon -> some class with CSS
<div class="social_icon" id="SOME_ID" data-url="SOME_URL"></div>
$('.social_icon').click(function(){
var url = $(this).attr('data-url');
var win = window.open(url, '_blank'); ///similar to above solution
win.focus();
});

This works for me. Just prevent the event, add the URL to an <a> tag, and then trigger the click event on that tag.
JavaScript
$('.myBtn').on('click', function(event) {
event.preventDefault();
$(this).attr('href', "http://someurl.com");
$(this).trigger('click');
});
HTML
Go

I'm going to agree somewhat with the person who wrote (paraphrased here): "For a link in an existing web page, the browser will always open the link in a new tab if the new page is part of the same web site as the existing web page." For me, at least, this "general rule" works in Chrome, Firefox, Opera, Internet Explorer, Safari, SeaMonkey, and Konqueror.
Anyway, there is a less complicated way to take advantage of what the other person presented. Assuming we are talking about your own web site ("thissite.com" below), where you want to control what the browser does, then, below, you want "specialpage.htm" to be empty, no HTML at all in it (it saves time sending data from the server!).
var wnd, URL; // Global variables
// Specifying "_blank" in window.open() is SUPPOSED to keep the new page from replacing the existing page
wnd = window.open("http://www.thissite.com/specialpage.htm", "_blank"); // Get reference to just-opened page
// If the "general rule" above is true, a new tab should have been opened.
URL = "http://www.someothersite.com/desiredpage.htm"; // Ultimate destination
setTimeout(gotoURL(), 200); // Wait 1/5 of a second; give browser time to create tab/window for empty page
function gotoURL()
{
wnd.open(URL, "_self"); // Replace the blank page, in the tab, with the desired page
wnd.focus(); // When browser not set to automatically show newly-opened page, this MAY work
}

How to open url in new tab? [duplicate]

I'm trying to open a URL in a new tab, as opposed to a popup window.
I've seen related questions where the responses would look something like:
window.open(url,'_blank');
window.open(url);
But none of them worked for me, the browser still tried to open a popup window.

This is a trick,
function openInNewTab(url) {
window.open(url, '_blank').focus();
}
// Or just
window.open(url, '_blank').focus();
In most cases, this should happen directly in the onclick handler for the link to prevent pop-up blockers, and the default "new window" behavior. You could do it this way, or by adding an event listener to your DOM object.
<div onclick="openInNewTab('www.test.com');">Something To Click On</div>
Reference: Open a URL in a new tab using JavaScript

Nothing an author can do can choose to open in a new tab instead of a new window; it is a user preference. (Note that the default user preference in most browsers is for new tabs, so a trivial test on a browser where that preference hasn't been changed will not demonstrate this.)
CSS3 proposed target-new, but the specification was abandoned.
The reverse is not true; by specifying certain window features for the window in the third argument of window.open(), you can trigger a new window when the preference is for tabs.

window.open() will not open in a new tab if it is not happening on the actual click event. In the example given the URL is being opened on the actual click event. This will work provided the user has appropriate settings in the browser.
<a class="link">Link</a>
<script type="text/javascript">
$("a.link").on("click",function(){
window.open('www.yourdomain.com','_blank');
});
</script>
Similarly, if you are trying to do an Ajax call within the click function and want to open a window on success, ensure you are doing the Ajax call with the async : false option set.

This creates a virtual a element, gives it target="_blank", so it opens in a new tab, gives it the proper URL href and then clicks it.
function openInNewTab(href) {
Object.assign(document.createElement('a'), {
target: '_blank',
rel: 'noopener noreferrer',
href: href,
}).click();
}
And then you can use it like:
openInNewTab("https://google.com");
Important note:
This must be called during the so-called 'trusted event' callback—e.g., during the click event (not necessary in a callback function directly, but during a click action). Otherwise opening a new page will be blocked by the browser.
If you call it manually at some random moment (e.g., inside an interval or after server response), it might be blocked by the browser (which makes sense as it'd be a security risk and might lead to poor user experience).

If you use window.open(url, '_blank'), it will be blocked (popup blocker) on Chrome.
Try this:
//With JQuery
$('#myButton').click(function () {
var redirectWindow = window.open('http://google.com', '_blank');
redirectWindow.location;
});
With pure JavaScript,
document.querySelector('#myButton').onclick = function() {
var redirectWindow = window.open('http://google.com', '_blank');
redirectWindow.location;
};

To elaborate Steven Spielberg's answer, I did this in such a case:
$('a').click(function() {
$(this).attr('target', '_blank');
});
This way, just before the browser will follow the link I'm setting the target attribute, so it will make the link open in a new tab or window (depends on user's settings).
One line example in jQuery:
$('a').attr('target', '_blank').get(0).click();
// The `.get(0)` must be there to return the actual DOM element.
// Doing `.click()` on the jQuery object for it did not work.
This can also be accomplished just using native browser DOM APIs as well:
document.querySelector('a').setAttribute('target', '_blank');
document.querySelector('a').click();

I use the following and it works very well!
window.open(url, '_blank').focus();

I think that you can't control this. If the user had setup their browser to open links in a new window, you can't force this to open links in a new tab.
JavaScript open in a new window, not tab

An interesting fact is that the new tab can not be opened if the action is not invoked by the user (clicking a button or something) or if it is asynchronous, for example, this will not open in new tab:
$.ajax({
url: "url",
type: "POST",
success: function() {
window.open('url', '_blank');
}
});
But this may open in a new tab, depending on browser settings:
$.ajax({
url: "url",
type: "POST",
async: false,
success: function() {
window.open('url', '_blank');
}
});

Whether to open the URL in a new tab or a new window, is actually controlled by the user's browser preferences. There is no way to override it in JavaScript.
window.open() behaves differently depending on how it is being used. If it is called as a direct result of a user action, let us say a button click, it should work fine and open a new tab (or window):
const button = document.querySelector('#openTab');
// add click event listener
button.addEventListener('click', () => {
// open a new tab
const tab = window.open('https://attacomsian.com', '_blank');
});
However, if you try to open a new tab from an AJAX request callback, the browser will block it as it was not a direct user action.
To bypass the popup blocker and open a new tab from a callback, here is a little hack:
const button = document.querySelector('#openTab');
// add click event listener
button.addEventListener('click', () => {
// open an empty window
const tab = window.open('about:blank');
// make an API call
fetch('/api/validate')
.then(res => res.json())
.then(json => {
// TODO: do something with JSON response
// update the actual URL
tab.location = 'https://attacomsian.com';
tab.focus();
})
.catch(err => {
// close the empty window
tab.close();
});
});

Just omitting the strWindowFeatures parameters will open a new tab, unless the browser setting overrides it (browser settings trumps JavaScript).
New window
var myWin = window.open(strUrl, strWindowName, [strWindowFeatures]);
New tab
var myWin = window.open(strUrl, strWindowName);
-- or --
var myWin = window.open(strUrl);

This has nothing to do with browser settings if you are trying to open a new tab from a custom function.
In this page, open a JavaScript console and type:
document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").click();
And it will try to open a popup regardless of your settings, because the 'click' comes from a custom action.
In order to behave like an actual 'mouse click' on a link, you need to follow spirinvladimir's advice and really create it:
document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").dispatchEvent((function(e){
e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
false, false, false, false, 0, null);
return e
}(document.createEvent('MouseEvents'))));
Here is a complete example (do not try it on jsFiddle or similar online editors, as it will not let you redirect to external pages from there):
<!DOCTYPE html>
<html>
<head>
<style>
#firing_div {
margin-top: 15px;
width: 250px;
border: 1px solid blue;
text-align: center;
}
</style>
</head>
<body>
<a id="my_link" href="http://www.google.com"> Go to Google </a>
<div id="firing_div"> Click me to trigger custom click </div>
</body>
<script>
function fire_custom_click() {
alert("firing click!");
document.getElementById("my_link").dispatchEvent((function(e){
e.initMouseEvent("click", true, true, window, /* type, canBubble, cancelable, view */
0, 0, 0, 0, 0, /* detail, screenX, screenY, clientX, clientY */
false, false, false, false, /* ctrlKey, altKey, shiftKey, metaKey */
0, null); /* button, relatedTarget */
return e
}(document.createEvent('MouseEvents'))));
}
document.getElementById("firing_div").onclick = fire_custom_click;
</script>
</html>

function openTab(url) {
const link = document.createElement('a');
link.href = url;
link.target = '_blank';
document.body.appendChild(link);
link.click();
link.remove();
}

(function(a) {
document.body.appendChild(a);
a.setAttribute('href', location.href);
a.dispatchEvent((function(e) {
e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, true, false, false, false, 0, null);
return e
}(document.createEvent('MouseEvents'))))
}(document.createElement('a')))

You can use a trick with form:
$(function () {
$('#btn').click(function () {
openNewTab("http://stackoverflow.com")
return false;
});
});
function openNewTab(link) {
var frm = $('<form method="get" action="' + link + '" target="_blank"></form>')
$("body").append(frm);
frm.submit().remove();
}
jsFiddle demo

Do not use target="_blank"
Always use a specific name for that window, in my case meaningfulName. In this case you save processor resources:
button.addEventListener('click', () => {
window.open('https://google.com', 'meaningfulName')
})
In this way, when you click, for example, 10 times on a button, the browser will always rerender it in one new tab, instead of opening it in 10 different tabs, which will consume much more resources.
You can read more about this on MDN.

jQuery
$('<a />',{'href': url, 'target': '_blank'}).get(0).click();
JavaScript
Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();

To open a new tab and stay on the same location, you can open the current page in the new tab, and redirect the old tab to the new URL.
let newUrl = 'http://example.com';
let currentUrl = window.location.href;
window.open(currentUrl , '_blank'); // Open window with the URL of the current page
location.href = newUrl; // Redirect the previous window to the new URL
You will be automatically moved by the browser to a new opened tab. It will look like your page is reloaded and you will stay on same page but on a new window:

Or you could just create a link element and click it...
var evLink = document.createElement('a');
evLink.href = 'http://' + strUrl;
evLink.target = '_blank';
document.body.appendChild(evLink);
evLink.click();
// Now delete it
evLink.parentNode.removeChild(evLink);
This shouldn't be blocked by any popup blockers... Hopefully.

There is an answer to this question and it is not no.
I found an easy workaround:
Step 1: Create an invisible link:
<a id="yourId" href="yourlink.html" target="_blank" style="display: none;"></a>
Step 2: Click on that link programmatically:
document.getElementById("yourId").click();
Here you go! It works a charm for me.

Here's an example of how we can put it inside an HTML tag
<button onClick="window.open('https://stackoverflow.com/','_blank')">Stackoverflow</button>

How about creating an <a> with _blank as target attribute value and the url as href, with style display:hidden with a a children element? Then add to the DOM and then trigger the click event on a children element.
UPDATE
That doesn't work. The browser prevents the default behaviour. It could be triggered programmatically, but it doesn't follow the default behaviour.
Check and see for yourself: http://jsfiddle.net/4S4ET/

This might be a hack, but in Firefox if you specify a third parameter, 'fullscreen=yes', it opens a fresh new window.
For example,
MyPDF
It seems to actually override the browser settings.

The window.open(url) will open the URL in a new browser tab. Below is the JavaScript alternative to it:
let a = document.createElement('a');
a.target = '_blank';
a.href = 'https://support.wwf.org.uk/';
a.click(); // We don't need to remove 'a' from the DOM, because we did not add it
Here is a working example (Stack Overflow snippets do not allow opening a new tab).

There are lots of answer copies suggesting using "_blank" as the target, however I found this didn't work. As Prakash notes, it is up to the browser. However, you can make certain suggestions to the browser, such as to whether the window should have a location bar.
If you suggest enough "tab-like things" you might get a tab, as per Nico's answer to this more specific question for chrome:
window.open('http://www.stackoverflow.com', '_blank', 'toolbar=yes, location=yes, status=yes, menubar=yes, scrollbars=yes');
Disclaimer: This is not a panacea. It is still up to the user and browser. Now at least you've specified one more preference for what you'd like your window to look like.

Opening a new tab from within a Firefox (Mozilla) extension goes like this:
gBrowser.selectedTab = gBrowser.addTab("http://example.com");

This way is similar to the previous solutions, but implemented differently:
.social_icon -> some class with CSS
<div class="social_icon" id="SOME_ID" data-url="SOME_URL"></div>
$('.social_icon').click(function(){
var url = $(this).attr('data-url');
var win = window.open(url, '_blank'); ///similar to above solution
win.focus();
});

This works for me. Just prevent the event, add the URL to an <a> tag, and then trigger the click event on that tag.
JavaScript
$('.myBtn').on('click', function(event) {
event.preventDefault();
$(this).attr('href', "http://someurl.com");
$(this).trigger('click');
});
HTML
Go

I'm going to agree somewhat with the person who wrote (paraphrased here): "For a link in an existing web page, the browser will always open the link in a new tab if the new page is part of the same web site as the existing web page." For me, at least, this "general rule" works in Chrome, Firefox, Opera, Internet Explorer, Safari, SeaMonkey, and Konqueror.
Anyway, there is a less complicated way to take advantage of what the other person presented. Assuming we are talking about your own web site ("thissite.com" below), where you want to control what the browser does, then, below, you want "specialpage.htm" to be empty, no HTML at all in it (it saves time sending data from the server!).
var wnd, URL; // Global variables
// Specifying "_blank" in window.open() is SUPPOSED to keep the new page from replacing the existing page
wnd = window.open("http://www.thissite.com/specialpage.htm", "_blank"); // Get reference to just-opened page
// If the "general rule" above is true, a new tab should have been opened.
URL = "http://www.someothersite.com/desiredpage.htm"; // Ultimate destination
setTimeout(gotoURL(), 200); // Wait 1/5 of a second; give browser time to create tab/window for empty page
function gotoURL()
{
wnd.open(URL, "_self"); // Replace the blank page, in the tab, with the desired page
wnd.focus(); // When browser not set to automatically show newly-opened page, this MAY work
}

From a browser action popup: open a new tab and fill input fields

I'm trying to build a basic Chrome extension that, from a browser action popup, opens a website in a new tab, and fills in the login credentials. I can get the Chrome extension to open the new page but can't seem to get it to input text into the input fields.
Manifest.json
{
"manifest_version": 2,
"name": "Vena",
"description": "This extension will allow users to login to vena accounts",
"version": "1.0",
"browser_action": {
"default_icon": "images/icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
}
popup.html
<!doctype html>
<html>
<head>
<title>Auto-Login</title>
<script src="popup.js"></script>
</head>
<body>
<h1>Login</h1>
<button id="checkPage">Login!</button>
</body>
</html>
popup.js
document.addEventListener('DOMContentLoaded', function() {
var checkPageButton = document.getElementById('checkPage');
checkPageButton.addEventListener('click', function() {
var newURL = "https://vena.io/";
chrome.tabs.create({ url: newURL });
var loginField = document.getElementsByClassName('js-email form-control input-lg');
var passwordField = document.getElementsByClassName('js-password form-control input-lg');
loginField.value = 'gsand';
passwordField.value = '123';
}, false);
}, false);
How do I fill in the information in the input areas of the new tab?

Another time, you may want to use something other than a popup (e.g. just a plain browser action button, or a panel) to test out your functionality. It is easier to debug things other than a popup due to the fact that the popup will disappear under so many conditions. Once you have the basic functionality debugged, you can move it into a popup and deal with the issues specific to using a popup.
Issues
You need to use a content script to interact with web pages:
The primary issue is that you have to use a content script to interact with a web page, such as manipulating the DOM, as you desire to do. Content scripts have to be injected into the web page. This can be done with a content_scripts entry in your manifest.json, or with chrome.tabs.executeScript() from JavaScript that is in the background context (background scripts, event scripts, popups, panels, tabs containing pages from your add-on, etc.). For what you are doing, chrome.tabs.executeScript() is the way to go.
Additional issues:
chrome.tabs.create() is asynchronous. You need to wait for the callback to execute so the tab exists in order to inject a content script. You can not inject scripts into a tab that does not yet exist. Note: You could use other, more complex, methods of determining when to inject the content script, but the callback for chrome.tabs.create() is a good way to do it in this case.
Once you create the new tab, you want to inject a script. This is not the "active tab", so you need to add "https://vena.io/*" to your permissions in your manifest.json.
The elements you desire to interact with are not immediately available on the page when the content script is run. You need to wait until they are available. I just used a setTimeout loop to poll until the elements are available. I chose to poll on 250ms intervals a maximum of 100 times (25 seconds). The elements were there each time after the first delay.
document.getElementsByClassName() returns an HTMLCollection, not a single element.
Popups close when you activate a different tab. Once the popup is closed/destroyed, you can not do any more processing within the code for the popup. In order to get around that:
In your chrome.tabs.create(), include active:false to prevent the new tab from becoming active immediately.
Call chrome.tabs.update() in the callback for chrome.tabs.executeScript() to active the tab once the content script has been injected (i.e. when you are done with all the processing you are going to do in the popup).
Code
Changes were only needed in your manifest.json and popup.js.
manifest.json
{
"manifest_version": 2,
"name": "Vena",
"description": "This extension will allow users to login to vena accounts",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab", //This is not needed as you never interact with the active tab
"https://vena.io/*"
]
}
popup.js
document.addEventListener('DOMContentLoaded', function() {
var checkPageButton = document.getElementById('checkPage');
checkPageButton.addEventListener('click', function() {
var newURL = "https://vena.io/";
//Must not make the tab active, or the popup will be destroyed preventing any
// further processing.
chrome.tabs.create({ url: newURL,active:false }, function(tab){
console.log('Attempting to inject script into tab:',tab);
chrome.tabs.executeScript(tab.id,{code:`
(function(){
var count = 100; //Only try 100 times
function changeLoginWhenExists(){
var loginField = document.getElementsByClassName('js-email form-control input-lg')[0];
var passwordField = document.getElementsByClassName('js-password form-control input-lg')[0];
//loginField and passwordField are each an HTMLCollection
if( loginField && passwordField ){
loginField.value = 'gsand';
passwordField.value = '123';
} else {
if(count-- > 0 ){
//The elements we need don't exist yet, wait a bit to try again.
//This could more appropriately be a MutationObserver
setTimeout(changeLoginWhenExists,250);
}
}
}
changeLoginWhenExists();
})();
`},function(results){
//Now that we are done with processing, make the tab active. This will
// close/destroy the popup.
chrome.tabs.update(tab.id,{active:true});
});
});
}, false);
}, false);
May need use document.execCommand('insertText', false, text);
Depending on the page, you may need/want to use:
document.execCommand('insertText', false, textValue);
If you do so, you will need to first select/focus the desired element. This would be instead of setting the .value property. Which you use will depend on what you are actually doing and the composition of the page you are altering. For the specific example in the question, setting the element's .value property works. For inserting text, using `document.execCommand('insertText') is more generally applicable.
May need a MutationObserver
In the above code I use a setTimeout() loop to delay until the desired elements exist. While that works in the above case, depending on your use case, it may be more appropriate for you to use a MutationObserver. Largely, which to use will depend on how immediately you need to respond to the desired elements being added and what type of load you are putting on the page by looking for the elements. For more information about watching for DOM changes see: Is there a JavaScript/jQuery DOM change listener?
UI comment
Currently you have a popup that has a single button: "Login". From a user interaction point of view, it would probably be better to just use a plain browser action button. If you are intending to add functionality to your popup, then go ahead and keep the popup. If you are not going to add functionality, it does not make a lot of sense to force your user to click twice (click: open popup, then click: login) when they could have just clicked once.
Use an actual Password Manager
If this is functionality that you desire, rather than just something you are putting together just to learn, you should use an actual Password Manager. The functionality of securely storing passwords and inserting them appropriately in websites is non-trivial. You can easily make mistakes that result in compromising your security. I strongly recommend that you investigate the various ones available and choose one which fits your needs. Basically, all the ones that I have seen would easily provide you with the functionality you have at this time: open a popup; select the site; go to the site and fill in the user name and password. A password manager is a very significant project. It is not a project to be taken on lightly, or for someone who is not experienced in security issues.

How do I open Javascript link in new tab [duplicate]

I'm trying to open a URL in a new tab, as opposed to a popup window.
I've seen related questions where the responses would look something like:
window.open(url,'_blank');
window.open(url);
But none of them worked for me, the browser still tried to open a popup window.

This is a trick,
function openInNewTab(url) {
window.open(url, '_blank').focus();
}
// Or just
window.open(url, '_blank').focus();
In most cases, this should happen directly in the onclick handler for the link to prevent pop-up blockers, and the default "new window" behavior. You could do it this way, or by adding an event listener to your DOM object.
<div onclick="openInNewTab('www.test.com');">Something To Click On</div>
Reference: Open a URL in a new tab using JavaScript

Nothing an author can do can choose to open in a new tab instead of a new window; it is a user preference. (Note that the default user preference in most browsers is for new tabs, so a trivial test on a browser where that preference hasn't been changed will not demonstrate this.)
CSS3 proposed target-new, but the specification was abandoned.
The reverse is not true; by specifying certain window features for the window in the third argument of window.open(), you can trigger a new window when the preference is for tabs.

window.open() will not open in a new tab if it is not happening on the actual click event. In the example given the URL is being opened on the actual click event. This will work provided the user has appropriate settings in the browser.
<a class="link">Link</a>
<script type="text/javascript">
$("a.link").on("click",function(){
window.open('www.yourdomain.com','_blank');
});
</script>
Similarly, if you are trying to do an Ajax call within the click function and want to open a window on success, ensure you are doing the Ajax call with the async : false option set.

This creates a virtual a element, gives it target="_blank", so it opens in a new tab, gives it the proper URL href and then clicks it.
function openInNewTab(href) {
Object.assign(document.createElement('a'), {
target: '_blank',
rel: 'noopener noreferrer',
href: href,
}).click();
}
And then you can use it like:
openInNewTab("https://google.com");
Important note:
This must be called during the so-called 'trusted event' callback—e.g., during the click event (not necessary in a callback function directly, but during a click action). Otherwise opening a new page will be blocked by the browser.
If you call it manually at some random moment (e.g., inside an interval or after server response), it might be blocked by the browser (which makes sense as it'd be a security risk and might lead to poor user experience).

If you use window.open(url, '_blank'), it will be blocked (popup blocker) on Chrome.
Try this:
//With JQuery
$('#myButton').click(function () {
var redirectWindow = window.open('http://google.com', '_blank');
redirectWindow.location;
});
With pure JavaScript,
document.querySelector('#myButton').onclick = function() {
var redirectWindow = window.open('http://google.com', '_blank');
redirectWindow.location;
};

To elaborate Steven Spielberg's answer, I did this in such a case:
$('a').click(function() {
$(this).attr('target', '_blank');
});
This way, just before the browser will follow the link I'm setting the target attribute, so it will make the link open in a new tab or window (depends on user's settings).
One line example in jQuery:
$('a').attr('target', '_blank').get(0).click();
// The `.get(0)` must be there to return the actual DOM element.
// Doing `.click()` on the jQuery object for it did not work.
This can also be accomplished just using native browser DOM APIs as well:
document.querySelector('a').setAttribute('target', '_blank');
document.querySelector('a').click();

I use the following and it works very well!
window.open(url, '_blank').focus();

I think that you can't control this. If the user had setup their browser to open links in a new window, you can't force this to open links in a new tab.
JavaScript open in a new window, not tab

An interesting fact is that the new tab can not be opened if the action is not invoked by the user (clicking a button or something) or if it is asynchronous, for example, this will not open in new tab:
$.ajax({
url: "url",
type: "POST",
success: function() {
window.open('url', '_blank');
}
});
But this may open in a new tab, depending on browser settings:
$.ajax({
url: "url",
type: "POST",
async: false,
success: function() {
window.open('url', '_blank');
}
});

Whether to open the URL in a new tab or a new window, is actually controlled by the user's browser preferences. There is no way to override it in JavaScript.
window.open() behaves differently depending on how it is being used. If it is called as a direct result of a user action, let us say a button click, it should work fine and open a new tab (or window):
const button = document.querySelector('#openTab');
// add click event listener
button.addEventListener('click', () => {
// open a new tab
const tab = window.open('https://attacomsian.com', '_blank');
});
However, if you try to open a new tab from an AJAX request callback, the browser will block it as it was not a direct user action.
To bypass the popup blocker and open a new tab from a callback, here is a little hack:
const button = document.querySelector('#openTab');
// add click event listener
button.addEventListener('click', () => {
// open an empty window
const tab = window.open('about:blank');
// make an API call
fetch('/api/validate')
.then(res => res.json())
.then(json => {
// TODO: do something with JSON response
// update the actual URL
tab.location = 'https://attacomsian.com';
tab.focus();
})
.catch(err => {
// close the empty window
tab.close();
});
});

Just omitting the strWindowFeatures parameters will open a new tab, unless the browser setting overrides it (browser settings trumps JavaScript).
New window
var myWin = window.open(strUrl, strWindowName, [strWindowFeatures]);
New tab
var myWin = window.open(strUrl, strWindowName);
-- or --
var myWin = window.open(strUrl);

This has nothing to do with browser settings if you are trying to open a new tab from a custom function.
In this page, open a JavaScript console and type:
document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").click();
And it will try to open a popup regardless of your settings, because the 'click' comes from a custom action.
In order to behave like an actual 'mouse click' on a link, you need to follow spirinvladimir's advice and really create it:
document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").dispatchEvent((function(e){
e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
false, false, false, false, 0, null);
return e
}(document.createEvent('MouseEvents'))));
Here is a complete example (do not try it on jsFiddle or similar online editors, as it will not let you redirect to external pages from there):
<!DOCTYPE html>
<html>
<head>
<style>
#firing_div {
margin-top: 15px;
width: 250px;
border: 1px solid blue;
text-align: center;
}
</style>
</head>
<body>
<a id="my_link" href="http://www.google.com"> Go to Google </a>
<div id="firing_div"> Click me to trigger custom click </div>
</body>
<script>
function fire_custom_click() {
alert("firing click!");
document.getElementById("my_link").dispatchEvent((function(e){
e.initMouseEvent("click", true, true, window, /* type, canBubble, cancelable, view */
0, 0, 0, 0, 0, /* detail, screenX, screenY, clientX, clientY */
false, false, false, false, /* ctrlKey, altKey, shiftKey, metaKey */
0, null); /* button, relatedTarget */
return e
}(document.createEvent('MouseEvents'))));
}
document.getElementById("firing_div").onclick = fire_custom_click;
</script>
</html>

function openTab(url) {
const link = document.createElement('a');
link.href = url;
link.target = '_blank';
document.body.appendChild(link);
link.click();
link.remove();
}

(function(a) {
document.body.appendChild(a);
a.setAttribute('href', location.href);
a.dispatchEvent((function(e) {
e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, true, false, false, false, 0, null);
return e
}(document.createEvent('MouseEvents'))))
}(document.createElement('a')))

You can use a trick with form:
$(function () {
$('#btn').click(function () {
openNewTab("http://stackoverflow.com")
return false;
});
});
function openNewTab(link) {
var frm = $('<form method="get" action="' + link + '" target="_blank"></form>')
$("body").append(frm);
frm.submit().remove();
}
jsFiddle demo

Do not use target="_blank"
Always use a specific name for that window, in my case meaningfulName. In this case you save processor resources:
button.addEventListener('click', () => {
window.open('https://google.com', 'meaningfulName')
})
In this way, when you click, for example, 10 times on a button, the browser will always rerender it in one new tab, instead of opening it in 10 different tabs, which will consume much more resources.
You can read more about this on MDN.

jQuery
$('<a />',{'href': url, 'target': '_blank'}).get(0).click();
JavaScript
Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();

To open a new tab and stay on the same location, you can open the current page in the new tab, and redirect the old tab to the new URL.
let newUrl = 'http://example.com';
let currentUrl = window.location.href;
window.open(currentUrl , '_blank'); // Open window with the URL of the current page
location.href = newUrl; // Redirect the previous window to the new URL
You will be automatically moved by the browser to a new opened tab. It will look like your page is reloaded and you will stay on same page but on a new window:

Or you could just create a link element and click it...
var evLink = document.createElement('a');
evLink.href = 'http://' + strUrl;
evLink.target = '_blank';
document.body.appendChild(evLink);
evLink.click();
// Now delete it
evLink.parentNode.removeChild(evLink);
This shouldn't be blocked by any popup blockers... Hopefully.

There is an answer to this question and it is not no.
I found an easy workaround:
Step 1: Create an invisible link:
<a id="yourId" href="yourlink.html" target="_blank" style="display: none;"></a>
Step 2: Click on that link programmatically:
document.getElementById("yourId").click();
Here you go! It works a charm for me.

Here's an example of how we can put it inside an HTML tag
<button onClick="window.open('https://stackoverflow.com/','_blank')">Stackoverflow</button>

How about creating an <a> with _blank as target attribute value and the url as href, with style display:hidden with a a children element? Then add to the DOM and then trigger the click event on a children element.
UPDATE
That doesn't work. The browser prevents the default behaviour. It could be triggered programmatically, but it doesn't follow the default behaviour.
Check and see for yourself: http://jsfiddle.net/4S4ET/

This might be a hack, but in Firefox if you specify a third parameter, 'fullscreen=yes', it opens a fresh new window.
For example,
MyPDF
It seems to actually override the browser settings.

The window.open(url) will open the URL in a new browser tab. Below is the JavaScript alternative to it:
let a = document.createElement('a');
a.target = '_blank';
a.href = 'https://support.wwf.org.uk/';
a.click(); // We don't need to remove 'a' from the DOM, because we did not add it
Here is a working example (Stack Overflow snippets do not allow opening a new tab).

There are lots of answer copies suggesting using "_blank" as the target, however I found this didn't work. As Prakash notes, it is up to the browser. However, you can make certain suggestions to the browser, such as to whether the window should have a location bar.
If you suggest enough "tab-like things" you might get a tab, as per Nico's answer to this more specific question for chrome:
window.open('http://www.stackoverflow.com', '_blank', 'toolbar=yes, location=yes, status=yes, menubar=yes, scrollbars=yes');
Disclaimer: This is not a panacea. It is still up to the user and browser. Now at least you've specified one more preference for what you'd like your window to look like.

Opening a new tab from within a Firefox (Mozilla) extension goes like this:
gBrowser.selectedTab = gBrowser.addTab("http://example.com");

This way is similar to the previous solutions, but implemented differently:
.social_icon -> some class with CSS
<div class="social_icon" id="SOME_ID" data-url="SOME_URL"></div>
$('.social_icon').click(function(){
var url = $(this).attr('data-url');
var win = window.open(url, '_blank'); ///similar to above solution
win.focus();
});

This works for me. Just prevent the event, add the URL to an <a> tag, and then trigger the click event on that tag.
JavaScript
$('.myBtn').on('click', function(event) {
event.preventDefault();
$(this).attr('href', "http://someurl.com");
$(this).trigger('click');
});
HTML
Go

I'm going to agree somewhat with the person who wrote (paraphrased here): "For a link in an existing web page, the browser will always open the link in a new tab if the new page is part of the same web site as the existing web page." For me, at least, this "general rule" works in Chrome, Firefox, Opera, Internet Explorer, Safari, SeaMonkey, and Konqueror.
Anyway, there is a less complicated way to take advantage of what the other person presented. Assuming we are talking about your own web site ("thissite.com" below), where you want to control what the browser does, then, below, you want "specialpage.htm" to be empty, no HTML at all in it (it saves time sending data from the server!).
var wnd, URL; // Global variables
// Specifying "_blank" in window.open() is SUPPOSED to keep the new page from replacing the existing page
wnd = window.open("http://www.thissite.com/specialpage.htm", "_blank"); // Get reference to just-opened page
// If the "general rule" above is true, a new tab should have been opened.
URL = "http://www.someothersite.com/desiredpage.htm"; // Ultimate destination
setTimeout(gotoURL(), 200); // Wait 1/5 of a second; give browser time to create tab/window for empty page
function gotoURL()
{
wnd.open(URL, "_self"); // Replace the blank page, in the tab, with the desired page
wnd.focus(); // When browser not set to automatically show newly-opened page, this MAY work
}

Open a url in Windows Metro App via Javascript

Normally, when I use in my metro application, the url is opening in the default web browser. I don't want to do this with anchor, I want to do the same behavior via Javascript and as async. But I don't know how to open the url with default browser.
Here is my code:
var $aTag = $("<a/>").click(function (event) {
showYesNoDialog(
"Do you approve?",
"The link will be opened in another window. Do you approve?",
"Yes", // Text of yes button
"No", // Text of no button
function () { // Behavior of yes button
// I tried this but nothing happened.
window.location.href = _URL_; // Should open in chrome or default web browser
},
function () { // Behavior of no button
// do nothing
}
);
});
What I also tried is that:
$("<a href='" + _URL_ + "'></a>").click();
But this didn't work, too.

Finally, I found my answer while searching on google.
Open a URL in a new tab (and not a new window) using JavaScript
I used this code to open the url out the metro app and it worked in my situation:
window.open(_URL_, '_blank');
window.focus();

You cannot launch an actual application from within Metro, but what you can do is launch a file with associated program, and that should give you the functionality you need.
Check Sample
The sample covers files and URI's - http://msdn.microsoft.com/library/windows/apps/Hh701476

We Keep Coding

JavaScript is the programming language of the Web.