chrome vue插件_Vue-Chrome-ext模板

一个非常轻量的通过Vue3开发chrome插件的模板。

链接地址：

17307/vue-chrome-ext-module​github.com

o1hy/vue-chrome-ext-module​gitee.com

模板涵盖 element-ui 插件。涵盖自动监听 background,manifest.json 变动后自动刷新的插件。

通过 npm run build-watch 可以监听开发。

在最新的模板中已经内置了 dev,background,content等页面

如何新增一个dev页面

我们以新增一个devtools为例。如果想新增一个devtools，那么首先要在 manifest.json 新增一项配置

"devtools_page": "dev.html"

其中要通过 dev.html 引入 dev.js 。在dev.js中通过下面的代码创建dev面板。

try {
    chrome.devtools.panels.create(
        "dev",  // dev名称
        "/icons/icon.png", // 图标
        "/devvue.html"  // dev的具体页面
    );
} catch (e) {
   console.log(e)
}

可以看出 dev.js 会创建一个 devvue 的页面。

通过上面过程，我们要做的事情：

1. 创建 dev.js 代码为上面的内容
2. 在vue.config.js中添加代码，让其自动打包出 dev.html

pagesObj["dev"] = {
    entry: `src/dev/dev.js`,
    filename: `dev.html`
};

3. 此时dist目录中会生成相应文件。

上述 1-3 过程是如何对普通的js文件进行创建并打包。下面的过程将描述如何创建.vue文件。

4. 首先新建一个devvue.vue文件。

<template>
    <div id="app">
        dev vue
    </div>
</template>

<script>
export default {
    created() {
             console.log("created")
         }
   }
</script>

<style scoped>
</style>

5. 然后通过一个devvue.js文件去引入它。有些类似于通过main.js来初始化vue项目。

import devvue from "./devvue.vue"
import Vue from "vue"

Vue.component("devvue",devvue);

new Vue(
    {
        render:h=>h(devvue)
    }
).$mount("#app");

6. 在vue.config.js中添加代码，用来对devvue.js进行打包。

pagesObj["devvue"] = {
    entry: `src/dev/devvue.js`,
    filename: `devvue.html`
};

这样就成功的创建了一个dev面板。

如何新增一个background页面

首先要确定我们的background页面是否需要html，一般不需要。

1. 创建一个 background.js 页面。
2. 修改 vue.config.js , 添加如下内容

module.exports = {
    pages: pagesObj,
    configureWebpack: {
        entry: {
            ……
            'background': './src/background/background.js'
             ……
        },
        output: {
            filename: 'js/[name]/[name].js' //可依据自己需求修改
        },
        plugins: [new CopyWebpackPlugin(plugins)]
    },
    filenameHashing: false,
    productionSourceMap: false
};

3. 在 manifest.json 中指定background.js

  "background": {"scripts": [...,"js/background/background.js",...] },

如何新增一个content.js页面

方法同上，只是需要修改 manifest.json

如何新增一个option页面

1. 添加Option.vue
2. 添加Option.js
3. 在manifest.json中添加配置

"options_ui":
  {
      "page": "option.html",
      "chrome_style": true
  }

总结

对于一个普通js文件，只需要通过在vue.config.js中去打包它就可以。对于一个vue文件，则需要另外创建一个js文件。

那么该如何去添加一个只需要js文件，而不需要html文件的内容呢，如：content.js,background.js。有2种方法。

第一种方法就是使用上面的方法。因为webpack打包后，之所以创建了一个html页面，只是要通过这个html页面去引入它，而我们打包的js文件，已经被打包成一个入口文件了。所以不需要处理什么，在配置中添加好路径即可。

第二种方法就要了解另外一些内容：

o1hy：Vue3-Webpack​zhuanlan.zhihu.com

参考链接https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html#option%E9%80%89%E9%A1%B9%E9%A1%B5

https://juejin.im/post/5ceca3d96fb9a07eea3252f9#heading-0