Google Chrome Extensions 官方教程 中文版

时间：2024-03-01 22:10:42

来源：http://developer.chrome.com/extensions/

1，Getting Started

 

a，你可以基于任何Chrome的发行版开发extension

 

b，概念：Browser Action，extension和Chrome之间的桥梁，可以帮你在Chrome的工具栏添加一个按钮，由你来控制按钮的行为。

　　创建方式：首先，在你的PC上建立一个文件夹；其次，在该文件夹里创建一个manifest.json，然后按照教程上添加以下代码：

{
  "name": "My First Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png"
  },
  "permissions": [
    "http://api.flickr.com/"
  ]
}

最后，添加一个png格式的按钮图标就可以了。

　　加载extension的方法：工具-->扩展程序 --> 载入正在开发的扩展程序，找到那个文件夹然后加载就行了，manifest.json会被自动解析，图标被加到工具栏里了。如果没有任何其它代码，按下那个按钮当然没啥反应了。

 

c，向extension中添加代码

　　第一步，编辑manifest.json添加新的一行，指出弹出页面的html描述

...
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  ..

　　第二步，在刚才创建extension文件的文件夹里，创建两个文件popup.html和popup.js，然后添加code：

<!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 for security. -->
    <script src="popup.js"></script>
  </head>
  <body>
  </body>
</html>
// 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.

var req = new XMLHttpRequest();
req.open(
    "GET",
    "http://api.flickr.com/services/rest/?" +
        "method=flickr.photos.search&" +
        "api_key=90485e931f687a9b9c2a66bf58a3861a&" +
        "text=hello%20world&" +
        "safe_search=1&" +  // 1 is "safe"
        "content_type=1&" +  // 1 is "photos only"
        "sort=relevance&" +  // another good one is "interestingness-desc"
        "per_page=20",
    true);
req.onload = showPhotos;
req.send(null);

function showPhotos() {
  var photos = req.responseXML.getElementsByTagName("photo");

  for (var i = 0, photo; photo = photos[i]; i++) {
    var img = document.createElement("image");
    img.src = constructImageURL(photo);
    document.body.appendChild(img);
  }
}

// See: http://www.flickr.com/services/api/misc.urls.html
function constructImageURL(photo) {
  return "http://farm" + photo.getAttribute("farm") +
      ".static.flickr.com/" + photo.getAttribute("server") +
      "/" + photo.getAttribute("id") +
      "_" + photo.getAttribute("secret") +
      "_s.jpg";
}

　　第三步，在extension的页面重新加载一下就行了。

 

回顾一下，相比于做HTML5的web程序来讲，extension只是多了一个配置文件manifest.json。其次就是JS里面可以用一些针对extension订制的API。

相关文章