Chrome扩展程序：当我在新标签中执行脚本时，元素为null

Question

问题

我正在尝试创建一个非常简单的Chrome扩展程序。它只有2个文件。我完全控制了网站https://123.123.123.123:3000。

1. 它会为https://123.123.123.123:3000/people/create
创建一个新标签
2. 它将按id
选择一个输入元素
3. 它将更改输入元素的值

不幸的是，我收到此错误：Uncaught TypeError: Cannot set property 'value' of null

无论我做什么，元素总是为空。

我尝试了以下内容：

1. 等待页面加载的各种方法
2. 在https://123.123.123.123:3000
上为我的Chrome扩展程序启用了CORS
3. chrome.tabs.create和chrome.tabs.executeScript
的所有可选参数

文件

的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://123.123.123.123:3000/*"
  ]
}

background.js

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

编辑＃1

我的网站使用MEAN堆栈。

创建-person.html

<section>
  <div class="page-header">
    <h1>{{vm.person._id ? 'Edit Person' : 'New Person'}}</h1>
  </div>
  <div class="col-md-12">
    <form name="vm.form.personForm" class="form-horizontal" ng-submit="vm.save(vm.form.personForm.$valid)" novalidate>
      <fieldset>
        <div class="form-group" show-errors>
          <label class="control-label" for="first_name">First Name</label>
          <input name="first_name" type="text" ng-model="vm.person.first_name" id="first_name" class="form-control" placeholder="First Name" required>
          <div ng-messages="vm.form.personForm.first_name.$error" role="alert">
            <p class="help-block error-text" ng-message="required">Person full name is required.</p>
          </div>
        </div>
        <div class="form-group">
          <button type="submit" class="btn btn-default">{{vm.person._id ? 'Update' : 'Create'}}</button>
        </div>
        <div ng-show="vm.error" class="text-danger">
          <strong ng-bind="vm.error"></strong>
        </div>
      </fieldset>
    </form>
  </div>
</section>