I got two htmls as follows.
index1.html
<html>
<body>
<button
onclick="
window.open(
'https://www.google.com',
'sample')">
click
</button>
</body>
</html>
index2.html
<html>
<body>
<button
onclick="
window.open(
'https://www.google.com',
'sample',
'height=200,width=150')">
click
</button>
</body>
</html>
button click on index1 page opens Google page next to the current tab in the same window while index2 opens it as a popup window.
I'm listening to chrome.tabs.onCreated events in the background.
background.js
chrome.tabs.onCreated.addListener(tab => console.log(tab.openerTabId));
// results
//index1 >>> 42
//index2 >>> undefined
Here I believe openerTabId should exist for popup windows as well. chrome.tabs.get() results for the popup tab also doesn't contain openerTabId. However, window.opener object is not null in the popup window.
From https://developers.chrome.com/extensions/tabs#type-Tab
The ID of the tab that opened this tab, if any. This property is only present if the opener tab still exists.
In my case, the opener tab exists. Sounds like a bug?
Note that this is not the exact solution but I found out that chrome.webNavigation.onCreatedNavigationTarget event passes sourceTabId property which is the openerTabId. However, this requires webNavigation permission.
Related
Using simple HTML code, no JavaScript, nothing fancy, I use this HREF
Click here
Clicking on the link in IE, FireFox, Edge does open a new tab for https://www.example.com on click. In Chrome (version 79), the click just redisplays the current page.
This happens on Chrome desktop and phone (Android). There are no add-ins to my installation of Chrome; no popup or ad blocking installed.
Why doesn't Chrome open a new tab when target="_blank" is used? Thanks.
Added
The issue seems to be with an HREF being inside a FORM element. The FORM element is as follows:
<form action='' method='post'>
An HREF with target="_blank" outside the FORM element works properly. Just not inside the FORM element.
But still puzzled as to why that would be the case...and for a workaround or solution.
Added more - plus code
There's a button inside the form, and the button contains an image, and the link in the button will not open up a new tab.
Simple form with the button
<form action='' method='post'>
<p>inside the form</p>
<p><button><img src="https://via.placeholder.com/150 " width="24" height="24" class='button_img' alt='delete' /> that's a button</button></p>
<p><button>that's a button </button></p>
</form>
So, with even further testing, the click to open a new tab won't work in Chrome when the HREF is wrapped around an button with an image inside a form. But works in FireFox and Edge.
Why?
There are four image/buttons inside the form. The fourth one is the HREF/blank. Items 1-2-3 are form submittals; values need to be passed to the form processing page. The 4th item doesn't need to be processed by the form, but it is inside the form so that all four items will be on the same line. If I place the 4th (HREF/blank) outside of the form, then the 4th item is wrapped around to the next line.
a
The <button> tag cannot be opened in a new tab the same way an <a> does.
You can use this instead:
<p>
<button onClick="window.open('https://www.bklnk.com/B004RVZRL0');">
<img src="https://via.placeholder.com/150 " width="24" height="24" class='button_img' alt='delete' />
that's a button
</button>
</p>
So I have an extremely simple popup for a chrome extension that has a single button in the html.
<!DOCTYPE html>
<html>
<head>
<title>Extension popup</title>
</head>
<body>
<button id="dashboard">Button<button>
</body>
</html>
So it is only supposed to show one button but a second empty button is also shown. Inspecting the popup shows that there is indeed another button.
I am mostly wondering whether anyone knows what is going on here?
So at the moment I have a super simple html file where if I click a button, a paragraph disappears. I've tried that and it works. Now I want to test it by running phantomjs as a browser with Selenium webdriver in a testing setup consisting of Mocha and Chai. I can test if the button is there with the correct text, and I can set the CSS of it. I can tell this works from using screenshots for when each test finishes. However, whenever I try to get the button to actually click, the paragraph still remains there in the screenshot.
This is the line I use:
driver.findElement(By.id('hide')).click()
But it doesn't seem to work.
Also when I try to check if the paragraph is there or not, I get a load of errors back.
assert.equal(element.getAttribute(), ":hidden", "Paragraph hidden when button clicked");
I'm pretty knew to this, so if anybody can show me how or point me to some documentation I would be grateful.
This is my HTML code
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
console.log("Hiding");
$("#hide").text("Done somethign")
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<h1>Simple Heading to Test</h1>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
and my complete test for hiding the paragraph at the moment
test.it('should hide paragraph', function(){
driver.get('http://localhost:3000/example.html');
driver.findElement(webdriver.By.xpath("/html/body/p")).click()
})
To test whether or not the paragraph is visible:
element = driver.find_element_by_id('Paragraph')
if element.is_displayed():
print "Paragraph found"
else:
print "Paragraph not found"
As for the button, can you post what the errors you are getting are? and can you post the html of the button?
Can I use a page action to directly open a new page? I have a link in my popup.html, but it would be better to have the page open when they click the icon so that they would only need one click instead of two.
<!doctype html>
<html>
<head>
<title>Popup</title>
<link href="popup.css" rel="stylesheet" type="text/css">
</head>
<body>
click here
</body>
</html>
Yes, a way to achieve this would be as follows:
chrome.pageAction.onClicked.addListener(function(tab){
chrome.tabs.create({url: "http://www.domain.com/details.html", "active":true});
});
See Chrome Page Action | onClicked
Note that you will need to declare the tabs permission in your manifest file:
"permissions": ["tabs",...],
I don't think there is any elegant way to handle both the situations on page action click:
Open popup
Open a new page
If you always want to open a new tab with some URL whenever page action is clicked, just remove the popup. And use the code just like #Flo has mentioned.
chrome.pageAction.onClicked.addListener(function(tab) {
chrome.tabs.create({url: "http://www.example.com", "active":true});
});
PS: To remove the popup, there are two options:
Remove the popup from manifest.json
Pragmatically like chrome.pageAction.setPopup('')
I have an extension which adds a bar at the top of a webpage. i have inserted the iframe in the content script using
document.body.insertBefore(iframe, document.body.firstChild);
The iframe has a button
<button id="mybutton">Click to help</button>
When the user clicks the button I want to redirect them to a new url in the same window. Is this possible?
The reason I want to do this is on certain websites I would like to change the url to include an additional parameter. I chose the iframe option as it more visible than an extension in the bar. Therefore if there is an alternative way to do this I would be happy to learn about it.
Your iframe.....
<html>
<head>
</head>
<script type="text/javascript">
function changeParent(e){
parent.location="http://google.com.au";
}
function onLoad(){
document.querySelector("#mybutton").onclick = changeParent;
}
</script>
<body onload="onLoad()">
<a id="mybutton">Change Parents URL</a>
</body>
</html>
Would be a good case for info bars if they ever come out of experimental....
http://code.google.com/chrome/extensions/experimental.infobars.html