chrome app开发学习笔记1
2013-12-26 12:20
323 查看
昨天照着教程试着写第一个chrome app,下面记录和分享下一些小收获。(教程会在下面附注出来)
自学的时候,最让人不爽的是,照着教程一步一步来,结果却与教程差距甚大,还找不到原因。。。
一个简单的chrome app的demo的教程 我在重复它的过程时遇到两个问题。
首先就是manifest.json的问题,给出的代码是:
我们需要修改下,才能让我们的app正确的运行:
第二个,就是添加popup.html,同时也需要添加popup.js,popup.html代码如下:
popup.js代码如下:
结果如下:
chrome app 开发文档
自学的时候,最让人不爽的是,照着教程一步一步来,结果却与教程差距甚大,还找不到原因。。。
一个简单的chrome app的demo的教程 我在重复它的过程时遇到两个问题。
首先就是manifest.json的问题,给出的代码是:
{ "name": "My First Extension", "version": "1.0", "description": "The first extension that I made.", "browser_action": { "default_icon": "icon.png", "popup": "popup.html" }, "permissions": [ "http://api.flickr.com/" ] }
我们需要修改下,才能让我们的app正确的运行:
{ "name": "My First Extension", "version": "1.0", "manifest_version": 2,//必须添加 "description": "The first extension that I made.", "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html"//更改成default_popup }, "permissions": [ "http://api.flickr.com/" ] }
第二个,就是添加popup.html,同时也需要添加popup.js,popup.html代码如下:
<!doctype html> <html> <head> <title>Getting Started Extension's Popup</title> <style> body { min-width: 357px; overflow-x: hidden; } img { margin: 5px; border: 2px solid black; vertical-align: middle; width: 75px; height: 75px; } </style> <!-- - JavaScript and HTML must be in separate files: see our Content Security - Policy documentation[1] for details and explanation. - - [1]: http://developer.chrome.com/extensions/contentSecurityPolicy.html --> <script src="popup.js"></script> </head> <body> </body> </html>
popup.js代码如下:
// Copyright (c) 2012 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. /** * Global variable containing the query we'd like to pass to Flickr. In this * case, kittens! * * @type {string} */ var QUERY = 'kittens'; var kittenGenerator = { /** * Flickr URL that will give us lots and lots of whatever we're looking for. * * See http://www.flickr.com/services/api/flickr.photos.search.html for * details about the construction of this URL. * * @type {string} * @private */ searchOnFlickr_: 'https://secure.flickr.com/services/rest/?' + 'method=flickr.photos.search&' + 'api_key=90485e931f687a9b9c2a66bf58a3861a&' + 'text=' + encodeURIComponent(QUERY) + '&' + 'safe_search=1&' + 'content_type=1&' + 'sort=interestingness-desc&' + 'per_page=20', /** * Sends an XHR GET request to grab photos of lots and lots of kittens. The * XHR's 'onload' event is hooks up to the 'showPhotos_' method. * * @public */ requestKittens: function() { var req = new XMLHttpRequest(); req.open("GET", this.searchOnFlickr_, true); req.onload = this.showPhotos_.bind(this); req.send(null); }, /** * Handle the 'onload' event of our kitten XHR request, generated in * 'requestKittens', by generating 'img' elements, and stuffing them into * the document for display. * * @param {ProgressEvent} e The XHR ProgressEvent. * @private */ showPhotos_: function (e) { var kittens = e.target.responseXML.querySelectorAll('photo'); for (var i = 0; i < kittens.length; i++) { var img = document.createElement('img'); img.src = this.constructKittenURL_(kittens[i]); img.setAttribute('alt', kittens[i].getAttribute('title')); document.body.appendChild(img); } }, /** * Given a photo, construct a URL using the method outlined at * http://www.flickr.com/services/api/misc.urlKittenl * * @param {DOMElement} A kitten. * @return {string} The kitten's URL. * @private */ constructKittenURL_: function (photo) { return "http://farm" + photo.getAttribute("farm") + ".static.flickr.com/" + photo.getAttribute("server") + "/" + photo.getAttribute("id") + "_" + photo.getAttribute("secret") + "_s.jpg"; } }; // Run our kitten generation script as soon as the document's DOM is ready. document.addEventListener('DOMContentLoaded', function () { kittenGenerator.requestKittens(); });
结果如下:
chrome app 开发文档
相关文章推荐
- chrome app 学习笔记 (1) --开发简介
- PHP 开发 APP 接口 学习笔记与总结 - APP 接口实例 [6] 版本升级接口开发
- 2011斯坦福大学iOS应用开发教程学习笔记(第二课)My First iOS App
- IOS开发学习笔记(九)——iOS App开发阶段调试步骤
- PHP 开发 APP 接口 学习笔记与总结 - JSON 方式封装通信接口
- react---学习笔记:使用create-react-app快速构建开发环境并创建项目
- APPCAN学习笔记002---app高速开发AppCan.cn平台特色
- PHP 开发 APP 接口 学习笔记与总结 - APP 接口实例 [2] 首页 APP 接口开发方案 ① 读取数据库方式
- 2011斯坦福大学iOS应用开发教程学习笔记(第二课)My First iOS App
- hybird app开发学习笔记
- Chrome插件开发学习笔记(一)
- iOS APP开发概述----学习笔记001
- Swift开发iOS App学习笔记(一)---AppIcon & LaunchScreen
- Chrome扩展,应用开发学习笔记之2---恶搞百度一下
- iOS APP开发概述----学习笔记001
- PHP 开发 APP 接口 学习笔记与总结 - APP 接口实例 [3] 首页 APP 接口开发方案 ② 读取缓存方式
- Chrome扩展开发学习笔记之扩展基础
- Android开发学习笔记(六):最简单的办法实现APP欢迎界面
- App Widget -- MarsChen Android 开发教程学习笔记
- 2011斯坦福大学iOS应用开发教程学习笔记(第二课)My First iOS App