Chrome插件开发（chrome-extension）

【干货】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",

];

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