[网页] - Google官方chrome插件入门教程

原文(英文)：http://code.google.com/chrome/extensions/getstarted.html

来源(中文)：http://www.javaeye.com/topic/648713

 

     看见JE(JavaEye)上有了一篇这样的文章：http://www.javaeye.com/topic/646674内容是做的两个chrome插件，看见很多人对这个都感兴趣，小弟特别走网上看了一翻，终于找到了官方的chrome插件入门教程，下面是大概内容（如有不恰当的地方，多多见谅）：

1.让你的浏览器准备就绪
  不用多说，首先肯定是安装浏览器了，至于你是Windows，Linux，Mac？官方都有对应的下载。

 

2.创建并加载一个扩展
   2.1.首先创建一个文件夹
   2.2.在你的文件夹里面创建一个名为：manifest.json的文件，并且写下以下内容：

Json代码

 

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

 

   2.3.将这个图标复制到你的文件夹

   2.4.加载你的扩展
       a.点击浏览器的图标，并且选择Extensions
       b.加入右上角的“Developer mode”前面是+，那么点击它，页面会添加几个按钮，并且+会变为-，
       c.点击Load unpacked extension按钮，一个dialog窗口就弹出来了，
       d.选择你最开始创建的文件夹，点击OK，（记住，不要放在文件目录有中文的地方，否则会报错，反正我放在桌面上就报错了）
      做完以上步骤，就会出现如下的内容：

 

3.添加代码到你的扩展
   3.1.编辑manifest.json，添加代码（只添加加粗的那一行）:

Json代码

 

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

 

 

   3.2.创建文件popup.html，并且写下以下代码:

Java代码

 

<style>
body {
  min-width:357px;
  overflow-x:hidden;
}

img {
  margin:5px;
  border:2px solid black;
  vertical-align:middle;
  width:75px;
  height:75px;
}
</style>

<script>
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";
}
</script>

 

 

   3.3.回到扩展管理页面，现在属性一下插件（reload），加载新版本的插件
   3.4.点击右上角的插件图标，就会看见效果了，如以下图片：

PS：最后一步的时候，有时候会有点点慢，你点击图标后其实是在执行（当你鼠标移开的时候如果图标样式还是你鼠标一上去的时候那种样式，说明就是在运行了），我最开始还以为是我代码有问题呢，结果后来不经意间才发现这个问题，下面加上原文地址：http://code.google.com/chrome/extensions/getstarted.html
附上我的插件文件夹，在附件里面！

附件：https://files.cnblogs.com/hcbin/lib.rar

 

如果要生成chrome专用的插件安装包，那么就在扩展管理页面里里面点击pack extension按钮，然后选择插件目录，就可以了