Chrome extension: Focus input field on main page

Question

I have one HTML page with input box and button. I want to have a chrome extension that can focus on the input element.

HTML page -

<html>
    <body>
        <input type="text" name="box" />
        <button type="button" onclick="clicked()">Click</button>
        <script>
            //document.getElementsByName("box")[0].focus(); <--- this works. But I don't want this.
        </script>
    </body>
</html>

My injected script -

chrome.runtime.onMessage.addListener(function(message, sender, response){
    if(message.action==="start"){
            document.getElementsByName("box")[0].focus(); //<---want this to work. Currently unable to :(
            console.log("started");
    }
});

I get the started log but my element is not focused.

Rest files (i.e. popup.html and popup.js) not shown because they are working fine and irrelevant to this.

I tried simulating mouse click event on the input element (from here) but that method also failed.

Any help regarding this is appreciated. Open to jquery based solutions.

Thanks.

Try `"run_at": "document_end"` in your manifest.json. See docs about [content-script](https://developer.chrome.com/extensions/content_scripts) for description. — Denis L, Dec 27 '17 at 18:25
Have you tried surrounding it with `setTimeout`, like `setTimeout(()=>{document.getElementsByName("box")[0].focus()}, 0);` ? — Iván Nokonoko, Dec 29 '17 at 10:36

score 0 · Answer 1 · answered Dec 29 '17 at 13:31

0

send message when HTML document is ready.

answered Dec 29 '17 at 13:31

Pankaj Rupapara

752
4
9

I am sending message when all things are ready and it is not working. – aquaman Jan 02 '18 at 03:40

Chrome extension: Focus input field on main page

1 Answers1