Switch branches/tags
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
..
Failed to load latest commit information.
css
images
js
README.md
manifest.json
popup.html

README.md

完整源码参见:https://github.com/yeshaoting/chrome-plugin-study/tree/master/start

一、插件文件

1. 清单文件:manifest.json

清单是chrome插件的入口,所有插件都要有这个文件。

包含插件的一些描述信息,例如:插件名称、版本号、允许请求的地址、展示的图标等。

**注:**文件名称必须为maifest.json

内容

{
  "manifest_version": 2,

  "name": "图片欣赏",
  "description": "随机图片欣赏",
  "version": "1.0",

  "permissions": [
    "https://secure.flickr.com/"
  ],
  "browser_action": {
    "default_icon": "images/icon.png",
    "default_popup": "popup.html"
  }
}

2. 资源文件

清单文件添加的图标(images/icon.png)、插件点击后弹出页面(popup.html)等。

资源文件都是在清单中定义的,通过清单描述找到。

二、插件内页

1. 功能

本插件要实现的功能:

  • 展示一批图片
  • 批量更换所有图片
  • 更换单个图片

2. 随机图片接口

现成的API接口:https://unsplash.it/300/300/?random=1

其中,random后面的值可以随机。

**注:**接口存在一个问题,在同一个页面random值相同的话,页面展示的图片是相同的。因此,要保证初始页面的所有random值不一致。

3. 点击事件

$(document).ready(function() {
  // 换一批
  $("div.head a.refresh").click(function(event) {
    var images = $("a.thumbnail img").each(function() {
      change_img($(this));
    });

  });

  // 单独更换
  $("a.thumbnail img").click(function(event) {
    change_img($(this));
  });

  function change_img($obj) {
    var url = "https://unsplash.it/300/300/?random=" + Math.random();
    $obj.attr("src", url);
  }

});

三、插件加载

进入chrome扩展程序,勾选右上方开发者模式,然后点击“加载已解压的扩展程序”。

在弹出的文件查看对话框,选择开发的插件在磁盘上的存放位置。

确认完成后,就能看到开发的插件“图片欣赏”,展示在下面的扩展程序列表里了。

在chrome地址栏右侧的扩展插件中,就能看到并使用刚开发的插件了。

加载插件

四、效果图

1. 插件效果图

插件效果图

2. 独立页面效果

独立页面效果

五、参考文档