chrome插件:随机图片欣赏

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

一、插件文件

1. 清单文件:manifest.json

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

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

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

内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
"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. 点击事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(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. 独立页面效果

独立页面效果

五、参考文档

文章目录
  1. 一、插件文件
    1. 1. 清单文件:manifest.json
      1. 内容
    2. 2. 资源文件
  2. 二、插件内页
    1. 1. 功能
    2. 2. 随机图片接口
    3. 3. 点击事件
  3. 三、插件加载
  4. 四、效果图
    1. 1. 插件效果图
    2. 2. 独立页面效果
  5. 五、参考文档
|