您的位置：首页 > 编程语言 > Go语言

Google Chrome Extensions 官方教程 中文版

2012-09-09 22:32 459 查看
来源：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。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航