谷歌插件Image downloader开发之popup

Image downloader的交互逻辑是这样的:用户点击Image downloader的图标,会向页面(content script,见上一篇文章:谷歌插件Image downloader开发之 content script)发送收集图片事件,页面收集完图片后,将对应的图片地址数组发送给popup页处理。popup页就是点击谷歌插件图标所弹出来的页面。Image downloader的popup页是长成这样的:

popup页包含的功能

popup页采用了vue1.0来做数据绑定,主要包含了以下功能:

1、显示原始图片大小 2、根据图片大小筛选图片 3、设置是否显示img标签的图片、是否显示背景图片,是否显示自定义属性的图片 4、根据自定义属性规则,收集所配置的自定义属性的值 5、下载图片

popup与content script的交互

图片容器:

imgs: { // 图片容器
    attrImg: [], // 属性图
    bgImg: [], // 背景图
    img: [], // img标签图
},
/**
 * 向tab发送收集图片信息,接收tab返回的图片url列表
 * @param action {string} 值为'all'或'attr',如果为all,则收集所有图片,为attr则只收集属性图
 * @param attr {string} 用;分隔开的属性规则
 */
sendMessage(action, attr) {
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
        chrome.tabs.sendMessage(tabs[0].id, { action, attr }, (response) => {
            if (action === 'all') {
                const attrImg = response.attrImg
                const bgImg = response.bgImg
                const img = response.img
                    // 重置容器
                this.resetImgContainer('attrImg')
                this.resetImgContainer('bgImg')
                this.resetImgContainer('img')
                    // 获取图片的宽高
                this.mapImg(this.imgs.attrImg, attrImg)
                this.mapImg(this.imgs.bgImg, bgImg)
                this.mapImg(this.imgs.img, img)
            } else {
                this.resetImgContainer('attrImg')
                this.mapImg(this.imgs.attrImg, response.attrImg)
            }
        });
    });
},

popup页用了chrome的tabs的api,query查询当前页签,并用sendMessage向页签发送action和配置的属性值,如果action为'all'则是收集所有图片,如果为'attr',则只收集所配置的属性图片,resetImgContainer方法只是简单地将容器置空,response是content script所返回的结果,mapImg方法用来获取图片的长和宽,下文会讲到。

而在content script中,则用onMessage来接收popup的信息,并将收集到的图片数组返回给popup

// 接收popup的指令,如果action为all,则获取所有图片url,如果为attr,则获取属性图片
chrome.runtime.onMessage.addListener(({ action, attr }, sender, sendResponse) => {
    if (attr) {
        configAttr = []
        configAttr.push(...initAttr)
        configAttr.push(...attr.split(','))
    } else {
        configAttr = []
        configAttr.push(...initAttr)
    }
    if (action === 'all') {
        sendResponse({
            attrImg: [...new Set(getConfigAttrUrl())],
            bgImg: [...new Set(getBackgroundImage())],
            img: [...new Set(getImgUrl())]
        })
    }
    if (action === 'attr') {
        sendResponse({
            attrImg: [...new Set(getConfigAttrUrl())],
        })
    }
});

上篇文章发在div.io上时,@幾米 提到了图片去重的问题,所有在返回图片是,用es6的Set方法去重,这个只处理同类型图片的去重,不处理如背景图片和图片标签之间的重复图片。

获取属性图片

/**
 * 获取属性图片
 */
getAttrImg() {
    clearTimeout(this.progress)
    this.progress = setTimeout(() => {
        this.sendMessage('attr', this.attr)
    }, 500)
},

配置的属性值发生变化时,向页面发送获取属性图片事件

显示图片原始大小

/**
 * 遍历图片,设置图片的宽高属性
 * @param container {array} 容器
 * @param imgs {array} 图片url列表
 */
mapImg(container, imgs) {
    imgs.forEach((src) => {
        this.imgNatureSize(container, src)
    })
},
/**
 * 获取图片原始宽高,并将图片push进容器
 * @param container {array} 容器
 * @param src {string} 图片url
 */
imgNatureSize(container, src) {
    const size = {
        width: '',
        height: '',
    }
    let image = new Image()
    image.src = src
    image.onload = function() {
        container.push({
            src,
            width: image.width,
            height: image.height,
        })
    }
},

遍历拿到的图片,获取图片的宽和高,并将宽高属性保存起来

下载图片

/**
 * 下载图片
 */
downLoad(url) {
    chrome.downloads.download({ url }, () => {
        console.log('下载成功')
    })
}

调用谷歌插件的download方法来进行图片下载,本来想搞个批量下载的,但是没有发现谷歌插件有提供批量下载的API,如果遍历所选中的图片列表,不断调用download方法,会一下子弹出很多保存窗口,没有什么意义,就作罢了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏cnblogs

Bootstrap源码分析之dropdown

源码分析: Dropdowns.scss:下拉框模块 Javascripts/bootstrap/dropdown.js:实现下拉框响应 实现功能及原理: ...

2247
来自专栏大数据钻研

HTML5学习笔记(一)

1.什么是 HTML5? HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。 HTML 的上一个版本诞生于 1999 年。自从那以后,...

3315
来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之absolute

1、absolute和float   拥有相同的特性表现:     ①包裹性(容器应用之后,可以包裹里面的内容); 1 <!doctype html> 2 ...

2944
来自专栏我的博客

原生JavaScript第一天

首先:感谢李炎恢老师的无私奉献 其次:下面的学习总结都是根据李炎恢老师的视频以及参考网络资料编写,转载请注明出处:http://www.0377joyous.c...

2594
来自专栏有趣的Python

11- Flask 构建弹幕微电影网站-后台逻辑(三)

已上线演示地址: http://movie.mtianyan.cn 项目源码地址:https://github.com/mtianyan/movie_proj...

28710
来自专栏GreenLeaves

JavaScript图片库

将图片放到网上的方法有很多,你可以简单地把所有的图片都放到网页上。但是,如果你打算发布的图片过多,这个页面很快会变的过于庞大,而且加上这些图片后用户要下载的的数...

1816
来自专栏猿人谷

grep命令

Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来。grep全称是Global Regular Expre...

1727
来自专栏程序员宝库

Python爬虫抓取纯静态网站及其资源

前段时间需要快速做个静态展示页面,要求是响应式和较美观。由于时间较短,自己动手写的话也有点麻烦,所以就打算上网找现成的。

1292
来自专栏闻道于事

Layui常用方法

layui中的input radio单选框监听选择触发事件: 根据给input绑定的 lay-filter 进行查找input,然后进入函数判断 ...

8959
来自专栏vue学习

介绍-vuejs官网学习笔记

       前言:这两天把vuejs官方文档都看了一遍(路由的文档还没看),现在回过头来再结合英文文档重新看一遍 ,为的是学下英文,然后总结性的写一下。尽管...

1403

扫码关注云+社区