手写一个浏览器插件, 代理请求 proxyCrx

1.初始化一个vue脚手架, 安装 vue-cli-plugin-chrome-ext 插件
  vue create '项目名'
  yarn add vue-cli-plugin-chrome-ext 按提示完成配置


2. 很标准的前端项目, popup是插件的预览页, options是后台页面, 路径为 chrome-extension://插件id/options.html

手写一个浏览器插件, 代理请求 proxyCrx_第1张图片

 

##接下来, 我们来完成一个浏览器请求代理插件

1.首先, 引入组件化引入element-ui, 防止包过大

import Vue from "vue";
import AppComponent from "./App/App.vue";

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

import {
  Switch,
  Button,
  Icon
} from 'element-ui';
Vue.use(Switch).use(Button).use(Icon);

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

 

 

2. 首先进入options/App/App.vue  完成配置页, 将代理配置存入storage




                    
                    

你可能感兴趣的:(手写一个浏览器插件, 代理请求 proxyCrx)