如何在Chrome應用中加入jQuery？

Question

我需要在Chrome應用中訪問一些jQuery方法，但我不確定如何包含API。 我是前端開發的新手，我基本上都在尋找某種.h #include與我通常用更多類C語言做的平行。

在我的manifest.json中，我嘗試添加一個下載版本的jQuery的路徑：

{
  "name": "my first app",
  "manifest_version": 2,
  "version": "0.0.1",
  "minimum_chrome_version": "36.0.1941.0",
  "app": {
    "background": {
      "scripts": [ "./assets/js/main.js",  "./assets/third-party/js/jquery-2.1.1.js"]
    }
  }
}

在我的main.js文件中：

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create(
    "index.html",
    {
      innerBounds: {width: 800, height: 510, minWidth: 800}
    });
});

在我的index.js中，我沒有任何width（）方法的可見性：

(function() {
  var ui = {
    update: null,
  };

  var initializeWindow = function() {
    console.log("Initializing window...");
    for (var k in ui) {
      var id = k.replace(/([A-Z])/, '-$1').toLowerCase();
      var element = document.getElementById(id);
      if (!element) {
        throw "Missing UI element: " + k;
      }
      ui[k] = element;
    }
    ui.update.addEventListener('click', onUpdateClicked);
    console.log("done initializing window");
  };

  var onUpdateClicked = function() {
    console.log("update button was clicked");
    updateProgressBar(0.25);
  };

  var updateProgressBar = function(percent) {
    var elem = document.getElementById("progressbar");
    console.log("Updating progress bar...");
    var progress_width = percent * elem.width() / 100;
    elem.find('div').animate({ width: progress_width }, 500).html(percent + "% ");
  };

  window.addEventListener('load', initializeWindow);
}());

jQuery width（）方法文檔

Answer 1

清單中定義的腳本僅適用於后台事件頁面（您可能根本不需要jQuery）。

要在index.html使用jQuery，您應該在<script>標記中引用它的本地副本。 小心按正確順序包含它。

---

也就是說，您的代碼存在問題。
你正在混合DOM元素和jQuery“元素”。

var elem = document.getElementById("progressbar");

返回一個DOM元素。 您可以使用$(elem)將其轉換為jQuery元素，或者以jQuery方式查詢：

var elem = $("#progressbar");

完成后，您將可以訪問jQuery方法。

PS我把“元素”放在引號中，因為jQuery方法操縱“匹配元素集”。 在這種情況下，單個元素與id查詢匹配。

Answer 2

您需要在html中添加下載庫的路徑。

在index.html ，就在關閉正文標記之前：

    ...
      <!-- JavaScript -->
      <script src="assets/third-party/js/jquery-2.1.1.js"></script>
    </body>
    ...