谷歌插件Image downloader開發之popup

supernavy 發布于2019-08-22 10:49 / 2689人閱讀

摘要：的交互邏輯是這樣的用戶點擊的圖標，會向頁面見上一篇文章谷歌插件開發之發送收集圖片事件，頁面收集完圖片后，將對應的圖片地址數組發送給頁處理。頁就是點擊谷歌插件圖標所彈出來的頁面。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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