Chrome Extension: Element null when I execute script in new tab

Problem

I'm trying to create a very simple Chrome extension. It only has 2 files. I have full control of the site, mywebsite.com.

1. It will create a new tab to mywebsite.com
2. It will select an input element by id
3. It will change the value of the input element

Unfortunately, I get this error: Uncaught TypeError: Caot set property 'value' of null

No matter what I do, the element is always null.

I've tried the following:

1. Various ways to wait until the page is loaded
2. Enabled CORS for my chrome extension on mywebsite.com
3. All optional arguments for chrome.tabs.create, and chrome.tabs.executeScript

Files

manifest.json

{
  "manifest_version": 2,

  "name": "Extension Name",
  "description": "Extension Description",
  "version": "1.0",

  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },

  "browser_action": {},

  "permissions": [
    "tabs",
    "https://mywebsite.com/*"
  ]
}

background.js

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.create({url : 'https://mywebsite.com'}, function (tab) {
    var code = "document.getElementById('first_name').value = 'FirstName';";
    chrome.tabs.executeScript(tab.id, {code: code});
  });
});