摘要：地址功能有下面幾個(gè)功能收集所有的標(biāo)簽的圖片鏈接收集所有的背景圖片鏈接可以根據(jù)定義的規(guī)則，收集標(biāo)簽屬性中的鏈接支持圖片大小篩選顯示圖片的原始大小預(yù)覽插件用到谷歌插件中的和。

自己運(yùn)營(yíng)了一個(gè)公眾號(hào)，在發(fā)文章的時(shí)候，需要在網(wǎng)上找一些圖，而有些網(wǎng)站的圖片可能隱藏在屬性或者背景圖中，要下載的時(shí)候經(jīng)常審查元素，查看源碼，不太方便，最近在看一些谷歌插件的api，便順手做了一個(gè)插件Image downloader。源碼放到了github上，順便學(xué)習(xí)并用了一下git。地址：https://github.com/yeyuqiudeng/imageDownloader

Image downloader有下面幾個(gè)功能：

收集所有的img標(biāo)簽src的圖片鏈接

收集所有的背景圖片鏈接

可以根據(jù)定義的規(guī)則，收集標(biāo)簽屬性中的鏈接

支持圖片大小篩選

顯示圖片的原始大小

插件用到谷歌插件中的content script和popup。content script是注入到頁(yè)面中的js，需要在manifest.json配置注入頁(yè)面的規(guī)則，和注入那些js進(jìn)入頁(yè)面。在這個(gè)插件中，我的manifest.json是這樣的：

{
  "manifest_version": 2,
  "name": "Image downloader",
  "description": "圖片下載器，可以自定義屬性下載規(guī)則",
  "version": "1.0",
  "browser_action": {
    "default_icon": "icon16.png",
    "default_popup": "/popup/popup.html"
  },
  "permissions": [
    "tabs", 
    "downloads"
  ],
  "icons": {
        "16": "icon16.png",
        "48": "icon48.png",
        "128": "icon128.png"
    },
    "content_scripts": [{
        "matches": ["http://*/*", "https://*/*"],
        "js": ["common.js", "inject.js"]
    }]
}

content_scripts的配置表示要將common.js和inject.js注入到所有http和https的網(wǎng)站

在common里我定義了兩個(gè)方法，一個(gè)用來(lái)顯示錯(cuò)誤信息，一個(gè)方法將圖片的相對(duì)路徑補(bǔ)全，在cdn地址前面加上http。

方法如下：

// 顯示錯(cuò)誤信息
const showMsg = (msg) => {
    let myDate = new Date();
    let now = myDate.toLocaleString();
    console.log(now + "【" + msg + "】");
};
// 拼接相對(duì)路徑及cdn
const concatUrl = (url, domain) => {
    let fullPath = url
    if (/^/[^/]+/.test(url)) { // 是否為相對(duì)路徑
        fullPath = domain + url
    }
    if (/^///.test(url)) { // 是否為cdn
        fullPath = "http:" + url
    }
    return fullPath
}

不太熟悉正則，也不知道寫得對(duì)不對(duì)。

其實(shí)這里不需要再要一個(gè)common.js的文件，只是上一次寫插件的時(shí)候，公共的方法比較多，這次也將common.js留了下來(lái)。

在注入頁(yè)面的JS中，主要是三個(gè)方法，分別用來(lái)收集img標(biāo)簽的src地址，元素的背景圖片和自定義屬性規(guī)則的屬性值

收集img標(biāo)簽的src值代碼如下：

const getImgUrl = function() { // 獲取所有圖片的src值
    const allImg = document.querySelectorAll("img")
    const allImgUrl = []
    allImg.forEach((img) => {
        allImgUrl.push(concatUrl(img.src, domain))
    })
    return allImgUrl
}

其實(shí)就是獲取img標(biāo)簽的集合，遍歷集合并獲取src的值，如果為相對(duì)路徑或cdn路徑，用concatUrl方法拼接成絕對(duì)路徑，最后組成一個(gè)由url地址組成的數(shù)組。

獲取背景圖片的代碼如下：

const getBackgroundImage = function() { // 獲取背景圖片
    const allDoms = document.querySelectorAll("*")
    const allBgImageUrl = []
    allDoms.forEach((element) => {
        let url = window.getComputedStyle(element)["background-image"].match(/url("(.+)")$/)
        if (url && url[1]) {
            allBgImageUrl.push(concatUrl(url[1], domain))
        }
    })
    return allBgImageUrl
}

通過(guò)getComputedStyle方法來(lái)獲取所有元素的backgroundImage屬性值，并將url地址提取出來(lái)，如果一個(gè)backgroundImage中有多個(gè)url，只取第一個(gè)，后面的就舍棄了。這個(gè)方法也是返回一個(gè)由地址組成的數(shù)組。

獲取配置屬性值的代碼如下：

let configAttr = ["data-src"] // 配置的屬性
const getConfigAttrUrl = function() { //  獲取所有配置屬性的值
    const attrUrl = []
    if (configAttr.length > 0) {
        configAttr.forEach((attr) => {
            attrUrl.push(...getAllAttr(attr))
        })
    }
    return attrUrl
}
const getAllAttr = function(attr) { // 獲取對(duì)應(yīng)屬性的值
    const attrs = []
    const allDoms = document.querySelectorAll("[" + attr + "]")
    allDoms.forEach((dom) => {
        const attrValue = dom.getAttribute(attr)
        attrs.push(concatUrl(attrValue, domain))
    })
    return attrs
}

configAttr用來(lái)配置需要獲取元素屬性的規(guī)則，這里用了數(shù)組來(lái)接收多個(gè)配置規(guī)則，默認(rèn)收集所有元素的data-src屬性值。為什么會(huì)內(nèi)置這個(gè)規(guī)則呢？因?yàn)楹芏嗑W(wǎng)站都用了這個(gè)屬性啊。

getAllAttr是根據(jù)傳進(jìn)來(lái)的屬性獲取屬性值，getConfigAttrUrl是遍歷屬性規(guī)則，收集所有屬性規(guī)則下的所有屬性值，返回一個(gè)屬性值數(shù)組。

圖片不會(huì)在進(jìn)入頁(yè)面后馬上就進(jìn)行收集，只會(huì)在用戶點(diǎn)擊插件時(shí)才開(kāi)始收集當(dāng)前頁(yè)面的圖片，并將收集到的數(shù)據(jù)發(fā)送給popup處理。content script怎樣與popup交互，下一篇文章再說(shuō)。

最后，所有文章都會(huì)同步發(fā)送到微信公眾號(hào)上，歡迎關(guān)注,歡迎提意見(jiàn)：