chrome app开发学习笔记1

最新推荐文章于 2025-01-09 10:04:58 发布

原创最新推荐文章于 2025-01-09 10:04:58 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#chrome #app #chromium

web app 专栏收录该内容

1 篇文章

订阅专栏

这篇博客详细记录了作者在学习Chrome App开发过程中的笔记，主要聚焦于manifest.json文件的重要性和基本结构。通过阅读，读者可以了解到Chrome App开发的基础知识和manifest.json配置的关键点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

昨天照着教程试着写第一个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 开发文档