nodejs + webpack4 + babel6 结合写Chrome浏览器插件记录(2)

上来先来看下当前实现的效果吧。

前言

首先感谢第一篇留言鼓励的同学，最近各种繁杂的事，时间占用较多，但是也总抽空继续改造这个项目，期间遇到了各种Vue渲染的问题，常规的字符串渲染会在Chrome插件中引起“unsafe-eval”问题等，同时导致component失效无法渲染等。

通过设置安全策略，解决了unsafe-eval的问题。

下一步

接下来的东西还有很多，准备按照Infinity这个插件的UI，虽然还是暂时用的电影网站的链接去做的，去做下来把所有的功能完善一下，Infinity没用过的可以去百度一下，因为需要翻墙，这里就不贴地址了。

当前已经集成了Vue ElementUI, 本来elementUI可以支持组件引入，考虑到不需要远程加载，而且我又很懒的情况，就整体引入了，现在已经可以像写正常的web 页面去写插件的页面组件了，仔细看右侧的控制台就能发现搜索框用的就是element-UI的input组件。

这里用了一个免费的接口去获取1920*1080的高清背景图片，每次刷新都可以更新背景图，图片比较大 加载有点慢，其实也可以自己写一个接口，做一下服务端缓存或者用cdn，这里就不作为重点考虑。

当前使用了less作为css预编译语言，其他依赖都是常规的，但也都是比较新版本的组件。

"devDependencies": {
    "@babel/cli": "^7.0.0",
    "@babel/core": "^7.0.1",
    "@babel/preset-env": "^7.0.0",
    "babel-loader": "^8.0.2",
    "clean-webpack-plugin": "^2.0.2",
    "copy-webpack-plugin": "^5.0.3",
    "css-loader": "^3.0.0",
    "element-ui": "^2.10.0",
    "file-loader": "^3.0.1",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^4.0.0-beta.5",
    "jquery": "^3.4.1",
    "jsonfile": "^5.0.0",
    "less": "^3.9.0",
    "less-loader": "^5.0.0",
    "mini-css-extract-plugin": "^0.6.0",
    "url-loader": "^1.1.2",
    "vue": "^2.5.17",
    "vue-loader": "^15.3.0",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.33.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.7.2"
  }

细心的同学应该能发现里面用了一个webpack-dev-server,但其实这个照道理来说是用不上的，因为是需要生成文件在浏览器里用的，这里加入这个的目的主要是页面方面可以实时在页面浏览，方便调试。

项目直通车：https://github.com/Greensoon/bq-createchr