title: Simulate focus() while mouse is away
body: <p>I'm currently developing a chrome extension and in order to make it work I often need the script to focus input fields. I know this can be achieved by using something like</p>
  
  <pre><code>document.getElementById('field').focus();
  </code></pre>
  
  <p>and it perfectly work. However it needs you to mantain the tab active and focused, otherwise the focus() event won't trigger. To explain it better, just consider this code and run it on google's homepage:</p>
  
  <pre><code>document.getElementById('lst-ib').focus();
  </code></pre>
  
  <p>You'll see that, of course, the cursor goes in the search field. However, if you put a setTimeout, launch the script and then go away from the tab with google, you can see that the focus() event hasn't been fired because the tab wasn't active. So my question is: is it possible to fire a focus() event or even to simulate it while mouse isn't on the page you want to run the code in?
  I haven't found anything about this, so it might be a silly question and I apologise for it, but I can't really imagine if there's a way to achieve my goal. Thanks!</p>
  
  <hr>
  
  <p>I didn't put any specific code just because I wasn't looking for a precise answer but for a general one, that I hoped might be more useful to other people. To be precise, my extension would run on this HTML (I can't put here the exact page since it requires a login for internal people):</p>
  
  <pre><code>&lt;input type="number" min="1" max="1000000000000000" id="num" placeholder="Insert a number" aria-required="true"&gt;
  &lt;button id="submit"&gt;Go!&lt;/button&gt;
  </code></pre>
  
  <p>that takes in input a number and checks its properties, e.g. if it's prime. This is the code I'm using.
  Content script:</p>
  
  <pre><code>var x;//global
  chrome.runtime.sendMessage({ask: "number"}, function(response)    {
  x=response.number;
  });
  
  document.getElementById('num').value=x;//insert number
  document.getElementById('num').focus();//focus field
  document.getElementById('submit').click();//click submit button
  chrome.runtime.sendMessage({do : "increment"});//communicates with bgpage asking to increment x
  </code></pre>
  
  <p>where x is a variable from background script that increments by one at each iteration. 
  These are those parts in <strong>bgpage</strong>:</p>
  
  <pre><code>var x=0;
  chrome.runtime.onMessage.addListener(function(request, sender) {
  if (request.do == 'increment'){//this is the increment of x
  x+=1;}
  });
  chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)    {
  if (request.ask == 'number'){//and here it's sending the value of x
       sendResponse({number: x});
  }
  });
  </code></pre>
  
  <p>Finally, the only important thing in my <strong>manifest</strong> is that I have the following permissions:</p>
  
  <pre><code>"permissions": [
      "tabs",
      "activeTab"
      ],
  </code></pre>
  
  <p>If I set the value <strong>without</strong> focusing the field, it acts like I didn't enter anything in the field since I didn't click on it. Instead if I insert the value manually it goes without problems. So, with the focus() instruction it works, but if the tab becomes inactive it stops working, as if the field is empty. So what I wanted to know is how to make the focus() work without having the mouse on the page, since the extension should run for about 1-2 hours and it would be a pain in the neck to keep the tab active for all that time.</p>
  
  <p>Now I think the question should be clear enough, there's nothing more I can write about this specific problem, since the remaining part of the code is working and the code I posted should be enough to reproduce the behaviour.</p>