如何在Chrome应用中加入jQuery?

我需要在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(/([AZ])/, '-$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()方法文档

清单中定义的脚本仅适用于后台事件页面(您可能根本不需要jQuery)。

要在index.html使用jQuery,您应该在标记中引用它的本地副本。 小心按正确顺序包含它。


也就是说,您的代码存在问题。
你正在混合DOM元素和jQuery“元素”。

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

返回一个DOM元素。 您可以使用$(elem)将其转换为jQuery元素,或者以jQuery方式查询:

 var elem = $("#progressbar"); 

完成后,您将可以访问jQuery方法。

PS我把“元素”放在引号中,因为jQuery方法操纵“匹配元素集”。 在这种情况下,单个元素与id查询匹配。

您需要在html中添加下载库的路径。

index.html ,就在关闭正文标记之前:

  ...    ...