create-vue-chrome-ext

create-vue-chrome-ext
├─ dist            # 打包目录
├─ public          # 静态资源文件（该文件夹不会被打包）
│  ├─ img				# 存放插件图标，亦可存放图片资源
│  └─ index.html        # html模板	
├─ src
│  ├─ util              # 工具包	    
│  ├─ background        # chrome插件的background页面	    
│  ├─ content           # chrome插件的content_script
│  ├─ pages              
│  │  ├─ popup            # popup页面
│  │  │  ├─ main.js		    # popup入口文件	
│  │  │  └─ App.vue	 	    # popup主组件
│  │  └─ options          # options选项页面，可以不需要，按照项目需求进行删减。
│  │     ├─ main.js		    # options选项页入口文件
│  │     └─ App.vue	      	# options主组件 
│  └─ manifest.json		  # chrome插件文件清单，必须有这个文件
├─ .browserslistrc 		  # 浏览器兼容配置
├─ .gitignore             # 忽略 git 提交
├─ webpack.config.js      # webpack配置文件
├─ LICENSE                # 开源协议文件
├─ package-lock.json      # 依赖包包版本锁
├─ package.json           # 依赖包管理
└─ README.md              # README 介绍

# clone the project from gitee
git clone https://gitee.com/zengGking/create-vue-chrome-ext
# clone the project from github
git clone https://github.com/zengGking/create-vue-chrome-ext

# enter the project directory
cd create-vue-chrome-ext

# install dependency
npm install

# develop
npm run dev

# production
npm run build

# loading the dist folder with chrome 

//webpack.config.js
module.exports = {
    entry: {
        popup: "./src/view/popup/main.js",
        //options: './src/view//options/main.js', 删除
    },
    //...
    plugins:[
       //...
       //	删除以下内容
      //  new HtmlWebpackPlugin({
      //       title: 'Options_html',
      //       filename: 'html/options.html',
      //       template: path.resolve(__dirname, 'public/index.html'),
      //       chunks: ['options']
      //   }),
    ]
}

// background.js
import { Message } from "../utils/Message";
const message = new Message();
message.listening('hellow', (data) => {
    console.log('contentjs传来的数据1：', data);
})
message.listening('hellow', (data)=>{
    console.log('contentjs传来的数据2：', data);
})
message.listeningResponse('sum', (data) => {
    //需要返回响应数据
    console.log('sum1');
    return data.data.reduce((pre, cur) => pre + cur, 0)
})

// content.js
import { Message } from "../utils/Message";
const message = new Message()
message.send('hellow', { msg: 'hellow1' })
message.request('sum', { data: [1111, 2222, 3333, 4444, 5555, 6666] }).then((res) => {
  console.log('求和结果：', res);
})

// background.js
import { HttpServer } from "./HttpServer";
const httpServer = new HttpServer();//开启http服务，content_script才能进行http请求
httpServer.start()

//content.js
import { HttpClient } from "./HttpClient";
const httpClient = new HttpClient()
httpClient.request("https://wenku.baidu.com/gsearch/rec/homerec?pn=1&rn=16", { method: 'get', params: { limit: 10 } })
    .then((res) => {
      console.log('http测试', res);
  	})

// 打开\node_modules\axios\package.json添加以下配置
{
  ...
  "exports": {
    ...
    "./lib/*":"./lib/*"
  },
}

//打开\node_modules\@vespaiach\axios-fetch-adapter\index.js修改为以下内容
import axios from 'axios';
import settle from 'axios/lib/core/settle';
import buildURL from 'axios/lib/helpers/buildURL';
import buildFullPath from 'axios/lib/core/buildFullPath';
import utils from 'axios/lib/utils';
import browser from 'axios/lib/platform/browser'
const { isUndefined, isFormData } = utils;
const { isStandardBrowserEnv } = browser