Can't set focus to input in chrome extension

Question

For some reason I can't set focus on a texbox I have in my popup.html. Here's what I've tried so far:

popup.html:

<input type="text" id="textbox" name="aName" value="" placeholder="blah" />

popup.js:

//Attempt 1
$(function() {      
    $('#textbox').focus();
});

//Attempt 2
setTimeout(function() { $('#textbox').focus(); }, 1000);

I also tried without javascript, using just the autofocus property:

<input type="text" id="textbox" name="aName" value="" placeholder="blah" autofocus />

But none of this worked... Any ideas?

Notes:

popup.js is being called, if I put console.log() I get the output
The popup is fired by an icon we have next to the omnibar (default_icon)

score 4 · Answer 1 · answered Jul 05 '12 at 16:07

4

This code works with me, try it, it's a workaround

<!DOCTYPE >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Sample Extens</title>
</head>
<body style="padding: 0px; margin: 0px;" >
    <script type="text/javascript" language="javascript">
        if (location.search !== "?foo") {
            location.search = "?foo";
            throw new Error;  // load everything on the next page;
            // stop execution on this page
        }
    </script>

    <div id="Def">
        <input type="text" id="textbox" name="aName" value="" placeholder="blah" />
        <script type="text/javascript" language="javascript">
            document.getElementById("textbox").focus();
        </script>
    </div>
</body>
</html>

enter image description here

answered Jul 05 '12 at 16:07

Tarek El-Mallah

4,015
1
31
46

If I put js code in the html I get this error message: "Refused to execute inline script because of Content-Security-Policy". If I put it in popup.js it doesn't work... Are you setting any special permission in the manifest? – epzee Jul 05 '12 at 17:26
1

This is my Manifest { "name": "test", "version": "1.1", "description": "testttt", "browser_action": { "default_title": "testttt testttt", "default_icon": "128.ico", "popup": "testttt.html" }, "icons": { "16": "16.ico", "48": "48.ico", "128": "128.ico" }, "permissions": [ "http://*.testttt.com/*" ] } – Tarek El-Mallah Jul 05 '12 at 17:57
2

If your manifest is version 2 you can't execute script within your html. It has to be sourced in from another file. Tarek's example is manifest version 1.1 – jcbwlkr Jul 09 '12 at 15:41

jcbwlkr · Answer 2 · 2012-07-09T15:51:04.897

4

I had this same problem. I believe I was able to get it to work by setting an explicit tabindex on the input like tabindex=1

Please give that a try and let me know if it works.

Update

I have a very simple example that works for me. I am using Chrome 19 on Linux.

manifest.js

{
"name": "Auto 'focus'",
    "version": "1.0",
    "manifest_version": 2,
    "description": "An extension to test setting focus",
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    }
}

popup.html

<!doctype html>
<html>
  <head>
  </head>
  <body>
    <a href="#">Link</a>
    <input type="text" id="foo" tabindex="1" />
  </body>
</html>

Without the tabindex="1" the focus is initially on the Link. With tabindex="1" the focus is on the input element

edited Jul 09 '12 at 15:51

answered Jul 05 '12 at 21:39

jcbwlkr

7,789
2
22
28

Hmmm I know I had this problem and fixed it somehow. I will look when I get back to work Monday. – jcbwlkr Jul 07 '12 at 02:27
I updated my answer with a simple example of what worked for me. I don't know why it wouldn't work in your extension. Thanks. – jcbwlkr Jul 09 '12 at 15:51
Thanks but it still doesn't work. I've tried with chrome 20 in win 7 – epzee Jul 09 '12 at 18:04

score 3 · Accepted Answer · answered Jul 09 '12 at 18:10

3

Finally what I've used is this:

popup.html:

<input type="text" id="textbox" name="aName" value="" placeholder="blah" autofocus />

popup.js:

$(function() {              
    if (location.search != "?focusHack") location.search = "?focusHack";
});

Thanks Tarek El-Mallah and PAEz!!!

answered Jul 09 '12 at 18:10

epzee

568
8
22

2

Ahh, nice one... That's was 1 hour i wont get back... :-\ – drphrozen Aug 03 '12 at 21:05

score 1 · Answer 4 · answered Jul 09 '12 at 13:22

Tarek El-Mallah's method of reloading the pop-up does work, it just didnt work for you as your using manifest_version : 2 and inline scripts arent allowed...
http://code.google.com/chrome/extensions/manifestVersion.html
Also, this is a known issue....
http://code.google.com/p/chromium/issues/detail?id=111660
Following is a version that works for manifest_version : 2.....

manifest.json

{
  "name": "Browser Action PopUp focus/tab test",
  "version": "1.0",
  "description": "A test to show that on opening a popup you cant set focus and the tab index is not honored on the first select.  See, http://stackoverflow.com/questions/9070727/tab-key-not-working-in-popup-in-chrome-extension.",
  "browser_action": {
      "default_title": "Browser Action PopUp focus/tab test.",
      "default_icon": "icon.png",
      "default_popup": "popup.html"
  },
  "manifest_version" :2
}

popup.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="popup.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Sample Extens</title>
</head>
<body style="padding: 0px; margin: 0px;" >
    <div id="Def">
        <input type="text" id="textbox" name="aName" value="" placeholder="blah" />
    </div>
</body>
</html>

popup.js

if (location.search !== "?foo") {
    location.search = "?foo";
    throw new Error; // load everything on the next page;
    // stop execution on this page
}

function onLoad() {
    document.getElementById("textbox").focus();
}

window.onload = onLoad;

score 0 · Answer 5 · answered Jul 05 '12 at 15:07

0

Try this:

 autofocus="autofocus"

You can also try this instead:

setTimeout(
    function() { 
        if(location.search !== "?aName") {
           location.search = "?aName";
           throw new Error; 
        }
    }, 1000);

answered Jul 05 '12 at 15:07

Alex Kelly

1,593
3
14
19

Can't set focus to input in chrome extension

5 Answers5

Linked