How to access to the tab object from popup script - javascript

I'm new to javascript and I want to code a firefox web extension.
I have a browser action button with a popup. but I didn't define the popup in the manifest, i set it in javascript code, because the click event won't be fired when the popup is defined. So here is the important part of my background script:
browser.browserAction.onClicked.addListener((tab) => {
var tabUrl = tab.url;
browser.browserAction.setPopup({ popup: "/popup/popup.html" });
browser.browserAction.openPopup();
browser.browserAction.setPopup({ popup: "" });
});
In this event the tab object is passed, so I can use the url.
This file is in the /background_scripts folder.
The popup is in the /popup folder. It's a html file with 2 menuitems.
In the popup.js I have an event to get the click:
document.addEventListener("click", (e) => {
if(e.target.id == menuItem1)
{
...
//here i want to use the url of the current tab
});
How I can get the tab object or the url in my popup code?
The tabs.tab.getCurrent() method doesn't work as I understand according to this:
tabs.getCurrent() result is undefined?
and this
How do I include a JavaScript file in another JavaScript file?
doesn't work too.

Related

How to click item on a new website HTML and JS

I am trying to code an auto clicker that can open a new tab on the click of an HTML button and start clicking. When clicked, JS should open a new tab and begin clicking. However, it does not seem to work. I have figured out that the JS will not run on a new tab, but I can't figure out how to fix it. Code sample below:
function updateButton() {
window.open("https://clickthatbutton.com", '_blank');
document.getElementById("submit").click();
}
Documentation says window.open returns object representing created window. So you can store it in variable and access its document:
function updateButton() {
const w = window.open("https://clickthatbutton.com", '_blank');
w.document.getElementById("submit").click();
}

How launch JavaScript function in every new opened tab or window of the same HTML page?

I have html page SomePage with onload event:
<body onload="someEvent()">
I attached to the SomePage js file with someEvent function:
function someEvent()
{
someFunction();
}
When I open SomePage, the someEvent function is launching in first tab. But it not launch when I open SomePage in new tab. How relaunch js function in every new opened tab or window of the same page?
Update:
When I run somePage in Visual Studio witn JavaScript debugging mode and put breakpoint in someEvent function, Debugger breaking it only in first opened tab, when I open second tab, Debugger do not break the point. Therefore, I decided, that my function not refreshed in second tab. After your answers I realized that it's not JavaScript problem and my previous example work correct only without breaking point in new opened tab. Thank you for your help.
It should work in every tab as long as long as you are loading the same page.
You can test by making an alert call in the onLoad callback function.
<body onload="someEvent()">
<script>
function someEvent()
{
alert('hi');
}
</script>
We may need more info on this. If you are just going to SomePage on a separate tab then anything that happened in the first tab should happen in the second. If that isn't what you are doing then the next tab is being opened by the first and that is where we need more info.
If I need to do something on load I usually set the following up in my javascript file and link it to my html page through a <script src="/path/to/file">
window.addEventListener("load", () => {
runFunctionAfterLoaf();
});
Try using
window.onload = function() {
someFunction();
};

PhantomJS: open (via simulated user click) a popup and get source code of new window

I'm using PhantomJS to retrieve the source code of a website after some AJAX manipulations of the DOM. Then using jQuery, I'm simulating a click on a button element (which has it's link hidden in an obscure JavaScript script). This button's onClick effect is to open a new window.
What I'd like to do is retrieve the source code of this new window.
What I cannot do is use the window.open("url") method in JS because I cannot retrieve the url of the new window since it's obfuscated in a script.
Some workaround I've been looking at but haven't succeeded to implement:
Return the new window in any way with the click() function.
Switch the focus to the new window in JS.
Retrieve the url of the button's onClick whitout having to parse the JS script.
Here's what I've got at the moment:
var page = require("webpage").create();
page.open("http://www.example.com", function() {
page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function() {
var page = page.evaluate(function() {
$("#myButton").click(function() {
// ???
});
});
phantom.exit();
});
});
I'm open to other frameworks/technologies if there is a solution!

Pass variables to current tab via chrome extension

I am writing my first chrome extension, and I want to pass a variable to the currently opened tab and manipulate the DOM with it.
My extension has a button, and when clicked, is executing this code:
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.executeScript(tab.id, {
file: 'tabscript.js'
});
});
This works fine, but I see no way to pass a variable to tabscript.js so it can be used on the opened tab.
What do you need to pass a variable in to? Do you have a function you are calling in your script?
It must be noted that you don't have access to the pages Javascript, just the DOM.
If you have a particular function that you have to call with specific parameters then you should investigate content scripts and message passing.
Content scripts can get run on every page load (or a selection of pages), and you would use message passing to send a message from your extension button to the function in the content script.
Alternativly, and closer to your original idea you can construct the function you want to call at run time using the following:
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.executeScript(tab.id, {
code: 'function(){ ...... your code built dynamically ......}'
});
});

How do I use jQuery/JavaScript to open a Popup Window/Tab (ASPX Login Page) & then pass values to opened window/tab on DOM Ready Event of it?

We currently have two asp.net 2.x web applications and we need to perform the following functionality:
From one application, we want to auto-login to the other web application automatically in a new tab; using the same browser instance/window.
So the process is:
Open New Window/Tab With Second System URL/Login Page
Wait For Popup Window/Tab Page To Load (DOM Ready?)
OnPopupDomReady
{
Get Usename, Password, PIN Controls (jQuery Selectors) and Populate In Code Then Click Login Button (All Programmatically).
}
I am currently using JavaScript to Open the window as follows:
<script type="text/javascript">
$(document).ready(function () {
$('a[rel="external"]').click(function ()
{
window.open($(this).attr('href'));
return false;
});
});
</script>
I would like to use jQuery chaining functionality if possible to extent the method above so that I can attach a DOM Ready event to the popped up page and then use that event to call a method on the code behind of the popped up page to automatically login. Something similar to this (Note: The following code sample does not work, it is here to try and help illustrate what we are trying to achieve)...
<script type="text/javascript">
$(document).ready(function () {
$('a[rel="external"]').click(function () {
window.open($(this).attr('href').ready(function ()
{
// Use JavaScript (Pref. jQuery Partial Control Name Selectors) To Populate Username/Password TextBoxes & Click Login Button.
})
});
});
</script>
Our architecture is as follows:
We have the source for both products (ASP.NET WebSite[s]) and they are run under different app. pools in IIS.
When you open a window with window.open, the new window gets a property called window.opener which references the parent window. So code in your child window can call functions in the parent window, for instance:
In Window A:
// Declared at global scope => ends up as property on `window`
function phoneHome(str) {
alert(str);
}
In Window B (the child window):
$.ready(function() {
if (window.opener && window.opener.phoneHome) {
window.opener.phoneHome("Hi, Ma!");
}
});
(Using $.ready in the child window requires that the child window have jQuery loaded.)
In the above all I've done is have the child window trigger a function in the parent window with a message, but of course the function call can carry any data you want it to.

Categories