【Chrome Extensions】实现一个可以下载图片的Chrome插件

网上有许多的工具可以做这件事，但我还是自己用Chrome Extensions的方式倒腾倒腾。

在google上搜索了一下 Chrome Extensions Tutorial之后，大概了解他的实现框架。
实现具体功能的话主要有三个重要模块

ManiFest.json，他是实现一个插件的基础，没有你可能无法把东西塞到Chrome里。有了的他的话，你至少可以在Chrome里看到他。
background.js，全局的js设置。我不大懂js，看了教程以后，将它定义成配置插件作用域与全局变量的地方。
popup.html，有了它你就可以你就可以自定义插件的功能，我感觉具体的功能应该写在这里面

按照官网的案例走，可以将https://developer.chrome.com 下的页面的背景颜色全部变成绿的。当然我自己改成了天蓝色，并做了一些失措型的改造。

接下来，我将尝试一下将一个页面上的符合规则的图片全部下载下来。

在搞的时候，我突然发现对应的网站图片做了一个防盗链的安全措施，如果我直接下载的话，会报一个403的Error
目前为止，发现了一个坑，如果使用chrome.tabs.executeScript(code, function callback)的话，function callback返回的是对象数组，而不是code返回的对象。我在多次尝试后，发现了array of any result 的含义。。。。。。所以，在取出code执行结果的时候，需要用result[0]包一层。

const command = `const images = document.getElementsByClassName('inner-container');alert(images.length);let array = new Array();for(let i = 0;i < images.length; i++){array[i] = images[i].querySelector('img').src;}array;
`;changeColor.onclick = function(element) {chrome.tabs.executeScript({code : command},function(result){#大概这样 用在满足条件的网页，会输出一个url数组alert(result[0]);});};

之后，再用在callback函数里写一下下载逻辑，因为下载逻辑是从别的地方抄过来的，所以这里就不贴代码了，逻辑就是利用图片的url去构造一个标签然后模拟点击下载。特别之处就在于，如果直接利用download下载的话，会因为chrome浏览器的逻辑，直接打开另外一个标签显示你的图片。所以需要利用canvas。

放一个GitHub仓库地址，如果有兴趣的话可以从魔改我的代码开始。

【Chrome Extensions】实现一个可以下载图片的Chrome插件相关推荐

实现一个vue的图片预览插件
vue-image-swipe 基于photoswipe实现的vue图片预览组件安装 1 第一步 npm install vue-image-swipe -D 2 第二步 vue 入口文件引入 im ...
自制一个代码转图片的uTools插件
时不时和实验室的人会有代码交流,每次展示代码都是直接上文件.或者截n个图.也或者就给个小片段.找了很久,终于找到这个开源工具,琐碎直接做成插件,日常搭配uTools,效率真高~~ MelodyJerr ...
Taro 下载图片到手机
最近需要做一个微信下载图片到手机的需求,因为涉及到微信的照片权限,因此做个记录 // 鉴权操作判断是否有保存到相册的权限 // 有就直接下载没有就弹窗提示给权限 downImg() {Taro.g ...
26.Android 下载图片保存到相册
26.Android 下载图片保存到相册 Android 下载图片保存到相册前言实现思路自定义Dialog 自定义Handler 自定义AsyncTask AndroidManifest配置权限 ...
Chrome清除某一个网站的Cookie
文章目录 Chrome清除某一个网站的Cookie 打开Chrome, 进网站设置你懂的右上角,输入想要删除Cookie的网站的网址,即可搜索出相关的全部Cookie内容. 太简单了 Chrome ...
dw按钮图片滚动js_使用 React Hooks 实现仿石墨的图片预览插件（巨详细）
点击上方"前端教程",选择"星标" 每天前端开发干货第一时间送达! 作者:DARRELL https://juejin.im/post/5e9bf299f265 ...
3d饼图 vue_这是我见过最优雅的Vue图片轮播插件——Vue-Awesome-Swiper
介绍在Web网页开发中,我们经常需要用到图片轮播,在以往传统的开发方式中有很多基于jquery的插件可供使用,但是随着目前各类前端框架层出不穷的现状,在某些方面特别是针对特定的场景,还是有不少地方不 ...
php 实现跨站下载图片,一个图片url访问后直接下载怎样实现
一个图片url访问后直接下载怎样实现先看代码 downloadIamge(imgsrc, name) {//下载图片地址和图片名 let image = new Image(); // 解决跨域 C ...
制作一个简单的Chrome extensions并发布到应用商店
制作一个简单的Chrome extensions并发布到应用商店制作一个简单的Chrome extensions并发布到谷歌商店一个简单的ShowTime extension 注:工具推荐使用VS ...

【Chrome Extensions】实现一个可以下载图片的Chrome插件

【Chrome Extensions】实现一个可以下载图片的Chrome插件相关推荐

最新文章

热门文章