入门:Chrome扩展程序

时间:2014-06-22 06:50:27

标签: javascript google-chrome google-chrome-extension

我已经开始使用Google Developer's教程,了解如何构建Chrome扩展程序。 (https://developer.chrome.com/extensions/getstarted)我按照指示操​​作,但弹出窗口不会生成任何照片。 (描述,黄铜等都加载正常。)

起初我认为Flickr API密钥无效,但即使将密钥更新为有效密钥也不会做任何事情。我还尝试禁用所有其他扩展程序,以确保它不会发生冲突,并在新窗口中打开它。我还通过JSFiddle运行代码,看看是否有无效的东西。

有人可以填写我想要做的工作吗? (据我所知,它是一个认证令牌问题或缺乏认证令牌。)

编辑:

这是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=42cd5ea89847bd3b8f211ddbb7a6b789' +
  '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();
});

1 个答案:

答案 0 :(得分:1)

我想我可能会找到答案,这是来自flickr.com的消息:

  

已禁用无参数搜索。请改用flickr.photos.getRecent。

只需使用flickr.photos.getRecent,并删除不必要的参数即可。