Chrome扩展:选项页面上的jQuery回调在DOM加载之前运行

时间:2015-12-17 04:08:30

标签: jquery google-chrome-extension

我开发了第一个Chrome扩展程序,可以动态生成模拟数据并将其插入表单元素中。我正在为它开发一个选项页面。我有一个回调来填充选项页面上的表单元素。当我重新加载扩展时回调运行,并且DOM中没有任何内容供jQuery查询。发生了什么,以及如何修改我的代码,以便在呈现选项DOM后它将运行选项回调?

的manifest.json

MPMusicPlayerController *player = [MPMusicPlayerController systemMusicPlayer];

options.html

{
"manifest_version": 2,

"name": "Dummy Data",
"author": "Jay Bienvenu",
"description": "Insert dummy data into form elements with a few clicks.",
"version": "3.8",

"permissions": ["activeTab","contextMenus","downloads"],
"background": {
  "scripts": [
    "lib/jquery-1.11.3.min.js","lib/bootstrap/js/bootstrap.min.js",
    "moment.js","q.js",
    "data.js",
    "english.js","german.js","greek.js","japanese.js","spanish.js",
    "core.js","script.js","options.js"
  ]
},
"options_page": "options.html"
}

options.js

<html>

<head>
<title>Dummy Data: Options</title>
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="lib/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<script type="text/javascript" src="lib/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="lib/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="core.js"></script>
<script type="text/javascript" src="options.js"></script>
</head>

<body>

<h1>Options for Dummy Data</h1>

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <form class="form-horizontal">
        <div class="form-group">
          <label for="language">Language</label>
          <select class="form-control" id="languages"></select>
        </div>
      </form>
    </div>
  </div>
</div>

</body>

</html>

0 个答案:

没有答案