I'm writing a basic start page chrome extension which features a search bar that should autofocus on page load. Now normally I would simply use the "autofocus" attribute on the input element in my HTML page. However, as Chrome extensions do not allow this or inline javascript in HTML pages of extensions, I've been forced to move my code outside to an external javascript file.
So my HTML looks something like this:
<form id="slot2form" method="get" action="http://www.google.com/search" target="_blank" onsubmit="closetab()">
<input id="slot2input" name="q" type="text" class="search" placeholder="temporary"></input>
</form>
Now closetab() (not important) and autofocus will work when the page is loaded on its own. However, these inline javascripts will not work when the page is loaded as a chrome extension. So, I've attached a javascript file called "listeners.js" which listens for events like pageload. Below is the code:
document.addEventListener("DOMContentLoaded", function(event) {
$('#slot3').gCalFlow({
calid: calConfig.calid,
maxitem: 3
});
$('#slot2input').focus();
});
document.addEventListener("submit", function closetab() {
setTimeout(function() {
close();
}, 1);
});
closetab() and the .gCalFlow sections work perfectly fine. However, I cannot for the life of me make the slot2input element obtain focus on the page load if the page is loaded as a chrome extension.
Are there any other ways I can obtain focus on this element, or am I simply missing something obvious?
Edit: I've tried eliminating other javascripts from the equation, and leaving just listeners.js in my testing. However, I still receive the same issue: no focus on DOMContentLoaded. I'm just about at a dead end here. Would my version of chrome or operating system matter at all?
