【干货】Chrome插件(扩展)开发全攻略（详解参考文章）

https://blog.csdn.net/weixin_33762321/article/details/85913723

以上介绍是chrome详细规则说明，如果想在项目中使用vue等插件，最好用框架做。

我是使用的vue脚手架搭建的项目，详细说下步骤和问题解决

1、vue 安装

参考网站：https://cn.vuejs.org/v2/guide/installation.html

# 最新稳定版 $ npm install vue

2、vue 启动，通过vue框架创建chrome插件项目

启动：vue ui  

按步骤创建好项目后，添加插件，我使用的插件是：vue-cli-plugin-ui-chrome-extension

建议安装勾选内容

 

3、开发过程注意事项

3.1、使用ui项目组件，但是页面没有识别

使用每个ui组件，都需要做下导入

import {

  Card,

  Button,

  Input,

  Form,

  FormItem

} from 'element-ui';

Vue.use(Card);

Vue.use(Button);

Vue.use(Input);

Vue.use(Form);

Vue.use(FormItem);

3.2、signalR 使用

直接安装微软官方的

命令：npm install @microsoft/signalr

import * as signalR from "@microsoft/signalr";

        //建立连接
        this.connection = await new signalR.HubConnectionBuilder()
            .withUrl(`socket url`)
            .configureLogging(signalR.LogLevel.Warning)
            .build();

        await this.connection.start();
        console.log("connected");
        //打印消息 
        //监控，消息触发
        var that = this;
        this.connection.on("SendMsg", msg => {
            console.log(msg);
        })

3.3、axios（url请求）

命令：npm i axios

import axios from 'axios';

 var res = await axios.post(`url`, {
                msg:"msg",
                Method:"send"
            })

3.4、所有的开发标准需要按vue的开发标准开发，最终编译会成chrome要求的html

<a href="#" id="open_background" v-on:click="open_background">打开background</a>

4、配置文件参考

{
  "manifest_version": 2,// 清单文件的版本，这个必须写，而且必须是2
  "name": "chromemessage",// 插件的名称
  "description": "消息组件",// 插件描述
  "version": "0.0.1",// 插件的版本
  "icons": {// 图标，一般偷懒全部用一个尺寸的也没问题
    "16": "img/icon.png",
    "48": "img/icon.png",
    "128": "img/icon.png"
  },
  "background": {// 会一直常驻的后台JS或后台页面
    // 2种指定方式，如果指定JS，那么会自动生成一个背景页
    // "page": "background.html"
    "scripts": [
      "background.js"
    ]
  },
   浏览器右上角图标设置，browser_action、page_action、app必须三选一
  "browser_action": {
    "default_title": "这是个消息组件",
    "default_popup": "popup.html",
    "default_icon": "img/icon.png"
  },
  // 需要直接注入页面的JS
  "content_scripts": [
    {
      //"matches": ["http://*/*", "https://*/*"],
			// "<all_urls>" 表示匹配所有地址
      "matches": [
        "*://*.baidu.com/*"
      ],
      "css": [// JS的注入可以随便一点，但是CSS的注意就要千万小心了，因为一不小心就可能影响全局样式
        "css/content.css"
      ],
      "js": [// 多个JS按顺序注入
        "js/content.js",
        // "js/jquery-1.8.3.js",
         "content-script.js"
      ],// 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle
      "run_at": "document_start"
    }
  ],
  // 权限申请
  "permissions": [
    "contextMenus",// 右键菜单
    "tabs",// 标签
    "notifications",// 通知
    "webRequest", // web请求
    "webRequestBlocking",// 阻塞式web请求
    "storage",// 插件本地存储
    "http://*/*",// 可以通过executeScript或者insertCSS访问的网站
    "https://*/*"// 可以通过executeScript或者insertCSS访问的网站
  ],
  // 普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的
  "web_accessible_resources": [
    "inject.js",
    "fonts/*"
  ],
  // 插件主页，这个很重要，不要浪费了这个免费广告位
  "homepage_url": "https://www.baidu.com",
  "options_page": "options.html",
	"options_ui":
	{
		"page": "options.html",
		"chrome_style": true
  },
  // 覆盖浏览器默认页面
	"chrome_url_overrides":
	{
    // 覆盖浏览器默认的新标签页
		"newtab": "customertab.html"
  },
  // Chrome40以前的插件配置页写法
	"options_page": "options.html",
	// Chrome40以后的插件配置页写法，如果2个都写，新版Chrome只认后面这一个
	"options_ui":
	{
		"page": "options.html",
		// 添加一些默认的样式，推荐使用
		"chrome_style": true
  },
  // 向地址栏注册一个关键字以提供搜索建议，只能设置一个关键字
	"omnibox": { "keyword" : "go" },
  "default_locale": "zh_CN",
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

5、vue.config.js（插件发布配置文件）

默认系统只打包，popup.html.options.html 两个文件

如果需要生成其他html文件，需要自己配置

const chromeName = [

  "popup",

  "options",

  "background",

  "customertab",

];

其他的文件生成规则，可以参考此文件内容。