Chrome 操作指南——入门篇（六）console.injector

前言

用过 npm 的都知道，通过它我们可以安装自己想用的任何依赖，比如 element-ui，lodash 等等。那你想没想过有一天我们可以在 chrome 浏览器中也可以用这些依赖。是不是觉得很新奇？对，没错。今天我就带大家看看如果在 chrome 浏览器上用 npm 上的依赖，感受它的神奇力量。

console.injector

首先想要在浏览器上运行 npm 依赖，我们需要一个插件的帮助：console.injector。

安装好之后我们就可以通过console.inject('...')安装我们想用的依赖了。

比如我们安装一个 lodash。

可以看到通过console.inject('lodash')命令，它直接通过 cdn 的形式引入了进来。我们通过_就可以运用他的任何方法了。

是不是很方便，这样在我们想先体验一个依赖的时候，完全不用安装在我们的项目里面，直接在浏览器上就可以直接体验。

FileSaver.js

既然我们可以安装依赖了，那我们是不是还可以做很多操作。

还记得我们上一章说的，通过

$$('img').map(el => ({src:el.currentSrc})).filter(img => img.src)

拿到所有的 url 吗？既然我们都给他整理好了，那我们是不是可以一鼓作气，再给他下载下来。

既然要下载它，那当然要请出前端的下载利器，FileSaver.js。那怎么做呢？

通过 console.injector 下载 FileSaver.js。

注：安装后，FileSaver.js 内的方法会暴露在全局，直接使用相应方法即可。

再通过如下代码，就可以实现了。

    const list = $$('img').map(el => ({src:el.currentSrc})).filter(img => img.src)    const blob = new Blob([JSON.stringify(list)], {type: "text/plain;charset=utf-8"});    saveAs(blob, "list.txt");

当然还有很多有意思的玩法