前言

一个 Chrome 插件，核心就是 manifest.json 文件，manifest.json 下的属性

• content_scripts 指定inject的脚本列表 js，css    【 injected】

• browser_action 中 default_popup指定popup弹出的html文件路径 【popup】

• background     后台常驻页面 【background】

用户通过 popup 页面操作，inject 分析 DOM ，与 background 通信将数据传给 background 汇总，这个通信是很麻烦的。

vue开发 Chrome 插件优势

▍避免复杂的通信

原生的文件开发插件，需要使用 

chrome.runtime.sendMessage({action:ACTION.START_FETCH,data:xxxx})来传递数据，就那么一两个还是可以的，但是往往我们要做的插件不能是这么简单的。通信多了就麻烦了，vue 就可以解决这个问题，不需要麻烦的通信。

 ▍DOM操作

开发插件不免不了用户交互，原生的 DOM 操作，document.getElementById() 这样来操作是麻烦的，vue 的双向绑定完美的决绝这个问题。

▎打包

vue 和 webpack实时打包 方便

vue初始化项目

前提是你已经安装了脚手架环境，这里不再演示

vue create hello-chrome-vue

这里默认选中的是vue2.0语法 

Please pick a preset: Default ([Vue 2] babel, eslint)
✨ Creating project in E:\dev_workspace\webstorm_workspace\hello-chrome-vue.
🗃 Initializing git repository...
⚙️ Installing CLI plugins. This might take a while...


> yorkie@2.0.0 install E:\dev_workspace\webstorm_workspace\hello-chrome-vue\node_modules\yorkie
> node bin/install.js

setting up Git hooks
done


> core-js@3.19.3 postinstall E:\dev_workspace\webstorm_workspace\hello-chrome-vue\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"


> ejs@2.7.4 postinstall E:\dev_workspace\webstorm_workspace\hello-chrome-vue\node_modules\ejs
> node ./postinstall.js

added 1264 packages from 656 contributors in 52.131s

84 packages are looking for funding
  run `npm fund` for details

🚀 Invoking generators...
📦 Installing additional dependencies...

added 53 packages from 36 contributors in 19.491s

89 packages are looking for funding
  run `npm fund` for details

⚓ Running completion hooks...

📄 Generating README.md...

🎉 Successfully created project hello-chrome-vue.
👉 Get started with the following commands:

 $ cd hello-chrome-vue
 $ npm run serve

 WARN Skipped git commit due to missing username and email in git config, or failed to sign commit.You will need to perform the initial commit yourself.

Successfully 代表安装成功 

删除不需要的文件

由于我们不是做完全的web 项目，vue-cli3 脚手架生成的文件，我们不是都需要， 这里就删除不必要的部分

src/main.js

src/components

src/App.vue (可选) 

安装chrome-ext插件依赖

我们需要修改项目使得 它适用于开发 Chrome 扩展只能使用 vue add chrome-ext  命令来安装，如果使用 yarn add chrome-ext 会发现项目没有任何改变。

安装完之后，package.json 的配置如下

chrome-ext依赖安装对应的就是 vue-cli-plugin-chrome-ext ，整个项目目录如下：

vue.config.js 自动生成配置，backgroud.js 是我后配置的

const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");

// Generate pages object
const pagesObj = {};

const chromeName = ["popup", "options"];

chromeName.forEach(name => {
  pagesObj[name] = {
    entry: `src/${name}/index.js`,
    template: "public/index.html",
    filename: `${name}.html`
  };
});
const background = {
    from: path.resolve("src/background.js"),
    to: `${path.resolve("dist")}/background.js`
}
const plugins =
  process.env.NODE_ENV === "production"
    ? [
          {
              from: path.resolve("src/manifest.production.json"),
              to: `${path.resolve("dist")}/manifest.json`
          },
          {
              ...background
          }
      ]
    : [
        {
          from: path.resolve("src/manifest.development.json"),
          to: `${path.resolve("dist")}/manifest.json`
        },
          {
              ...background
          }
      ];

module.exports = {
  pages: pagesObj,
  configureWebpack: {
    plugins: [CopyWebpackPlugin(plugins)]
  }};

package.json 配置运行脚本

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:dev": "vue-cli-service build --mode development",
    "lint": "vue-cli-service lint",
    "build-watch": "vue-cli-service build-watch"  },

插件使用

npm run build 会生成一个dist， 此文件夹可以直接放到Google浏览器中就行安装

popup 里的目录结构是安装chrome-ext插件后，自动生成的

App.vue里的内容是我自己随便定义的

<template>
    <div class="main_app">
        <button id="changeColor" @click="handleClick">测试</button>
        <input type="text" v-model="value">
    </div>
</template>

<script>
    import chrome from "vue-cli-plugin-chrome-ext";

    export default {
        name: 'app',
        data(){
            return{
              listenerId: null,
              value:'',
            }
        },
        mounted() {
            let that = this;
            this.$nextTick(()=>{
                // When the button is clicked, inject setPageBackgroundColor into current page
                that.listenerId = that.$refs.changeColor.addEventListener("click", async () => {
                    let [tab] = await chrome.tabs.query({active: true, currentWindow: true});
                    chrome.scripting.executeScript({
                        target: {tabId: tab.id},
                        function: that.setPageBackgroundColor,
                    });
                });

            })

        },
        destroyed() {
            this.listenerId && window.removeEventListener(this.listenerId);
        },
        methods: {
            handleClick() {
                this.value = new Date().getMilliseconds();
                chrome.storage.sync.get("color", ({color}) => {
                    this.$refs.changeColor.style.backgroundColor = color;
                });
            },
            setPageBackgroundColor() {
                console.log('setPageBackgroundColor---');
                chrome.storage.sync.get("color", ({color}) => {
                    document.body.style.backgroundColor = color;
                });
            }
        }
    }
</script>

<style>

    button {
        height: 50px;
        width: 50px;
        outline: none;
        margin: 10px;
        border: none;
        border-radius: 2px;
    }

    button.current {
        box-shadow: 0 0 0 2px white,
        0 0 0 4px black;
    }
</style>

这里使用到了 相关的chrome api 需要引入 “@type/chrome” 增加chrome类型声明

npm install --save-d @types/chrome

记得关闭 eslint 语法检测 方便开发

在调试过程中，如果想要打印插件内的日志 ，需要右键点击插件图标单独的点击审核元素，否则直接按F12浏览器 是捕获不到的

最后

项目按照上面的流程走完之后，以后的页面就完全按照Vue的方式开发即可，引入一些好的UI，确实比直接写JS和jquery.js快很多的

点击下方卡片/微信搜索，关注公众号“天宇文创意乐派”(ID:gh_cc865e4c536b)

听说点赞和关注本号的都找到漂亮的小姐姐了哟且年后必入百万呀！！

往期推荐

本文使用 文章同步助手 同步