Chrome V3版开发教程使用Vue 3.x+Ant构建项目

news2024/11/27 18:33:36

简介

​ Google在2023年将会遗弃V2版本，而目前在CSDN平台上的大部分Chrome插件的开发教程都是基于V2版本的，V3版本和V2的版本上还是有很大的区别，就比如manifest.json中的写法差距就很大，所以对于即将要开发Chrome插件的小伙伴来说去写V2版本目前也是可以用的，但是年末就要在经历一波V2转V3版本的迭代。所以不如一步到位直接进行V3版本的开发。而本人又比较偷懒，不愿意使用原生写法去写插件，我所采用的技术是Vue3+Ant Design Vue目前主流技术进行开发。

项目初始化

项目环境

C:\Users\zhizhuo>node -v
v14.19.0
C:\Users\zhizhuo>vue -V
@vue/cli 5.0.8

使用Vue创建项目

vue create my-chrome-vue

image-20230116143719610

这里我直接使用了Vue3的默认选项进行项目创建

image-20230116143927472

先run起来看一下项目是否创建成功。

image-20230116144129321

接下先引入一下Ant Design Vue然后在run起来看一下是否正常引入

npm install ant-design-vue@next --save

然后改造main.js引入一下第三方组件，然后在src/App.vue中使用查看一下是否成功引入

//main.js
import { createApp } from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
const app = createApp(App)
app.use(Antd)
app.mount('#app')


//App.vue
<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Welcome to Your Vue.js App" />
  <a-button type="primary">Primary Button</a-button>
  <a-button>Default Button</a-button>
  <a-button type="dashed">Dashed Button</a-button>
  <a-button type="text">Text Button</a-button>
  <a-button type="link">Link Button</a-button>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
  name: "App",
  components: {
    HelloWorld,
  },
};
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

image-20230116150311822

成功引入进来了，接下来就是要修改项目目录以及vue，webpack配置

项目目录修改

现在的目录

├─public
└─src
    ├─assets
    └─components

改造后的目录

├─public
└─src
    ├─assets
    ├─background
    ├─components
    ├─options
    │  └─components
    ├─plugins
    └─popup
        └─components

image-20230116152057603

整个src目录的结构，下面修改一个vue.config.js文件，首先安装插件copy-webpack-plugin用来拷贝文件

npm install copy-webpack-plugin -S

vue.config.js文件内容

const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");

// 复制文件到指定目录
const copyFiles = [
 {
     from: path.resolve("src/plugins/manifest.json"),
     to: `${path.resolve("dist")}/manifest.json`
   },
   {
     from: path.resolve("src/assets"),
     to: path.resolve("dist/assets")
   },
   {
     from: path.resolve("src/plugins/inject.js"),
     to: path.resolve("dist/js")
   }
];

// 复制插件
const plugins = [
   new CopyWebpackPlugin({
     patterns: copyFiles
   })
];

// 页面文件
const pages = {};
// 配置 popup.html 页面
const chromeName = ["popup"];

chromeName.forEach(name => {
   pages[name] = {
     entry: `src/${name}/main.js`,
     template: `src/${name}/index.html`,
     filename: `${name}.html`
   };
});

// 配置 popup.html 页面
const ChromeName = ["options"];

ChromeName.forEach(name => {
   pages[name] = {
     entry: `src/${name}/main.js`,
     template: `src/${name}/index.html`,
     filename: `${name}.html`
   };
});

module.exports = {
 pages,
 productionSourceMap: false,
 // 配置 content.js background.js
 configureWebpack: {
  entry: {
   background: "./src/background/main.js"
  },
  output: {
   filename: "js/[name].js"
  },
  plugins
 },
 // 配置 content.css
 css: {
  extract: {
   filename: "css/[name].css"
  }
 }
}

在plugins/inject.js中写入

console.log("This is injected into")

在background/main.js中写入

console.log('This is background page');

在plugins/manifest.json中写入

{
    "description": "create by zhizhuo ;use vue3 and ant-vue to build this project",
    "manifest_version": 3,
    "name": "my-chrome-vue",
    "version": "1.0.0",
    "action": {
        "default_icon": {
            "19": "assets/logo.png",
            "38": "assets/logo.png"
        },
        "default_popup": "popup.html",
        "default_title": "my-chrome-vue"
    },
    "background": {
        "service_worker": "js/background.js"
      },
    "content_scripts": [
        {
            "matches": [
                "http://*/*",
                "https://*/*"
            ],
            "css": [
                "css/chunk-vendors.css"
            ],
            "js": [
                "js/chunk-vendors.js",
                "js/inject.js"
            ],
            "run_at": "document_end"
        }
    ],
    "host_permissions": ["http://*/*", "https://*/*"],
    "permissions": [
        "contextMenus",
        "tabs",
        "notifications",
        "webRequest",
        "storage"
    ],
    "content_security_policy": {
        "extension_pages": "script-src 'self'; object-src 'self'",
        "sandbox": "sandbox allow-scripts; script-src 'self'; object-src 'self'"
    },
    "web_accessible_resources": [
        {
            "resources":["js/inject.js"],
            "matches":[
                "http://*/*",
                "https://*/*"
            ]
        }
    ]
}

options和popup文件下面的main.js和index.html,还有当前目录下面的components文件下面的App.vue文件都是项目初始化生成的main.js和App.vue还有public/index.html文件移动过来的

页面文件就是正常的Vue+Ant的开发即可，修改完成后直接使用命令

npm run build

image-20230116153359146

直接打包，然后在chrome的插件中添加即可，*记得打开chrome插件的开发者模式

image-20230116153801484

image-20230116153858550

插件成功导入，并且运行ok，ant的组件也完全引入

剩下的时候开发查看官网的开发文档即可

*https://developer.chrome.com/docs/extensions/mv3/

manifest.json V3版本详细注释

{
  //chrome插件的版本
  "manifest_version": 3,
  
  //插件名称
  "name": "ChromeName",
  
  //插件版本号
  "version": "1.0.0",
  
  //插件描述，Plugin_Desc是多语言的key，chrome插件支持多语言配置，__MSG_xxx__
  "description": "__MSG_Plugin_Desc__",
  
  //默认语言(如果当前浏览器设置的语言不存在多语言配置文件，则默认中文)，Chrome插件的多语言只能根据当前浏览器设置的语言来设定，无法通过代码更改语言
  "default_locale": "zh_CN",
  
   //内容安全政策，V2的value是字符串，V3是对象
  "content_security_policy": {
    //原文：此政策涵盖您的扩展程序中的页面，包括 html 文件和服务人员；具体不是很明白，但是参数值得是self，即当前自己
    "extension_pages": "script-src 'self'; object-src 'self'",
	
	//原文：此政策涵盖您的扩展程序使用的任何[沙盒扩展程序页面]；具体不是很明白，但是参数值得是self，即当前自己
    "sandbox": "sandbox allow-scripts; script-src 'self'; object-src 'self'"
  },
  
   //key，发布插件后会给一个key，把那个key的值放这里
  "key": "xxx",
  
  //icon，浏览器扩展程序管理里面的图标、浏览器右侧插件图标点开的下拉菜单展示的已开启插件的图标、以及插件详情页的标签卡的那个小图标
  "icons": {
    "16": "static/img/logo-16.png",
    "19": "static/img/logo-19.png",
    "38": "static/img/logo-38.png",
    "48": "static/img/logo-48.png",
    "128": "static/img/logo-128.png"
  },
  
  //背景页，后台脚本引入，v2是scripts:[xxx,xxx]，可以引入多个js文件，v3是service_worker：'xxx'，只能引入一个js，v3版最大的改动应该就是这里了，扩展程序管理界面的插件的那个“背景页”也将变成“Service Worker”，改动之后background.js将和浏览器完全分离，即无法调用window和ducoment对象
  //可以看介绍：
  //1、//developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/#background-service-workers；
  //2、//developer.chrome.com/docs/extensions/mv3/migrating_to_service_workers/
  
  "background": {
    "service_worker": "background.js"
  },
  
  //注入脚本，值是个数组对象，可以有多个对象
  "content_scripts": [
    //每个对象代表一个注入的配置
    {
	    //需要在指定页面注入的js脚本文件
      "js": [
        "xxx.js",
        "xxx.js",
      ],
	   //需要注入js脚本文件的指定页面
      "matches": [
        "https://*.csdn.net/*",
        "https://*.xxx.com/*"
      ],
       //不允许注入js脚本文件的指定页面
 	   "exclude_matches": ["https://*.xxx.com/*"],
	   //什么时候注入的js脚本，document_start=页面加载开始时，document_end=页面加载结束时
      "run_at": "document_end"
    }
  ],
  
  //API权限，需要使用某些API时需要设置该API权限才行
  "permissions": [
	  "contextMenus", //自定义创建右键菜单API
	  "tabs", //tab选项卡API
	  "storage", //缓存API
	  "webRequest", //监听浏览器请求API
	  ...
  ],
  
  //主机权限，在背景页backgroud.js里面或者popup页面走请求时，请求域名的白名单权限，如果没添加的则请求会失败
  "host_permissions": [
    "https://*.csdn.net/*",
    "https://*.xxx.com/*"
  ],
  
  //动作API，原文：在 Manifest V2 中，有两种不同的 API 来实现操作： `"browser_action"` 和 `"page_action"` . 
  //这些 API 在引入时扮演了不同的角色，但随着时间的推移它们变得多余，因此在 Manifest V3 中，我们将它们统一为单个 `"action"` API； 
  //配置上action:{}，可以是空对象，但是action这个配置得有，不然的话扩展程序管理界面的“Service Worker”将显示无效，
  //且无法点开“Service Worker”的开发者工具控制台以及点击插件图标时触发的这个方法会报错：chrome.action.onClicked.addListener，
  "action": {

  },
  
  //通过网络访问的资源，v2是提供一个数组，v3得提供数组对象，每个对象可以映射到一组资源到一组 URL 或扩展 ID
  "web_accessible_resources": [{
  	//允许访问的资源路径，数组传多个参数
    "resources": ["*/img/xxx.png", "*/img/xxx2.png"],
	
	//允许访问资源的页面
    "matches": [
      "https://*.csdn.net/*",
      "https://*.xxx.com/*"
    ]
  }]
}

项目完整Demo源代码地址

*https://github.com/zhizhuoshuma/my-chromev3-vue-ant-plugins

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/166809.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

机器学习的相关概念与建模流程

机器学习的相关概念与建模流程

文章目录一、机器学习简介1. 机器学习的相关定义2. 一次简单的机器学习任务&#xff1a;鸢尾花分类二、数据与数据集相关概念1. 数据与数据集2. 特征与标签3. 连续变量和离散变量4. 模型类型三、机器学习建模一般流程1. 提出基本模型2. 确定损失函数3. 根据损失函数性质&#x…
阅读更多...
Servlet —— Smart Tomcat,以及一些访问出错可能的原因

Servlet —— Smart Tomcat,以及一些访问出错可能的原因

JavaEE传送门JavaEE HTTPS —— HTTPS的加密方式 Servlet —— Tomcat, 初学 Servlet 程序 目录Smart TomcatSmart Tomcat 的下载配置 Smart Tomcat 插件访问出错404405500无法访问此网站Smart Tomcat 在上一篇文章中, 我们手动拷贝 war 包到 Tomcat 中的过程比较麻烦, 我们…
阅读更多...
解析 json，整理分散数据入库

解析 json，整理分散数据入库

【问题】在 json 文件中有以下内容&#xff1a;现在需要将 json 中分散的数据整理入库。“LIST”中包含多个子孙记录&#xff0c;主要目标是”GROUPNAME”、”SERVICES”。“GROUPNAME”值、”SERVICES”中的键编号对应了数据库表 _groups 的 Groupname 和 ID。“SERVICES”每个…
阅读更多...
PicGo+Gitee+Typora实现markdown图床

PicGo+Gitee+Typora实现markdown图床

PicGoGitee实现markdown图床 情景概要 写博客的时候&#xff0c;总是需要插入图片的&#xff0c;图片存在本地的话上传到博客网站去就没法显示了 就算一个图一个图的复制粘贴上去&#xff0c;想移植到其他的博客网站&#xff0c;图就会失效&#xff0c;我们就需要图床 图床 …
阅读更多...
系分 - 案例分析 - 项目管理

系分 - 案例分析 - 项目管理

个人总结&#xff0c;仅供参考&#xff0c;欢迎加好友一起讨论 文章目录系分 - 案例分析 - 项目管理时间管理进度管理典型例题题目描述参考答案系分 - 案例分析 - 项目管理 时间管理 进度管理 ① 项目进度管理包括为管理项目按时完成所需的7个过程&#xff0c;具体为&#xf…
阅读更多...
MyBatis-Plus数据安全保护(字段脱敏)

MyBatis-Plus数据安全保护(字段脱敏)

项目创建POM依赖 <dependency><!--MyBatis-Plus 企业级模块--><groupId>com.baomidou</groupId><artifactId>mybatis-mate-starter</artifactId><version>1.2.8</version> </dependency> YML配置 spring:datasource:# 配…
阅读更多...
熟悉Spring框架？Spring容器使用流程，注解 你真的会吗？（让你一下通透~）

熟悉Spring框架？Spring容器使用流程，注解 你真的会吗？（让你一下通透~）

目录 前言 一、ApplicationContext 和 BeanFactory 的区别 二、主要工作流程 三、开发步骤 3.1、创建Maven项目 3.2、创建Spring的核心配置文件 3.3、Spring注解 3.3.1、类注解 3.3.2、五大类注解的关系 3.3.3、方法注解 3.3.4、属性注入 3.3.5、五大注解关系图&am…
阅读更多...
【03】FreeRTOS的任务创建（静态和动态）和删除

【03】FreeRTOS的任务创建（静态和动态）和删除

目录 1.任务创建和删除的API函数 1.1动态创建任务函数 1.1.1实现动态创建任务流程 1.1.2任务控制块结构成员介绍 1.2静态创建任务函数 1.2.1实现静态创建任务流程 1.3任务删除函数 1.3.1删除任务流程 2.任务创建和删除&#xff08;动态方法&#xff09; 2.1宏confi…
阅读更多...
一文掌握项目估算工具及方法【管理有度13】

一文掌握项目估算工具及方法【管理有度13】

01为什么要做估算我们的业务方经常抱怨资源不足&#xff0c;团队需求的吞吐率太低&#xff0c;资源和需求量的不匹配是一个永恒的话题&#xff0c;解决方案应该不只是增加资源&#xff0c;增加了资源如果需求的输入量不能稳定保证&#xff0c;那资源就会处于持续浪费的状态当中…
阅读更多...
项目管理：项目控制的三个基本原则

项目管理：项目控制的三个基本原则

要记住项目控制是怎么回事&#xff0c;一个简单方法是思考PDA。PDA是指预防、检测和行动。让我们仔细看看项目控制的这些基本原则。 1、预防 就像你自己的健康一样&#xff0c;健康的秘诀是加强你的免疫系统&#xff0c;尽量减少与有害物的接触。换句话说&#xff0c;就是不…
阅读更多...
谷歌账号被封怎么办？谷歌账号解封申诉步骤请收好！

谷歌账号被封怎么办？谷歌账号解封申诉步骤请收好！

谷歌账号有多重要&#xff1f;相信很多跨境人和社媒营销人都会深有感悟的&#xff0c;谷歌账号可以说是国外互联网的一个通行证&#xff0c;国外非常多的网站都是支持使用谷歌账号登录的。 谷歌账号对企业进军海外市场是非常重要的存在&#xff0c;然而谷歌账号一旦操作不当是很…
阅读更多...
Go语言变量

Go语言变量

Go语言变量 参考资料主要来源于菜鸟教程。 参考链接&#xff1a;https://blog.51cto.com/u_15230485/2821028 变量来源于数学&#xff0c;是计算机语言中能存储计算结果或能表示值抽象概念。 变量可以通过变量名访问。 Go语言变量名由字母、数字、下划线组成&#xff0c;其中首…
阅读更多...
Vector和ArrayList对比

Vector和ArrayList对比

本文会对ArrayList和Vector进行分析&#xff0c;为什么会关注这两个类&#xff0c;主要是因为他们拥有相同的继承结构&#xff0c;接下来就来探索下这两个类实现和效率的异同。 继承结构 可以看到&#xff0c;Vector和ArrayList都实现了List和RandomAccess接口&#xff0c;都继…
阅读更多...
C语言——常用字符串库函数的介绍

C语言——常用字符串库函数的介绍

文章目录常用字符串库函数介绍1.1关于字符串简介1.2:[strlen库函数](https://legacy.cplusplus.com/reference/cstring/strlen/?kwstrlen)1.2.1strlen函数的功能1.2.2strlen函数的参数和返回类型1.2.3strlen函数使用注意事项1.2.4strlen的使用1.2.5模拟实现strlen函数1.3:[str…
阅读更多...
喜讯！酷开科技荣获中国国际广告节三项殊荣！

喜讯！酷开科技荣获中国国际广告节三项殊荣！

近日&#xff0c;由中国广告协会主办的第29届中国国际广告节AD Fair媒企交易会在厦门国际会展中心隆重举行。其中备受瞩目的三大盛典&#xff1a;广告主金伙伴盛典、广告主盛典、媒企盛典&#xff0c;是广告业必不可少的荣誉殿堂&#xff0c;他们不仅是对中国广告传媒业各方主体…
阅读更多...
【C++升级之路】第七篇：STL简介

【C++升级之路】第七篇：STL简介

&#x1f31f;hello&#xff0c;各位读者大大们你们好呀&#x1f31f; &#x1f36d;&#x1f36d;系列专栏&#xff1a;【C学习与应用】 ✒️✒️本篇内容&#xff1a;从整体上对STL进行粗略介绍 &#x1f6a2;&#x1f6a2;作者简介&#xff1a;计算机海洋的新进船长一枚&…
阅读更多...
GTD之初总结

GTD之初总结

思维导图 GTD&#xff1a;GTD是“Getting Things Done”的缩写&#xff0c;是由效率管理专家戴维艾伦&#xff08;David Allen&#xff09;开创的一套完整个人时间管理系统 既高效地处理工作事务&#xff0c;又能品味生活的快乐滋味&#xff0c;达到心如止水的轻松感 GTD工作…
阅读更多...
docker中基础内容

docker中基础内容

docker中的核心概念 1、镜像&#xff1a; Image 定义&#xff1a;一个镜像就代表一个软件&#xff0c;比如&#xff1a;mysql 镜像、redis 镜像、es镜像等等2、容器&#xff1a; Container 定义&#xff1a;一个镜像运行一次就会生成一个容器&#xff0c;容器就是一个运行的软…
阅读更多...
托普云农在创业板IPO过会：拟募资约3亿元，前三季度利润下滑8%

托普云农在创业板IPO过会：拟募资约3亿元，前三季度利润下滑8%

近日&#xff0c;深圳证券交易所披露的信息显示&#xff0c;浙江托普云农科技股份有限公司&#xff08;下称“托普云农”&#xff09;获得创业板上市委会议通过。据贝多财经了解&#xff0c;托普云农于2022年6月24日递交招股书并获得受理。 本次冲刺创业板上市&#xff0c;托普…
阅读更多...
分享36个C源码，总有一款适合您

分享36个C源码，总有一款适合您

C源码 分享36个C源码&#xff0c;总有一款适合您 下面是文件的名字&#xff0c;我放了一些图片&#xff0c;文章里不是所有的图主要是放不下...&#xff0c;大家下载后可以看到。 源码下载链接&#xff1a;https://pan.baidu.com/s/1WTLgtQ2J5gfZdj-LMEYnEA?pwdnimr 提取码…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023