谷歌插件Image downloader開發之 content script

guyan0319 發布于2019-08-22 10:46 / 531人閱讀

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

自己運營了一個公眾號，在發文章的時候，需要在網上找一些圖，而有些網站的圖片可能隱藏在屬性或者背景圖中，要下載的時候經常審查元素，查看源碼，不太方便，最近在看一些谷歌插件的api，便順手做了一個插件Image downloader。源碼放到了github上，順便學習并用了一下git。地址：https://github.com/yeyuqiudeng/imageDownloader

功能

Image downloader有下面幾個功能：

收集所有的img標簽src的圖片鏈接

收集所有的背景圖片鏈接

可以根據定義的規則，收集標簽屬性中的鏈接

支持圖片大小篩選

顯示圖片的原始大小

預覽

manifest.json

插件用到谷歌插件中的content script和popup。content script是注入到頁面中的js，需要在manifest.json配置注入頁面的規則，和注入那些js進入頁面。在這個插件中，我的manifest.json是這樣的：

{
  "manifest_version": 2,
  "name": "Image downloader",
  "description": "圖片下載器，可以自定義屬性下載規則",
  "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的網站

common公共方法

在common里我定義了兩個方法，一個用來顯示錯誤信息，一個方法將圖片的相對路徑補全，在cdn地址前面加上http。

方法如下：

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

不太熟悉正則，也不知道寫得對不對。

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

content script

在注入頁面的JS中，主要是三個方法，分別用來收集img標簽的src地址，元素的背景圖片和自定義屬性規則的屬性值

收集img標簽的src值代碼如下：

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

其實就是獲取img標簽的集合，遍歷集合并獲取src的值，如果為相對路徑或cdn路徑，用concatUrl方法拼接成絕對路徑，最后組成一個由url地址組成的數組。

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

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
}

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

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

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) { // 獲取對應屬性的值
    const attrs = []
    const allDoms = document.querySelectorAll("[" + attr + "]")
    allDoms.forEach((dom) => {
        const attrValue = dom.getAttribute(attr)
        attrs.push(concatUrl(attrValue, domain))
    })
    return attrs
}

configAttr用來配置需要獲取元素屬性的規則，這里用了數組來接收多個配置規則，默認收集所有元素的data-src屬性值。為什么會內置這個規則呢？因為很多網站都用了這個屬性啊。

getAllAttr是根據傳進來的屬性獲取屬性值，getConfigAttrUrl是遍歷屬性規則，收集所有屬性規則下的所有屬性值，返回一個屬性值數組。

圖片不會在進入頁面后馬上就進行收集，只會在用戶點擊插件時才開始收集當前頁面的圖片，并將收集到的數據發送給popup處理。content script怎樣與popup交互，下一篇文章再說。

最后，所有文章都會同步發送到微信公眾號上，歡迎關注,歡迎提意見：

云服務器 GPU云服務器 php開發谷歌插件谷歌屏蔽webrtc插件谷歌瀏覽器插件云棲大會開發者之夜

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91238.html

谷歌插件Image downloader開發之popup

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

supernavy 2019-08-22 10:49 評論0 收藏0
【chrome 插件一】開發一個簡單chrome瀏覽器插件

摘要：之所以越來越好用，很大一部分原因歸功于功能豐富的插件對于忠實用戶來說，了解和開發一款適合自己的插件，確實是一件很的事情。 chrome 之所以越來越好用，很大一部分原因歸功于功能豐富的插件；對于chrome忠實用戶來說，了解和開發一款適合自己的chrome插件，確實是一件很cool的事情。了解chrome 插件 chrome 插件個人理解：就是一個html + js +css + i...

MiracleWong 2019-08-19 18:07 評論0 收藏0
爬蟲可視化點選配置工具之chrome插件簡介

摘要：從右上角菜單更多工具擴展程序可以進入插件管理頁面，也可以直接在地址欄輸入訪問。其中，個是必不可少的，和是推薦的。什么是Chrome插件 Chrome插件是一個用Web技術開發、用來增強瀏覽器功能的軟件，它其實就是一個由HTML、CSS、JS、圖片等資源組成的一個.crx后綴的壓縮包. 開發與調試 Chrome插件沒有嚴格的項目結構要求，只要保證本目錄有一個manifest.json即...

RiverLi 2019-08-16 13:25 評論0 收藏0
超好用的谷歌瀏覽器、Sublime Text、Phpstorm、油猴插件合集

摘要：分享一些超好用插件，打造一個不一樣的瀏覽器編輯器。一谷歌瀏覽器插件谷歌訪問助手強烈推薦一鍵安裝，無需其他配置，即可訪問谷歌。谷歌瀏覽器是很耗內存的，該插件會自動掛起長時間未使用的網頁，來釋放系統資源。 showImg(https://segmentfault.com/img/remote/1460000014011338); 分享一些超好用插件，打造一個不一樣的 GitHub、瀏覽器、...

Rango 2019-08-22 15:45 評論0 收藏0