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

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第七天，点击查看活动详情

前言

用过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");
复制代码