vue css format插件_vue-cli3 + View UI 开发chrome插件

yangsoon/github-markdown-toc-sidebar​github.com

前言

本文介绍一种使用vue-cli和View UI(原iview)开发chrome extension的开发模式。参考了vue-cli3开发Chrome插件实践这篇文章。这篇文章给出了使用element-ui开发的模板，但是，iview比element在组件上多了很多有用的trick。所以这里决定使用iview里的组件来开发一个chrome extension。

最近在阅读raft的中文翻译，但是readme有些过长，每次想回头看看之前的章节就有些麻烦，所以就萌发了开发一个chrome插件来生成一个readme目录的想法。

为什么使用vue-cli

之前熟悉了vue组件化的开发，因为不是专业的前端，所以只能使用第三方的ui组件库，如果在开发chrome插件的时候，也能继承之前的开发模式继续开发一个chrome插件，也是非常舒服的一件事情，果然网上就有大佬尝试使用vue-cli进行chrome 插件的开发，具体的细节可以参考我发出的链接 vue-cli3开发Chrome插件实践，如果你之前没有接触过chrome extension的开发，你也可以阅读这篇文章Chrome插件(扩展)开发全攻略。

template 细节修改

这篇文章只讲解一些和vue-cli3开发Chrome插件实践这篇文章的不同之处，希望读者先行阅读。

按需引用

iview和element采用了不同的按需引用方式。

npm install babel-plugin-import --save-dev

babel.config.js

module.exports = {
  presets: [
    '@vue/app'
  ],
  "plugins": [
    [
        "import",
        {
            "libraryName": "view-design",
            "libraryDirectory": "src/components"
        }
    ]
  ]
}

相应的popup/index.js文件也要修改成

import Vue from "vue";
import AppComponent from "./App/App.vue";
import 'view-design/dist/styles/iview.css';

Vue.component("app-component", AppComponent);

import {
  Card,
  Button
} from 'view-design';

Vue.component('Card', Card);
Vue.component('Button', Button);

new Vue({
  el: "#app",
  render: createElement => {
    return createElement(AppComponent);
  }
});

conten-script字体问题

在content.js中使用iview组件的时候，也会有字体无法引入的问题。这时候在content.js添加

(function insertViewIcons() {
  let ViewIcons = document.createElement('style');
  ViewIcons.type = 'text/css';
  ViewIcons.textContent = `
    @font-face {
        font-family: "Ionicons";
        src: url('${ window.chrome.extension.getURL("fonts/ionicons.woff2")}') format('woff2'),
        url('${ window.chrome.extension.getURL("fonts/ionicons.woff")}') format('woff'),
        url('${ window.chrome.extension.getURL("fonts/ionicons.ttf")}') format('truetype');
    }
  `;
  document.head.appendChild(ViewIcons);
})();

使用content.js向目标网页插入vue组件

之前参考的那篇文章没有说明如何使用content.js插入自己写的组件，这里就简单的介绍一下：

content
├── components
│   └── SideBar.vue
└── index.js

创建类似上面的目录，在index.js中引入编写好的组件。

index.js

// 注意，这里引入的vue是运行时的模块，因为content是插入到目标页面，对组件的渲染需要运行时的vue， 而不是编译环境的vue （我也不知道我在说啥，反正大概意思就是这样）
import Vue from "vue/dist/vue.esm.js";
import 'view-design/dist/styles/iview.css';
import SideBar from "./components/SideBar"

import {
    Button,
    Drawer,
    Tree,
    BackTop
} from "view-design";

// 按需引用iview中的组件。
Vue.component("Button", Button);
Vue.component("Drawer", Drawer);
Vue.component("Tree", Tree);
Vue.component("BackTop", BackTop);
Vue.component('side-bar', SideBar);

// 在target页面中新建一个带有id的dom元素，将vue对象挂载到这个dom上。
function insertSideBar() {
    let sideBar = document.createElement('div');
    sideBar.id = "toc-side-bar";
    sideBar.innerHTML = '<side-bar :tree="tree"></side-bar>';
    let mainDom = document.getElementsByTagName('main')[0];
    mainDom.appendChild(sideBar);
    let tree = getComponentData();
    new Vue({
       el: "#toc-side-bar",
       data: {
           tree: tree.children
       }
    });
}
// 页面加载之后执行插入函数
document.body.onload = insertSideBar;

SideBar.vue

<template>
    <div class="">
        <Drawer v-model="value" :draggable="true" :mask="false" :scrollable="true">
            <div class="toc-header">

            </div>
            <div class="toc-content-tree">
               <Tree :data="tree" @on-select-change="navigation"></Tree>
            </div>
        </Drawer>
    </div>
</template>

<script>
    export default {
        name: "SideBar",
        props: {
          tree: Array
        },
        data () {
            return {
                value: true,
            }
        },
        methods: {
            navigation(node){
                if(node.length > 0) {
                    let href = node[0].href.split("#")[1];
                    window.location.href = "#" + href
                }
            }
        }
    }
</script>

<style>
</style>

这样编写好代码后，执行npm run build打包成一个压缩文件，拖到chrome就可以了。