We Keep Coding

Insert iframe at chrome.tabs.onActivated

I want to insert an iframe when chrome.tabs.onActivated gets triggered when going to already opened tabs.
I'm developing an extension that does the chrome.scripting.executeScript on all tabs in the browser at initialization.
I'm registering message listeners on the content script and the background.
From the popup extension, I'm clicking a button that tells the content script to insert an iframe.
On the current page it works. If I open a new page it works. But when I'm going to an existent tab, nothing happens in the content scripts.
In the background the console logs are showing I'm on the correct tab. Only if I refresh the existent open tab, the iframe is inserted.
I've tried injecting the scripts again at onActivated, but nothing happens.
What is the correct way of doing this?
Later edit:
It seems that I had a faulty condition in my chrome.scripting.executeScript and the scripts were never programatically inserted. They were inserted from the manifest.json
I don't need to insert the scripts again on onActivated, as they are inserted by executeScript.

How to prevent redirect with autoclick in javascript?

I have this issue where if I click do a manual click of a button using my mouse, the browser will load the next page with an iframe with the appropriate URL. However if I use an autoclick (like .click()) then it will load the next page then continue to redirect and load the iframe URL in the top frame.
I noticed that the manual click actually has chrome blocking the redirect while the autoclick does not have chrome blocking the redirect. How does chrome know if I clicked with my mouse vs using .click()? And is there a way to imitate the manual mouse click? Or to prevent the redirect using javascript? I was thinking trying to wait until the next page loads then doing preventDefault() or something like that.
Also worth noting that I don't own the website code. I'm working on a program that overlays on top of the site I'm on so I kind of have to work around changing html.
Edit: adding code for visual. first chunk is the website code im working with.
<a target="_self" href="iframeUrl">
<img border="0" src="/imageURL">
</a>
Using $0.click() is what I'm doing but it keeps redirecting when I get to the next page.

Page Monitor Bookmarklet That Clears Cookies or Cache After Each Reload

Okay I changed the plan. How would I create a bookmarklet that refreshes a link and clears cache until a page change is detected?
Edit: this might help (from JavaScript Bookmarklet; click button, reload page, then open page):
If a page reloads, any code currently running on that page, including code from a bookmarklet, is ended and removed. Traditionally bookmarklet code ceases to work after a page load and user clicks it again.
There are three workarounds that I know of.
A.) Change the process that loads the page to instead use AJAX.
B.) Change the process that loads the page to instead open a new window, and then use JavaScript to manipulate the new window.
C.) Before triggering the page load, open a new child window and insert code into it. The code in that child window can then monitor its parent and take actions on the parent even after the parent has reloaded.
Edit 2: this refreshes the page, so now I just need to clear cache on each refresh and stop when a page change is detected (overall function is like a page monitor but clears cache after each refresh).
---or----
javascript:
timeout=prompt("Set timeout [s]");
current=location.href;
if(timeout>0)
setTimeout('reload()',1000*timeout);
else
location.replace(current);
function reload(){
setTimeout('reload()',1000*timeout);
fr4me='<frameset cols=\'*\'>\n<frame src=\''+current+'\'/>';
fr4me+='</frameset>';
with(document){write(fr4me);void(close())};
}
Edit 3: found this for clearing cookies (which should be sufficient):
Edit 4: this checks for page changes:
Now how do I put this together?

Capture click event before page load and trigger after DOM ready

I am working on an E-commerce site where on product listing page when the user clicks on Add Cart button
product will be added to cart and we are showing an popup box saying the product added... We are using Plugin for showing popup box and data for popup is coming from ajax and java controller. It is working fine well when the entire page loaded successfully. If the user clicks on Add Cart while the page load its showing plain ajax result instead of Popup because the Plugin using for Popup is not available during page load. We tried disabling the Add Cart button till page load but client is not happy with this approach.
Code:
<--!form for add to cart-->
<form submit="addcart()">
<input type="button">Add Cart</button>
</form>
//JS for show popup and save form data
saveform:function{
}
displayPopup:function{
}
productadd:function{
saveform();
displayPopup();
}
$(document).ready(function(){
productadd();
}
Is there any workaround to capture the click event during page load and trigger the click event automatically for particular button if user already clicked on. Please suggest me any other solution to show popup properly.
Thanks In Advance:)

Your option is not to use inline JS, which is not recommended nowadays anyway. In this case, you risk calling the addcart() function when the JS file has not been downloaded and parsed.
The solution is to use JS to bind the click event to the submit form upon DOM ready, so that the click event will only be meaningful once JS is loaded. For your HTML, remove the inline JS:
<form>
<input type="button">Add Cart</button>
</form>
Instead, listen to the submit event using JS:
$(document).ready(function(){
productadd();
$('form').submit(function() {
addcart();
});
});
Also, you might want to look at the reason why your site is loading so slowly (or at least the JS). Are you serving it as a gzipped file? Is there anyway to minimize it (only the production version)?

JavaScript Bookmarklet; click button, reload page, then open page

I am trying to create a bookmarklet that follows this process:
From any page, click the bookmarklet
load a specific page.
Trigger an input button which causes page to reload
Once reloaded; open a new page; in this case a social media page.
This is what I've written so far:
if (!($ = window.jQuery)) {
// Inject jQuery to make life easier
script = document.createElement( 'script' );
script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';
script.onload=SocialCredentials;
document.body.appendChild(script);
}
else {
SocialCredentials();
}
function SocialCredentials(){
$('input:submit').trigger('click');
window.open('http://www.facebook.com', '_blank');
}
The button submit click causes the page to process and clear the credentials of the user so they can visit social sites.
The above code works, but I want to make sure the page finishes loading before opening a new social media page.
Do I need to add some kind of wait() function? If I do add a wait method, will it kill the JavaScript and not open the new window? I'm fairly new to JavaScript, so I'm not familiar with these types of mechanics.
Edit:I should note that I don't have access or control to the page this bookmarklet will work on so I can't alter it's flow. What I'm trying to do is more of a favor for another department as a quick fix until they can make changes on their end.
Edit2: Updated the process.

If a page reloads, any code currently running on that page, including code from a bookmarklet, is ended and removed. Traditionally bookmarklet code ceases to work after a page load and user clicks it again.
There are three workarounds that I know of.
A.) Change the process that loads the page to instead use AJAX.
B.) Change the process that loads the page to instead open a new window, and then use JavaScript to manipulate the new window.
C.) Before triggering the page load, open a new child window and insert code into it. The code in that child window can then monitor its parent and take actions on the parent even after the parent has reloaded.