谷歌插件Image downloader开发之 content script

guyan0319 发布于2019-08-22 10:46 / 412人阅读

摘要：地址功能有下面几个功能收集所有的标签的图片链接收集所有的背景图片链接可以根据定义的规则，收集标签属性中的链接支持图片大小筛选显示图片的原始大小预览插件用到谷歌插件中的和。

自己运营了一个公众号，在发文章的时候，需要在网上找一些图，而有些网站的图片可能隐藏在属性或者背景图中，要下载的时候经常审查元素，查看源码，不太方便，最近在看一些谷歌插件的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交互，下一篇文章再说。

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

私有云服务器托管 php开发谷歌插件谷歌屏蔽webrtc插件谷歌浏览器插件云栖大会开发者之夜

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

转载请注明本文地址：https://www.ucloud.cn/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