手寫一個瀏覽器插件, 代理請求 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

 

##接下來, 我們來完成一個瀏覽器請求代理插件

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

<template>
  <div class="main_app">
    <p>代理配置列表</p>
    <el-row v-for="(item, index) in list" :key="index" class="row">
      <el-col :span="4" :offset="6">
        <el-input size="mini" placeholder="請輸入目標字符串" v-model="list[index].api"></el-input>
      </el-col>
      <el-col :span="4" class="col-right">
        <el-input size="mini" placeholder="請輸入替換字符串" v-model="list[index].target"></el-input>
      </el-col>
      <el-col :span="4" class="col-right">
        <el-button size="mini" type="danger" @click="remove(index)">刪除</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="1" :offset="6">
        <el-button @click="add" size="mini" type="primary">添加</el-button>
      </el-col>
      <el-col :span="1">
        <el-button @click="save" size="mini" type="success">保存</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { Message } from 'element-ui'

export default {
  name: 'app',
  data () {
    return {
      list: [
        {
          api: '/api',
          target: ''
        }
      ]
    }
  },
  methods: {
    add () {
      this.list.push({api: '', target: ''})
    },
    remove (i) {
      this.list.splice(i, 1)
    },
    save () {
　　　 // 將配置數據存入storage
      chrome.storage.sync.set({proxyOption: this.list}, function() {
        Message.success('保存成功!')
        chrome.extension.getBackgroundPage().background()
      })
    }
  },
  created () {
    let that = this
    chrome.storage.sync.get(['proxyOption'], function(opts) {
      if (opts.proxyOption) that.list = opts.proxyOption
    })
  }
}

 

 

3. 在public文件夾下新建 background.js 文件, 並在manifest.json文件中配置 

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

  "permissions": [

    "webRequest",

    "webRequestBlocking",

    "<all_urls>",

    "notifications",

    "tabs",

    "storage"

   ]

該文件會在插件啟動后自動執行

 

4. background.js 文件中, 我們可以定義一下代理請求的代碼

// background.js
let proxyOption = []
function background () {
  // 從storage中獲取配置數據, 代理列表和是否開啟代理選項
  chrome.storage.sync.get(['proxyOption', 'isOpen'], function(opts) {
    if (opts.isOpen && opts.proxyOption) {
      proxyOption = opts.proxyOption
      proxy()
    }
  })
}

// 監聽函數, 當符合代理配置的, 重寫請求路徑
function callback (details) {
  let options = proxyOption
  const url = details.url;
  if (options) {
    for (let i = 0; i < options.length; i++) {
      let opt = options[i]
      if (!opt.api || !opt.target) continue
      if (url.indexOf(opt.api) > -1) {
        return { redirectUrl: opt.target + url.split(opt.api)[1] }
      }
    }
  }

  return {cancel: false}
}
// 添加代理監聽方法
function proxy () {
  chrome.webRequest.onBeforeRequest.addListener(
    callback,
    {urls: ["<all_urls>"]},
    ["blocking"]
  )
  // alert(chrome.webRequest.onBeforeRequest.hasListeners())
}
// 移除代理監聽
function stopProxy () {
  chrome.webRequest.onBeforeRequest.removeListener(
    callback,
    {urls: ["<all_urls>"]},
    ["blocking"]
  )
  // alert(chrome.webRequest.onBeforeRequest.hasListeners())
}

background()

這里注意, chrome.webRequest.onBeforeRequest.removeListener的參數不能是匿名函數, 否則無法移除監聽

 

 

5. 現在, 我們進入popup/App/App.vue, 編寫插件使用頁面

<template>
  <div class="main_app">
    <div class="row" @click="toggleProxy">
      <i :class="state ? 'el-icon-check' : 'el-icon-close'"></i><span>{{state?'已開啟':'已關閉'}}</span>
    </div>
    <div @click="toOptions" class="row"><i class="el-icon-setting"></i> <span class="setting">設置</span></div>
  </div>
</template>

<script>

export default {
  name: 'app',
  data () {
    return {
      state: false
    }
  },
  methods: {
    toggleProxy () {
      this.state = !this.state
      let that = this
      chrome.storage.sync.set({ isOpen: this.state }, function() {
　　　　// 調用background.js中的代理方法
        that.state ? chrome.extension.getBackgroundPage().background() : chrome.extension.getBackgroundPage().stopProxy()
      })
    },
    toOptions () {
      window.open('./options.html')
    }
  },
  created () {
    let that = this
    chrome.storage.sync.get(['isOpen'], function (opts) {
      that.state = opts.isOpen
    })
  }
}

 

 

6.至此, 我們就可以進入打包流程, npm run build, 將dist文件改名后拖入 chrome, 然后在瀏覽器中,可以導出為crx格式文件

 

 

源碼地址  https://github.com/wenfangcao/proxyCrx 

附贈學習文檔: 

 　　vue-cli3開發Chrome插件實踐 - 掘金

       GitHub - sxei/chrome-plugin-demo: 《Chrome插件開發全攻略》