谷歌插件Image downloader开发之popup

supernavy 发布于2019-08-22 10:49 / 2688人阅读

摘要：的交互逻辑是这样的用户点击的图标，会向页面见上一篇文章谷歌插件开发之发送收集图片事件，页面收集完图片后，将对应的图片地址数组发送给页处理。页就是点击谷歌插件图标所弹出来的页面。

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方法，会一下子弹出很多保存窗口，没有什么意义，就作罢了。

最后，所有文章都会同步发送到微信公众号上，欢迎关注,欢迎提意见：

云服务器 GPU云服务器 php开发谷歌插件谷歌屏蔽webrtc插件谷歌浏览器插件 popup

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91334.html

谷歌插件Image downloader开发之 content script

摘要：地址功能有下面几个功能收集所有的标签的图片链接收集所有的背景图片链接可以根据定义的规则，收集标签属性中的链接支持图片大小筛选显示图片的原始大小预览插件用到谷歌插件中的和。自己运营了一个公众号，在发文章的时候，需要在网上找一些图，而有些网站的图片可能隐藏在属性或者背景图中，要下载的时候经常审查元素，查看源码，不太方便，最近在看一些谷歌插件的api，便顺手做了一个插件Image down...

guyan0319 2019-08-22 10:46 评论0 收藏0
实现一个简单的chrome插件

摘要：小结本文只是简单分享了如何开发一个简单的谷歌浏览器插件，以及一些注意事项，并且提到了如何授权和使用谷歌插件，重点介绍了插件开发必备的入口文件和插件中几个重要环境以及环境之间的通信。我们在上网的时候，都会用到浏览器，但是浏览器并非拥有我们想要的所有功能，我们可以根据自己的需要，实现自己的插件来满足需求。比如网页中经常会有大量的广告，如果你希望拥有一个纯净的网页，可以实现一个插件来删除网...

rubyshen 2019-08-23 13:58 评论0 收藏0
实现一个简单的chrome插件

摘要：小结本文只是简单分享了如何开发一个简单的谷歌浏览器插件，以及一些注意事项，并且提到了如何授权和使用谷歌插件，重点介绍了插件开发必备的入口文件和插件中几个重要环境以及环境之间的通信。我们在上网的时候，都会用到浏览器，但是浏览器并非拥有我们想要的所有功能，我们可以根据自己的需要，实现自己的插件来满足需求。比如网页中经常会有大量的广告，如果你希望拥有一个纯净的网页，可以实现一个插件来删除网...

lieeps 2019-08-02 12:12 评论0 收藏0
实现一个简单的chrome插件

摘要：小结本文只是简单分享了如何开发一个简单的谷歌浏览器插件，以及一些注意事项，并且提到了如何授权和使用谷歌插件，重点介绍了插件开发必备的入口文件和插件中几个重要环境以及环境之间的通信。我们在上网的时候，都会用到浏览器，但是浏览器并非拥有我们想要的所有功能，我们可以根据自己的需要，实现自己的插件来满足需求。比如网页中经常会有大量的广告，如果你希望拥有一个纯净的网页，可以实现一个插件来删除网...

fjcgreat 2019-08-29 17:31 评论0 收藏0
【chrome 插件一】开发一个简单chrome浏览器插件

摘要：之所以越来越好用，很大一部分原因归功于功能丰富的插件对于忠实用户来说，了解和开发一款适合自己的插件，确实是一件很的事情。 chrome 之所以越来越好用，很大一部分原因归功于功能丰富的插件；对于chrome忠实用户来说，了解和开发一款适合自己的chrome插件，确实是一件很cool的事情。了解chrome 插件 chrome 插件个人理解：就是一个html + js +css + i...

MiracleWong 2019-08-19 18:07 评论0 收藏0