We Keep Coding

Bookmarklet to open a webpage and login

I am trying to create a bookmarklet to open a web page, populate credentials, and click login in one shot. Here is the needed bookmarklets:
For opening a webpage:
javascript:location.href='http://www.unt.edu'
For Credentials & login:
javascript:(function(){var d=document;s=d.querySelector;s.call(d,'input[name*=email]').value='YOUREMAIL#company.com'; s.call(d,'input[name*=pass]').value='SECRETPASSWORDHERE';s.call(d,'button[id*=login],input[type=button][id*=login],.btn-login').click(); }())
Is it possible to combine both of them considering the asynchronous behavior of opening the web page?

You can combine this in one bookmarklet, but you'll have to click it twice. The first click will open a website, and the next one will do the login.
javascript: (() => {
const url = 'https://stackoverflow.com/users/login';
if (location.href !== url) return (location.href = url);
document.querySelector('input#email').value = 'EMAIL';
document.querySelector('input#password').value = 'PASSWORD';
document.querySelector('button#submit-button').click();
})();

Consider using a userscript instead, which will run automatically on pageload. Set the userscript's #includes to run on http://www.unt.edu, then set the userscript's JS to the content of your current bookmarklet:
var d=document;s=d.querySelector;s.call(d,'input[name*=email]').value='YOUREMAIL#company.com'; s.call(d,'input[name*=pass]').value='SECRETPASSWORDHERE';s.call(d,'button[id*=login],input[type=button][id*=login],.btn-login').click(); }()
(though I'd recommend separating it out onto separate lines for readability and maintainability)
And then use a plain bookmark (not a bookmarklet) to http://www.unt.edu. This way, whenever you click on the bookmark, the page will load, and when the page loads, the userscript that logs you in will automatically run.

How do I make a JS script continue to run after navigation (google chrome console)

Say I have a simple script
var i = 0;
test();
function test() {
console.log(i++);
setTimeout(test, 1000);
}
I put it in a Google Chrome console. How do I make it continue to run after the page navigates to another (should continue to print out numbers when browsing the web)?
Maybe save the variable 'i' in onbeforeunload() function, and launch a new script with that saved variable?

How do I make it continue to run after the page navigates to another
you can't, the script cannot continue on another page, it's the browser that runs the javascript in the page, and that will stop it when moving to another page.
(or) should continue to print out numbers when browsing the web?
you have yourself answered this. You can certainly save the counter in localstorage and resume counting on the next page, provided this next page contains the same or similar script and the logic to restore the counter from localStorage.
Or, you can move part of this logic to a server-side script.

I suppose this script is an example and displaying numbers is not really what you want to do.
If you are looking for something to run script even when you have left the browser, I suggest you take a look at Service workers.
If you want more resources, you can check Jake Archibald's blog. He is a chrome developer and he is always talking about service workers. An introduction here.

I didn't see any good suggestions posted already for what I was trying to do but I came up with something that worked for me. I wanted to add a navigation element on the page and not have it go away after navigating. This was on a website that was not managed by me. I removed the innerHtml of the body of the page, added an iframe and pointed it at the page I was on, set it to 100% width and height and removed the border. Then I could navigate within the iframe, but still have my script function run in a set timeout to add the navigation element back to the page after it navigated. Something like this:
document.body.innerHTML = ''
iframe = document.createElement('iframe');
iframe.setAttribute('id', 'iframe');
document.body.appendChild(iframe);
iframe.setAttribute('src', window.location.href);
iframe.style.height = "100%";
iframe.style.width = "100%";
iframe.style.border = "0";
function addContent(){
setTimeout(()=>{
elementToAddTo = iframe.contentWindow.document.getElementById('my-element-id')];
contentToAdd = document.createElement('div');
contentToAdd.innerHTML = `<p>My new content</p>`
elementToAddTo.insertBefore(contentToAdd, elementToAddTo.childNodes[0]);
}, 1000);
}
addContent()
Then in that new content somewhere I had an onchange event which would navigate and call the addContent function by saying window.top.addContent();
onchange="window.location.href = window.location.href.replace(/(param1=.*)/, 'param1='+myNewParamValue); window.top.addContent();">
I Understand this approach makes a lot of assumptions about what you're trying to do and maybe it is only working for me because I'm only changing a param value, but I want to leave this hear in case it helps somebody trying to figure out how to do something similar.

How to test a script in multiple sites just by using chrome dev-tools?

First of all I'm not quite sure this is the place for this kind of question, if not please tell me and I'll remove it.
I'm developing a script that modifies the DOM a bit and I'd like to test it in real sites to see if it behaves correctly and to detect issues.
I was wondering how simulate that the script is at that page and if it would be possible by using chrome dev-tools.
At first I tried adding the script to the but the script doesn't execute.
I tried writing this on the console but didn't work:
var script1 = document.createElement("script");
var script2 = document.createElement("script");
var head = document.querySelector("head");
var text = 'myscript();';
script2[(script2.innerText===undefined?"textContent":"innerText")] = text;
script1.setAttribute("src", "http://mysite.myscript.js");
head.appendChild(script1);
script1.onload = function(){ head.appendChild(script2) };
EDIT: Actually that script worked but in the inside I was listening to a DOMcontentLoad event, so of course when I executed that from the console, the dom was already loaded.

This can be done using the DevTools. To make it easy to do in many places, you should take advantage of a feature called Snippets.
This is the code I used to test in my snippet. I changed the "mysite" URL to pull a copy of Material Design Lite's JS and set the text to log the componentHandler object. Other than these changes, it is your code:
var script1 = document.createElement("script");
var script2 = document.createElement("script");
var head = document.querySelector("head");
var text = 'console.log(componentHandler);';
script2[(script2.innerText===undefined?"textContent":"innerText")] = text;
script1.setAttribute("src", "https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js");
head.appendChild(script1);
script1.onload = function(){ head.appendChild(script2) };
With this you need to do the following steps:
Open the sources panel
Go to the "Snippets" resources tab in the left hand panel (green arrow.)
Right click in the resource views (blue) and select "New Snippet"
Name the snippet, in my case I used "test" for the name. Just make sure you understand what it is.
Fill in content editor with script.
Once content is saved, right click on the script in the resources listing. Then select "Run Snippet"
Check console (Red outline, for drawer or you may go to the console panel itself) to see output.
To verify further that this is working, you can go check the Elements Panel.

closing browser within chrome page on test complete

So using TestComplete I'm essentially trying to open up a session on chrome, navigate to a web page, and then click a button on that page. after I'm finished I want to close that browser page. I'm having trouble closing the page though. Here is the code I have so far.
function ChromeTest
{
Browsers.Item(btChrome).Run(MyWebAdress);
var browser = Sys.Browser("chrome");
var page = Sys.Browser("chrome").Page(MyWebAdress);
var MyButton = page.ButtonLocation;
MyButton.click();
browser.BrowserWindow.Close(5000);
}
however, at the Close line I get an error that says "Unable to find the object BrowserWindow". Thanks in advance for any help you have.

Change BrowserWindow to BrowserWindow(0) (or whatever index you see in the Object Browser):
browser.BrowserWindow(0).Close(5000);
Or you can call Close() directly on the Chrome process:
browser.Close(5000);

Telling when an iframe is on a new URL

I am using JavaScript to make a small iframe application, and I cannot seem to figure out a way to update the URL in my URL bar I made when someone clicks a link inside the iframe.
It needs to be instantaneous, and preferably without checking every millisecond whether or not the value of document.getElementById('idofiframe').src has changed.
I can't seem to find a simple property to tell when the url has changed, so if there is not one, then solving this programmatically will work as well.
Thanks for the help!

This will be difficult to do because it is considered xss and most browsers block that.
There are most likely some workarounds involving AJAX.

First of all, what you want to do will be possible only if the source of your iframe points to the same domain as the parent window. So if you have a page page.html that iframes another page iframed.html, then both of them have to reside on the same domain (e.g. www.example.com/page.html and www.example.com/iframed.html)
If that is the case, you can do the following in the iframed.html page:
<script type="text/javascript">
window.onload = function() {
var links = document.getElementsByTagName('a');
for (var i=0, link; link = links[i]; i++) {
link.onclick = function() {
window.parent.location.href = '#' + encodeURIComponent(this.href);
}
}
}
</script>
This will make it so that whenever you click on a link in iframed.html, the url bar will put the url of the link in the "hash tag" of the url (e.g. www.example.com/page.html#http%3A%2F%2Fwww.example.com%2FanotherPage.html)
Obviously, you would have to have a script like this on every page that is to appear inside the iframe.
Once this is in place, then you can put this snippet inside of page.html, and it will make the iframe automatically load the url in the hash tag:
window.onload = function() {
var url = window.location.hash.substr(1);
if (url) {
document.getElementById('iframe').src = url;
}
}
I unfortunately haven't run this code to test it, but it is pretty straight forward and should explain the idea. Let me know how it goes!

You could add an onload event to the iframe and then monitor that - it'll get thrown whenever the frame finishes loading (though, of course, it could be the same URL again...)

Instead, can you add code to the frame's contents to have it raise an event to the container frame?
In IE, the "OnReadyStateChanged" event might give you what you want.