Image downloader的交互邏輯是這樣的：用戶點(diǎn)擊Image downloader的圖標(biāo)，會(huì)向頁面（content script,見上一篇文章：谷歌插件Image downloader開發(fā)之 content script）發(fā)送收集圖片事件，頁面收集完圖片后，將對(duì)應(yīng)的圖片地址數(shù)組發(fā)送給popup頁處理。popup頁就是點(diǎn)擊谷歌插件圖標(biāo)所彈出來的頁面。Image downloader的popup頁是長成這樣的：

popup頁包含的功能

popup頁采用了vue1.0來做數(shù)據(jù)綁定，主要包含了以下功能：

1、顯示原始圖片大小
2、根據(jù)圖片大小篩選圖片
3、設(shè)置是否顯示img標(biāo)簽的圖片、是否顯示背景圖片，是否顯示自定義屬性的圖片
4、根據(jù)自定義屬性規(guī)則，收集所配置的自定義屬性的值
5、下載圖片

popup與content script的交互

圖片容器：

imgs: { // 圖片容器    attrImg: [], // 屬性圖    bgImg: [], // 背景圖    img: [], // img標(biāo)簽圖},/**
 * 向tab發(fā)送收集圖片信息，接收tab返回的圖片url列表
 * @param action {string} 值為'all'或'attr'，如果為all，則收集所有圖片，為attr則只