beikeshop插件开发教程

有小伙伴咨询说，这个浏览器插件怎么开发？其实插件开发特别简单啊，呃，一个小时你就可以搞一个插件啊，那么其实最核心的就是一个配置文件，那么这个配置文件呢？几行代码我们就可以实现一个插件的一个功能 哎，呃，在此我想说一下，在我做这个项目的过程当中，有好多小伙伴吐槽说，我这个格子周面你就不应该做成网页，对不对？你就应该做成浏览器的插件啊，其实我也知道，那么为什么我一开始要把它做成网页呢？就是因为 我的插件版本也是需要依赖网页版本，那么我有了网页版本以后啊，第一，我网页版本可以先行去运行，去推广，让大家可以去使用，对吧？二、有了网页版本， 我看很快就可以去开发一个插件版本，怎么开发呢？在这个浏览器插件里边啊，他可以去重写啊，浏览器的起始页，或者说浏览器的历史记录页啊，那么我有了我的网页版本，我只需要把它配置成为 啊重写浏览器的七十亿就 ok 了，哈哈，所以说这个 我为什么开始要做这个网页版本的啊？还有如果说你要利用浏览器插件所提供一些 api， 利用浏览器的一些相关的能力，那么我只需要再次技术下，再再去额外去开发一些啊 功能就 ok， 对吧？啊，那么大体上主要的还是跟外部版是同一套代码 啊，所以我起一套代码，我就可以既满足我们的外部版，又满足我的插件版本，这就是我的插件版本为什么能够快速上线的一个原因，那么在呃，明天晚上啊，咱们格子桌面呃就 能够正式恢复啊，那么也在本周内我也争取让我们的科鲁姆插件啊能够上线跟大家见面。

第四课呢，我们来讲一下浏览器插件的一些常见的操作，还有可以实现的功能。然后想要查看更具体的内容的话，可以访问对应的官方文档。首先是对于浏览器插件工具栏图标的一些功能。 首先我们可以在 manifest their jason 里面去指定我们工具栏的默认图标，或者可以使用 api 在程序中进行动态的修改。 我们还可以设置插件的 action badge， 也就是在插件右下角设置一些内容，但最多只能显示四个字符。 还有 pop up 页面，也就是点击图标后弹出的一个页面。 pop up 页面也可以由 a p i 进行动态的设置。 to tip 的话，指的是鼠标悬浮在插件图标上时向我们展示的一些说明性的内容。当然，我们也可以去监听点击图标的事件，去进行一些定制化 化的操作。我们还可以去设置 only box， 从而实现一些快捷的操作。比如我在这里就设置 t t 为 only box 的关键字，并监听其输入。 所以当我在浏览器地址栏输入 t t 的时候，就会唤起插件的功能。我们还可以设置浏览器的右键菜单，从而实现一些操作，比如快速搜索选定内容的。 我们还可以设置 override 配置，去自定义一些默认的页面，比如说新标签页等。另外一个比较常用的是 notifications， 我们可以调用 notifications api 去调用系统的托盘去通知用户某些信息。 如果我们想从 content strips 中访问扩展的文件，可以调用 chrome their run time their get url 这个 a p i 去获取扩展资源的绝对 url。 值得注意的是，所有 被引用的资源都要在 web sensible resources 中。声明，在开发过程中，我们除了会使用网页的外部 api， 也会使用浏览器的 api， 其中大多数浏览器的 api 都是异部的。所以使用返回的结果有两种方式， 一种是使用回调函数，第二种是使用翼步的操作。需要注意的是，有些 api 的应用需要在 mainly fast permissions 子段中设置对应的权限。

接下来我们就正式讲解 plus 模框架如何进行开发。首先是新建浏览器插件的各种页面，要注意的是接下来的操作都是在原码文件夹下，如果我们之前已经将原码文件夹指向 src 目录， 接下来的操作在 src 文件夹下执行。并且我们在第一次新建扩展页面的时候，需要手动重新刷新插件。 一般常见的浏览器插件页面，比如 pop up， oceans 等都是可以通过插件快速创建的。比如 pop up 页面，我们可以在原码文件夹下创建一个 pop up 点 t s x 四字文件， 或者新建一个 pop up 文件夹，在其中新建一个 index 点 t s x 的文件，最后使用 export default 导出 react 的组件即可。这里我们使用上节课新建的项目做一个演示， 在 s r c 目录下新建一个 pop up 点 t s x 的文件和一个 options 点 t s x 的文件。其中 pop up 页面渲染一个 div， 内容是 pop up plasmo， options 也渲染一个 div， 内容是 options plasma 执行 pnpmdv。 开启开发服务器之后，我们来查看一下刚刚编写的插件，点击插件图标之后弹出了 pop up 页面。接下来打开 options 页面，可以看到这边是 optionster html， 然后这边渲染了 options plasmo。 如果我们想要新建出 pop up， options 等浏览器指定的插件页的话，可以在 plasmo 官方文档查看 type 配置这一页。 具体使用方法是，在原文件夹下新建一个 types 的文件夹，在其中添加一个 t s x 的文件，然后导出默 个人的 react 组建即可。 bless， 某框架会将这些 t s x 的文件打包编译，并且打包在扩展包下的 types 文件夹下。那么如何去使用这些额外的页面？可以参考官方的案例。 我们可以看到在根目录下有一个 taps 文件夹，打开之后有一个 tsx 文件，可以使用 chrome 点 taps 点 create 这个 api 去打开额外的页面。如果想要引用额外页面的路径，比如在 afrim 中插入这个页面， 可以使用 chrome 点 runtime 点 get url 获取到页面的路径。接下来我们讲一下如何使用 plasmo 框架创建新的 service worker。 使用 plasmo 框架新建 service worker 与原声开发类似，只需要在原文件文件夹下新建 background 点 ts 即可。这里我们还是在 src 目录下新建一个 background 点 ts 的文件，在其中使用 console log 输出一个 this is background powered by plasmo。 重新刷新插件之后，来到扩展页的管理页， 点击我们刚刚编写的 target 的 service worker， 这边可以看到已经输出了刚刚的内容。

第二课呢，我们来讲一下浏览器插件的目录结构，所有的浏览器插件都必须在跟目录下有 manifest 点 jason 这么一个文件， 这个文件呢记录了插件的原数据，定义了资源，声明了插件的权限，并且标识了哪些文件在后台或者页面上运行。还有就是 service worker， 稍微是 worker 的作用呢，是处理和监听浏览器事件，相当于是在后台持续运行的脚本，可以使用浏览器的全部 api， 但是不能和页面内容直接交互。 还有就是 content script， content script 是在网页上执行的 java script， 可以读取和修改网页上的动物元素，但只能使用部分的浏览器 a p i。 还有就是插件的页面，插件的页面包括浏览器的图标以及点击后的各种效果，比如 powerpop 页面， options 页面，还有浏览器的其他页面。所有插件的页面都可以使用浏览器的 api。 接下来我们来讲一下 minfex 的的配置。 manifest 的配置有很多，具体的可以参考官方文档，这里只介绍常用的配置。 manifest 所必须的配置有三个，第一个是 manifest version， 它指定了浏览器插件的版本， 这里可以选二或者三，二的话在二三年就会停用，所以这里建议选三。还有一个就是 name， 是插件的名称，还有一个是 version， 是浏览器插件自身叠的 的版本。其他常用的配置，比如 description 是插件的描述，还有 author 是作者的名称。还有 background， 它配置了 service worker 所运行的脚本，还有 options ui， 配置了 options 页面，还有 content scripts， 根据不同的网站， 它会注入不同的 gs 或者是 cs， 还有就是 web a sensible resources， 它配置了 web 的可访问资源。比如我在这个页面插入了个 style 标签，然后引用了 test 点 cs 这个文件，这时就需要在这里进行配置， 还有 host permissions 和 permissions。 其中 host permissions 是与主机权限相关的配置，这里推荐使用同样的配置。还有 permissions， 它是配置了插件 所使用的 a p i 权限，比如储存商家文菜单， cookies 等权限。还有 action， 它是使用 action a p i 去配置插件工具栏的图标以及其图标的功能。比如这里就配置了默认的图标， 根据不同的分辨率配置了不同的图片，这里也配置了一个 pop up 页面。接下来我们进行一个练习，去新建一个简单的浏览器插件。 首先我们要新建一个文件夹，然后在文件夹下新建一个 many fast dear jason 的文件， 然后进行一些配置，然后这里配置了 manifest version， 然后 name， 还有 version， 还有 description， 还有 author， 还有 background， 这里设置了 background。 第二 g s 为 service walker， 然后 后也配置了 options， ui 是 options 点 htm， 然后这里配置了 host permissions 和 permissions。 这里没有进行别的配置，只是为了之后浏览器插件编写做铺垫， 然后这里设置了 action action 设置了 default icon， 然后这里设置了一个 pop up 的页面，这里设置了插件的图标，然后都指向的是这个 image 下面的 icon， 然后 background 里面输出了一个 this is background， 然后这个 options 页面里面渲染了一个 div， 然后里面是 options， 然后 pubab 里面是输渲染了一个 hollow word， 然后我们去浏览器看一下效果。我们到浏览器这边之后，在右上角点击更多工具，然后拓展程序可以进到这个浏览器拓展程序的后台， 然后需要打开开发者模式，加载以解压的这个扩展程序，然后选择刚刚新建的文件就好。呃，这边已经导入，然后可以看到我们刚刚设置插件的名称， 然后版本描述，还有刚刚设置的图标，然后如果想固定在工具栏的话，可以点击这个，之后选择固定就好。然后我们来查看一下 service worker， 这边已经输出了 this is background， 然后 pop up 页面的话是点击这个插件图标会有一个 hollow word 的一个小的页面，然后 options 页面的是 options 页面的话是右键，然后这里有个选项， 可以看到已经到了这个 options 的页面，然后我们放大一下，这边已经渲染了 options， 然后这就是一个最简单的呃，浏览器插件。

好，欢迎继续学习正广学 vsto 火箭速升班，那么之前这节课本来打算放到后面啊，但是经过这段时间第一张课程的学习，发现大家的开发环境实在是过于五花八门啊，什么 vs 二零一七加 v 七啊，什么 v 零七加二零一九，二零二二，各种组合都有， 导致有些同学复制模板的形式开发了，他就总是会遇到一些困难啊。那我们把这个从 最原始的啊 vs 里面新建项目呢，同时加载我们的相模板的方法啊。嗯，加载我们 vst 五八八零框架的方法，先把它提到 dj 来讲，这样呢， 兼容性提高一点啊。我们先打开二零二二这个啊，二零一九也是一样的二零一七啊，创建项目啊，注意这个地方上面都有搜索啊，不管你是属于哪个版本都有搜索啊， 如果不用搜索的话，你要这样去找啊，找到这个这三个选项啊，我也是 q， 这二零一七号可能是在左边那有一个这个展开的目录也是选到这三个项目啊，反正三个级别吧，然后上面我们搜 vsto。 嗨，这说错了啊， vsto 你看我们是 vdto， 他都给你找出来了啊。这个啊，有的同学可能看到二零一零以上的版本啊，那么这里选二零一三版本兼容性好一点啊，他是乡下兼容的好，呃，二零一三的时间是兼容到二零一六的二零呃，这个三六五都可以啊。 好，到这里的话，注意啊，你默认的话可能是这么个目录啊，这个是 c 盘的默认目录啊，一般来说我们都统一放在第一盘的 vs 七八八零文件下面，文件夹下面建一个普尔杰克的项目啊，这样呢，我们大家所有人的目录保持一致啊，特别是跟我的保持一致， 这样你在学习啊，复制代码呀，这个看教程的时候就不会说还是转来转去啊。我有实在是没办法的话，那你就见到其他一个一盘啊，还不盘什么的，但是这个目录哎，尽量保存一致啊。好，这个名字可以改啊，那我们这里就不改啊， 好框架的话啊，我的教程是使用四点五啊，因为有很多老机器啊，无音器啊，他你去装个四点五以上的，他还要去装，装这个点烂的就比较麻烦。 嗯，如果你不嫌弃让用户多装一次，或者你的用户都是为十以上的话，你可以选四十八啊，四十六以上的版本都差不多啊，这个影响不大。在 呃 office 开发上面的话，四十五以上基本上都够用的啊。如果你是极端用户， xp 的话，你要用这个点亮的四啊，但是点亮的四的话，那我的呃教程里面有些功能你可能就用不 不了啊。好了，那么这个地方注意了啊， vs 二零二二的同学就会可能单装二零二二的话，他没有四和四点五两个选项，这个时候就要注意到我们的教学群里面啊， 教学群里面我这里有几个文件夹，出去看一下啊，那么这里主要的就是这个开发工具啊，最最开始开发工具这个里面尽量一个个挨着看一下。 我们这里的啊，二零二二的同学就要把这个四点五跟四点零的这两个东西下载一下，然后里面有安装说明啊，把它复制到对应的位置安装好就可以了啊，那么再去新建项目就有这个四点五了啊，不然你只能新建高版本的啊，好，创建 安装地板本的还有一个用处就是你会网上会找到些原码，他都是地板本的比较多啊，那么你可能就如果是高版本 的话，你可能用不了就用不了啊，注意啊，好，那么这呢就打开了一个新的项目啊，那这个项目呢？这个是入口啊，这个在后面都有奖，这里就不一点点奖了啊，我们直接呢在 这个地方啊，添加功能区啊，添加一个功能区，好，在这个地方右键添加功能区。功能区在哪啊？这没有一个功能区的东西啊，你点新建项啊，新建项啊，直接有功能区了，添加就可以了啊， 那有的同学可能在右侧会看不到这边啊，那我们要在视图里面打开这个啊，视图里面打开解决方案管理器啊，是这样的啊，那么添加以后你可能左侧的这个工具箱也看不见，那么在视图里面有一个工具箱啊， 那么有的同学的工具箱呢，可能是一个浮动的状态啊，那么也可能是这么一个收缩的状态啊，那么你要自己在这调整一下，你喜欢放右边就放右边啊，注意啊，你看拖到 这个他会告诉你啊，往哪定位啊，这个就比微别里面就高级的太多了啊，那我们一般呢是放在这个最左侧这样子啊，这个可以拉动大小啊。好，这个内置的话，他表示的是在我们 x 二的上面那一排啊，功能区里面有一个加载像啊，一般不放在这个地方啊，这个地方呢，正常情况下，我们就直接好 点中他按下迪丽特删除，然后再在这个地方右键添加功能区啊，这个就是我们添加好的。好，这个呢，我就不细讲啊，在第二一点二里面，我们有个功能区的，快速入门的讲一下就行了啊，好，我们加一个古若普， 再加一个巴特， ok， 好，现在我们希望呢，用户选中单元格以后，点一下按钮，知道这个单元格呢地址是多少。好，那么 我们 excel 的这个为别的写法了，很简单啊，还有就是 ms box selection 啊，点拽死，但是在这里是不行的啊，对，不光是拼错的问题啊，这里是拼错了啊啊，这个是不行的啊。那么 原始的 vst 后的话，你要访问到我们的 excel 对象呢，他实际上是通过一个什么来反问呢？是通过一个 global 对象啊， globals 啊，然后点儿 this in， 点儿 applick 信，这个 apple k 信，就相当于我们 excel 里面的 app k 信。然后 再要就说我们之前一个山里面默认的那些对象呢，都要加上这个。好， 要能直接这样写了，就是我 vs q 八八零框架给大家赋予的能力啊。首先先看到后面的课程就知道啊，那我们这一节呢，也就是没看的，从这里开始看的，我们这里也可以来学到啊，我们先看这一个运行的效果啊，我们点击启动。好 啊，注意有的同学会出现一些啊，这个对话框，这要点否啊，点否啊，那么你们在调试 vst 五的过程中，经常会有一些意外的，这个关闭啊，他会系统就会提示你啊，说这个驾驶箱有问题之类的啊，不要理他，点否就行了。 好，走，注意，看到这里就有一个胎宝啊，这里有一个按钮，哎，你看这里是 c 五，好，我们再选中这一片。好啊，这个就一个七， 基本的，呃，框架这个，这个叫插件入门就完成了啊，这么简单啊，很简单啊，好了，那么现在就是核心的问题我们要解决一下啊，他们这种写法比较麻烦，更多的麻烦还在后面啊，那么我们有很多，你将路是红的话，放一个美举进去， 那一个录制红的代码放进来，你要改的话可能要改半个小时才改的完啊，我们有的同学之前可能自学过啊，因为有很多的东西呢，系统默认都没有，那么这个时候在 使用 s q 八八零的框架的话，就可以像这样的写法啊，那比如说你要给 range 啊，比如说啊，你看你这个 range 写这个写不了啊，你要给 range 复个词，你得怎么写呢？要这样写啊，可以写点 range a 一啊，点 y 六点一，为了给 range 复制，你要写这么长一串啊，包括操作系统 ok， box 你都要带上这个潜水。当有美女的时候写的就更麻烦啊，大部分的未必代码直接复制过来是不行的， 但有了我们框架的加持以后啊， vba 的路子红的大红，带码可以直接复制过来啊，那么这种软件呢，也可以直接这样去书写啊啊，也可以这样直接去书写啊，比如我们可以这样直接写代码啊，那么这个能力怎么获得啊？我们来先看一下啊，首先这里要学习一个东西啊， 在我们的项目文件里面啊，咱们这里面呢，注意啊，回到我们的项目文件里面啊，在这啊，我们在这有那个做东西啊，看我后面教程就知道，比如说这是我之前做插件，我们这个里面会有一个赖本文件 家啊，我们这里熟悉一下我们的项目组织啊，项目组织是一个 lsn 文件，他下面对应的这个是我们的系统默认的一个主代码所在的文件，那么除了系统代码的话，我们经常还要引用一些其他的库啊，这也就是 c 下部写就。其实这也是所有的职业编程语言的一个 通用的做法啊，他是自己核心有一部分代码，有些其他的代码是通过引用第三方的库获得的啊，所以我们在这新建一个赖吧，这个赖吧代表一个库文件夹，这个库文件夹就是注意这个地方，我们就要使用我们 vs 七八八零的公共框架啊，这个公共框架呢，你看 好我们把这个删掉，这里很多个版本啊，我这是从前面一路升级过来啊，这个版本我一直维护升级，这个一点零点六呢，就是从我们的这 一个啊文件啊，公共框架里面啊，注意啊啊，之前这些版本的，呃，都不用下的，只是下到最新版本啊，过段时间我后面都会删掉啊，这个主要是为了保持一个向前的兼容啊，可能有的某些版本会有问题的话，在一段时间内可以退回，一般不用管它，使用最新版就行了。 把它下载下来以后啊，那我们把这个啊，这个随便放在哪啊，那我们把它挤压啊， 你看啊，那么解压的话，就只需要把这一个文件复制到我们刚才准备好的这个赖本文件夹里面啊，还有就是直接复制进去就行了吗？还差一步啊， 复制以后要跟我们 vba 里面添加工程饮用一样啊，添加饮用啊，注意啊，我这里呢是之前测试过，已经装了一次。那么你要在这选定到这一个内部文件夹啊，因为我们保证 一个项目的完整性啊，你也可以引用到其他的文件夹里面，但是当你复制呃，或者剪切粘贴了这个位置以后呢，那么这个相对关系发生改变的不太好。一般我们自己项目引用的文件，引用的 di 啊，都放在这一个 live 库里面啊。好， 这样放进去以后就能直接写了吗？也不能直接写啊，这里还有两步动作啊，首先啊，找在这里加一个音炮子啊，音炮子这个写法你也不用去记啊， i m 就行了，空格就出来了啊，然后，哎，后面也会弹出来， x 八八零 vs t u 点，注意，这有三个，我们先使用第一个 excel help。 好，把这个 excel help 放进去以后，注意看我们刚才写的这一串比较长的代码，我们就可以这么写了， 你看这个代码就直接等价于他啊，写起来就比较的方便，包括这个 range 也可以直接这样写啊，这个就跟我们 vb 之前的写法几乎就一模一样啊，我们可以测试一下啊。 嗯， ok， 好，注意看啊，咱们在第一次运行的时候，你会发现啊，他会说需要 vip 才可以使用，因为你们当然都是 vip， 你们直接注册就行了，复制一下放到我们的聊天的窗口里面，就是教学群里面啊，这个大家每个人可以注册三台机器啊，那请来 啊，把它复制粘贴验证计划码就可以了啊，注意啊，这个注册的技术呢， 后面都会讲到啊。 ok， 好，我们再重新启动，注意啊，这个只是对于开发者啊，对于开发者有一个激活的要求，当发布到用户端啊，你之前看我发给大家的那个教学项目，那个他是不需要注册的啊，这个只是限制一个开发者啊。 ok， 那么这个时候 那我们点击一下，好，注意啊，那么这个虽然说可以直接写出来没有报仇，但是直接运行的时候他是会会出错啊，那么这里还需要下一步，那我们再 加载上的入口要给我们的这个项目复制啊，类似 adding 啊，我们这里是一个统一的写法啊，好，我们就 excel 八八零第二个球，第二 excel harper， 第二 application 等于 ok 这一句啊，那么这一句啊，挂机啊，啊， 应该说叫做接管啊，一个事啊，就这么说啊，把这一句加句以后，在其他的模块里面啊，只要我们顶部音破了的他，那么下面都可以使用这个啊，这个框架的距离使用，在后面的教程里面都有详细的讲解啊， 第一张里面基本上就讲清楚了大部分的用法，后面有升级的新的功能呢，我们都会往里面放啊，大家都可以用啊， 好，再进去走，你看哎，然后这里放进去啊，那么这个调试断点的同样也是在左边加啊，关于调试的话，在我们的教程的啊，一点四啊，都会有详细的讲解啊。 ok， 好，我们把这个断点放在这啊，我们来看一下，那么这个时候就会进入到断点啊，这跟违背的调试几乎是一样的啊，没有什么区别。 ok， 再把它关闭。 好，那么这里来看一下，一个路子红的代码直接改过来有多轻松啊，我们先随便录这个红，我们打开一个二零一零的这个啊， 嗯，好，我们陆志宏 选中一个区域啊，红色，然后加这个啊，然后写上一个值，再加上一个红色的字体。好，那么这一坨代码啊，这一坨代码啊， 他是比较长的啊，如果说啊没有框架的加持，按照纯粹的 vs 修的写法，他是比较麻烦的啊，好，我们要把这一坨代码直接复制到这个里面去啊， 好，你会看到啊，好，这样复制进来以后，虽然这个软件是耐克性没有爆错，那么这个就还在爆错，这个爆错了，我们需要再引破他一个东西啊，也就是霉局， 因为我就你们的没觉得他改了些写法，我们要改的话，那么改的量比较大，我们我给大家把它进行的整合，整合以后呢，我们预制在我的框架里面，这样的话整个的这个，哎，你看一直不改啊， 注意看啊，如果说我们没有引破成我们的这两个框架的这个支持的话，你会发现你这里的代码就是一片红啊， 看这个 range， selection 这些全部不行的，全部不行的，你全部要把这个 selection 呢改上一个大大的前缀啊，那全部要加上这一坨啊， range 也要加上这一坨啊。 ok， 好，我们把它带上， 这样就可以了啊，你看这个时候呢，我们在这个里面再加一个按钮进去啊啊，这个按钮呢，我们直接去调用这个红二，注意啊，在点邋遢里面，他这个可以直接的折叠啊，非常方便啊。我们把这个红二放进去，再再用这个红一打开啊， 启动整个我的框架，作用就是来减轻大家的负担，特别是减轻新手的负担。哎呀，老鼠啊，可能无所谓啊，新你不用也可以啊，特别是反正我自己的做的插件都是用我的框架， 因为可以节省了很多的时间啊，你看看到没有，好，那我们再把这个删除啊，这就是我们刚才陆志宏的这一坨啊，你们自己可以不尝尝试不用框架，自己改改，看下改多久把这个陆志宏可以改成这个代码啊，你看， 那么这就是框架的能力啊，当然不仅如此啊，包括后面二位数组排序啊，零非零下标的这个一位数组的问题啊，在我们框架里面都已经解决掉了啊。把第一张看完，基本上很多同学现在看到前面十节课基本上自己的插件都已经发布发下去了啊，那大家可以 快马加鞭啊，但是看的时候要注意一下啊，整个 vsu 的教程呢，比之前的叫 vip 的教程要速度要快很多啊，节奏会快很多，没有什么废话啊，不要去快放或者是拉进度条啊，人家以为说好像你有一点 基础了，嗯，恕我直言，你们的 vba 基础在 vs 七五里面没什么用啊，所以在这个 vs 七五的课程里面要一字不拉的认真的去看教程啊， 不要怪我说有些教程提问疑问呢，我就不想回答，我就直接说去重新看教程，因为教程里面都讲的很详细啊，你没有听进去，你没有去照着操作，这种重复性的答疑工作我不想做啊。呃，我要答疑的是教程里面没有出现过的或者是意外情况，那么我会 尽量帮助大家解答好，大家注意点啊，学习的时候要用心一点啊，不要你以为你你是倍数的，是加快了数，但实际上你漏掉了太多东西啊。 这两天同学提问的话，就可以看到很多都是教程里面已经有了，但是你实在没有听到啊，因为我很可能你使用的倍数或者拉近度条，或者是没有一步步的按照 我们的步骤一定去参照练习啊，讲的每一步都要自己去操作一遍啊，好比如说这个项目啊，你不要说我这里做了一个你就又去复制啊，你要自己去重新 从头开始，新建一个项目开始，好来完成一个新的任务，达到我们这一样的效果。好，谢谢大家，那我们下节再见。

你绝对想不到一个浏览器插件就能让你成为爬虫大神，关键还不用写代码。走，我们一起来看看。这个插件的名字叫做 gx x mark， 那么他到底能做什么呢？我先进入一个我之前开发的 cm 系统里面，然后点击这个录制，我现在输入户名，输入密码登录，然后我们简单做一些操作。好，我们现在退出这个系统， 然后关闭浏览器，我们回到这个插件里面哈，然后点击运行好现在见证奇迹的时刻。我现在没有动鼠标键盘， 他在自动执行我刚刚的步骤，这样我们的一个全自动能模拟登录的爬虫就做好了。现在数据爬到了，如果要存在表格里或数据库中，要怎么做呢？请看下集。

今天我们说一下这个阿哥迈普阿德印的开发，阿德印啊就是加载像啊，翻译过来呢，也叫插件。那什么是插件开发呢？ 咱们传统的这应用软件啊，它是开发好，打包好以后，你就不能更改它的功能了， 也就说我做完一个产产品，就好比是一个工具给你以后呢，你就只能自己啊，用我原来做好的这些功能，你就不能往上添加你自己的功能了。 但是呢在现实中呢，往往人们呢啊需求各自不同，比如说在土地利用里面就经常分割地块， 那阿格基斯提供的默认的风格地块的方法呢，虽然是可以做，但是从效率上，从使用习惯上啊等等啊，都不太适合现实需求。 这样的话就产生了有一些用户呢，买回来一些现成的软件以后，需要在上面自己添加一些功能的需求，那么由此呢就产生了叫差价开发的一种模式， 也就是说在官方提供给你的平台上，你可以额外的像插件一样啊，插拔式的插件一样，插上去一个你自己的小模块，而且呢能正常使用，比如说分割面积 啊等等啊，一系列的东西，你可以自己做一个按钮，或者做一个选框，或者做一个绘绘制的一个小笔啊等等，你都可以去做啊， 这样的模式叫插件开发，那他与传统的软件开发相比的话，传统的软件的话，软件整体啊，打包好以后是不能动的，这个刚才咱们说了，嗯，所以呢，它里面主要的程序 使用到的一些资源啊，都是被动的，就说我有一个主要的一个脉络，我主要的这个脉络，这个流程需要用到什么都是事先准备好的，但是在插件时开 法里面呢，他是依赖倒置的，也就是说我主模块不依赖我插件这个子模块，我主模块运行正常运行，不需要这些 后期增进来的这些插件我事先不知道，他没关系，我能正常运行。同样道理，我后面加进来这些插件，这些模块我加进来的时候，只要我遵循了某一个接口的规定， 我进来就能使用主模块里已有的一些的功能。而且呢，我不需要事先让主模块知道我都有哪些东西，也就是一个依赖导致。那这就是插件开发啊，插件开发，那阿格介斯呢 啊，十点零以后，他增加了这种阿德印，阿德印翻译过来叫加宰相，也叫插件，那他支持的语言很多，支持你用点耐的， 包括 c shapa 啊，然后这个 vb 点 nat 啊，扎瓦 pass， 其中扎瓦和嗯点 nat， 也就是 c sharp 或者 vb 点 nat 呢，需要配合 abjectssdk， 以 abjects 的形式去开发， 那拍死你就相对简单一些。拍死的话呢，你就不用额外安装这个 sdk 和 objects 这个库，直接在 augustes top 的基础上用拍死你就可以了， 因为他拍身呢吊用的是阿哥派，阿哥派这些个包呢，事先在你安装阿克基斯带斯 top 的时候，他已经装到你机器上了，但是你如果用点耐的或者扎外去开发呢，需要额外的装阿克基斯 sdk， 那他可以开发哪些类型的插件呢啊，其实类型还是比较多的啊，比如说工具按钮，工具条，组合框菜单，右键菜单啊， 多项的这种工具条，然后这个，嗯，面板可停靠的一个窗口，甚至是一个小的一个应用啊，扩展啊，编辑器的一个扩展，都是可以去开发的。那你想 想要开发这个的话，怎么去搭建他的环境呢？我这里是说以 csif 开发来说，你要安装点 natufled mark， 你要安装 sdk abjectssdk， 也就是 ikobjects 的这个 sdk 包， 然后呢使用一个 vis statu 的二零一零以后的一个版本开发工具。 安装的时候啊，那他这个安装盘里面有 icroftxsdks， 里面你选点耐的芙蓉 moke 这个去安装， 安装完了以后，你在你的威萨斯塔丢里面创建项目的时候，你就能看得见他给你提供好的阿格迈，阿德印的这种模板，他也支持对开的。老哥做阿德印啊，阿格斯 club 都可以，都可以，常用的多少是阿格迈？不具体。假如说你要创建一个巴腾一个按钮的话，那你进入到他模板里后，他模板都是以向导式的，你只要添你的按钮的名字， 他的标题，然后呢，他的类型啊，他的鼠标题是他的描述等等啊，按照他的这个想导师的一项一项添，添完了进里面写单码就可以了。 那在这里给大家看一个我以前做的一个啊，面积分割的啊，啊，一个小的粒啊，那这个呢，是我原来做好的啊，我原来做好的一个工具条里面做了个按钮，主要做的是什么呢？ 主要做的是土地利用的一个面积分割的一个东西啊，那比如说一家农田啊，他兄弟两个分家了，那他需要分啊，从这个边到这边分啊，一般情况下他是沿着某个边分， 那市面上呢，也有一些茶件，那些茶件呢，主要是东西分，南北分啊，就是这样定死了一个方向。还有一个呢，就是他是分的时候啊，他比如说只能分一半啊，或者是四分之一，这么去分啊， 那我这个插件的特点呢？就是啊，你用鼠标选它任意一个边啊，它这个边啊不是水平垂直的，无所谓，只要它是一个直的边，就是不是一个弧的，圆弧的目前不支持。只要是一个直的边，你鼠标拖拽， 他就沿着这个边的平行方向给你分啊，你想要分多少？这个任意啊，比如说我这样分出来一亩可以，我这样分出来五亩也是可以。那咱们看一下啊， 这个就是打开这个工具，点一下就打开了，他会捕捉到你要分的那个边，然后垂直他的方向，他还会提示你一个红色的一个箭头， 然后弹出来个框，你在里面写你的面积就可以了，他就沿着这个方向给你分了。比如说我要沿这个方向分的话，捕捉到那个边 啊，拖它就会垂直它也就说平行它分五十亩啊，它就会给你沿着这个方向给你分五十亩啊，这就是这个插件啊，这个插件，这就是阿根麦坡阿根印的开发。

大家好，欢迎大家观看迅雷电子离你合作视频。上一期我们已经讲完了设备术的知识，按道理来说，设备术不应该再给大家讲解了，但是设备术还有一个新的技术叫设备术插件， 只不过这个功能还没有合并到 linux 主线里面。我们如果需要这个功能的话，就需要自己在板子上去实现。不过随着时间的推移，我相信设备数插件这个需求会越来越多，到时候这个功能肯定 也会合并到 linux 主线里面。所以老师为了让同学们尽早的接触这个知识，那老师就要做第一个吃螃蟹的人，要给大家讲一讲。 那这个知识点要怎么去讲呢？老师录这期视频教程的时间是二零二三年三月， 目前设备数插件的资料还很少，设备数插件的视频教程几乎没有。所以老师要讲这个知识点的话，就直接将他讲成天花板。 我会从设备数插件的使用到设备数插件的实现原理，成体系、成架构的去给大家讲解，后面再有人讲他讲的不会比我再好了，就直接把他讲成天花。 然后这个视频也是会免费放到 b 站上，让大家去随意观看。 就这么跟大家说吧，如果我这个视频录完，我放到网上去卖，他肯定也是爆款。但是我们感觉没有这个必要，因为我们也不是靠卖客啊，去生存。给大家录视频的时间都是我们在做项目之余，找时间给大家去录的。 然后就是设备数插件的课程要怎么去规划，因为我已经把牛批啊吹出来了，所以接下来我们来看一下课程规划的框图。 这一期设备数插件的课程规划了四个部分。第一部分讲解设备数插件 的基本知识。比如什么是设备数插件，我要先给大家解释清楚这个概念，他是什么，然后讲解设备数插件的语法，因为我们要写代码呀， 会写代码以后我们就要会编译，编译完了之后我们是不是就要用它呀？所以最后呢，我们讲解设备数插件的使用。 这个是第一个部分，主要是讲解设备数插件的基础知识。在第二部分，我们会讲解 configer fs 虚拟文件系统， 那他和我们设备数插件有什么关系呢？设备数插件这个功能是基于他来实现的，所以我们要了解设备数插件，知道他的原理，那我们就要学他。 但是呢，这个课程他是比较晦涩的，也就是第二部分，所以老师在第一节里面会先给大家讲解理论知识，大家先有这个理论知识，然后老师会通过实践课 一步一步的将这个非常晦涩的理论知识给大家掰开揉碎去给大家讲解。 实践和理论是相辅相成的，这个就是老师讲课的一个特色，包括前几期的视频，老师也都是这样讲的 啊，没有说光给大家讲理论，都是理论和实践。有的时候还会配合作业去给大家讲解其中一个知识点。第三部分，我们学习设备数插件的这个驱动移植。因为现在 在我们已经掌握了这两个部分的基础知识，那移植设备处插件这个驱动就非常 easy 了， 先教大家移植，然后再教大家啊去分析这个设备数插件的驱动。最后呢， 给大家介绍一下参考资料。这个目的呢，就是养成大家自主学习的能力。 因为 linix 的发展还是比较快的，他出现一个新的知识，大家往往啊这个不能够去找到他的教程，那这个时候大家要有自主学习的能力，你没有教程，你难道就不学了吗？所以说这个能力还是很重要的。 那这个课程我们要怎么去看呢？如果你是学习，你是学生，或者说你是一个想提升 自己的工程师，那我就建议你第一部分，第二部分，第三部分，第四部分，你按照顺序往下看就可以了。如果说现在你在开发一个东西，你要用到设备处插件这个功能， 你要提高效率，那要快速的出结果，我建议你你就看第一部分和第三部分的移植就可以了，因为使用和移植，哪怕你不了解它的原理，你也可以去做。 这个呢，是针对这两种情况啊。这个视频的这个使用顺序。 这节视频主要是给大家介绍设备数插件课程的规划，让大家对本期视频先有一个全局的认识，起到一个总领的 作用。如果同学们看完了这期视频，觉得还不错，同学们给老师点赞三连啊，发个六六六的弹幕就可以了。这节课就先讲到这里，谢谢大家的观看。

从本堂课开始，我们就真正去写一个插件，在写的过程中学一些插件的知识，就开始真正实战去练习了。我们现在做了一个插件 manifester， 名字叫预算管理，然后这都跟上节课讲的是一样的，有一个 power 以及 k m l， 这个是一个 空的，自己创建一个把 japan 引进来， powerpop 和 c s s 都是个空的，先引进来，然后然后写 powerpop 的主样式标题，预算管理这些字段，大家看一下效果， 然后加载就这么一个预算管理系统，总花费多少限额多少输入额度，然后输入一百一点开销，他就放总花费里边。首先这个点这个按钮，我们先用解扣补货到，然后再读取这里边的值一百，然后再写到这个总花费里边，我们要做这个，就在那个 gs 里边抛放的 gs 里边写， 怎么去写？就是这个 popogs 空的，首先是漏的，上上节课说的，然后写个方式里面呢就行，再就是通过这种方式解回的语法获得到这个视频的 mount， 这个 id 的标签就是它 拿到这个开销，这个按钮拿到之后 click 就是他点的时候，我们就在这处理，我们就会在这来拿这个输入框里边的这个 mount 里边的东西， 我们先拿到输入框这个 mount 的值，再投，找到 mount value， 就拿到它里边的 mount 数值了，然后头头就是这个 总花费，他是投诉标签展示的，然后我们拿到这个标签之后给他复制为 amount， 然后我们再给这个 amount 输入框复制为空，我们可以看一下效果，看一下效果， 比如我们在这消耗一百一百，然后开销这里就会变成一百，我们变成了二百，开销变成二百，那我们希望就是下一次再点花费一百的时候，点开销，这个会变成三百，因为已经是二百了，得加上累加，这个怎么做呢？首先我们要读取总花费，如果总花费有值的话，就加上这个值 作为总花呗的值，如果总花呗没有值，直接用他的值即可。我们来写这个 g s 代码，如果 toto 从 toto 这个标签的 tiger 里边去有值，然后我们就会把它转成印上正形，然后前面的这个 mones 下面的输入的值也转成正形，他俩加在一起就是总数， 然后给头头标签复制成这个总数，然后这个 amount 指空。下面是如果说这个头头里面没有值，第一次复制的话，直接跟上次说的是一样，直接把 monge 给他就行，看一下效果，然后这里输一百 开销，然后后来又花了两百，变成三百了，后来又花了五十，变成三百五十这样，然后我们退出的话，再打开又变成零，如何能让他下次打开的时候也能继续的去累加？要想继续累加，我们就要一推于 插件，它里边有一个权限， promotions storage 存储，我们把这个数值要存储到那个浏览器缓存里边，这样下次就可以直接使用了。但是我们需要申请 promotions 权限，叫 storage， 这样申请完之后，我们就可以调用 comram 浏览器插件的 a p i 来进行读取和写入。关于本地存储，我这里简单介绍一下，这是一个新的知识，就是 comram storage thank， 调用一下赛车就可以给里边设置一个对象，这个对象就是 total k， 这个是他的那个 k 关键字，然后这是他的 value， 里边是一百， 这时候这个偷偷的值，下一次取的时候就能取到一百，这是设置值。 come， sorry， 接三个，有赛车就有 get， 这个是赛车，赛车一个值，这个毁掉，可以有，可以没有，我们可以删掉，这个简单的设置一下就行了。然后首我们要实现这个逻辑，第一步就是先读取，读取如果没有的话就设置 如果，如果有的话就用读的值累加，就这么一个大体逻辑。所以我们第一步干嘛就是读取，我们下节课来读取来实现这块功能。

大家好， 我是可乐在线的交往高级讲师党老师，上节课呢，我们讲讲到了这个 supermeprot 里面怎么样，即使我们的人民利府进行 htm 的前端页面开发。那这一节课呢，我们来说一下我们的个 spreamboot 里面的这个插件开发。那 supermboot 的这个插件呢，是我们 整个 superme 的框架的一个扩展的核心，那也是我们集成第三方这些主见的一个核心技术啊，在我们 superme 部图里面，我们的这个插件叫做 starter， 那插件包的名称呢？在我们 springboot 呢里面有一个约定啊，那首先呢，是我们官方提供的这个 sprongboot 的插件呢，是由我们的 spronbert 作为包民的这个前缀，如果我们的是第三方插件呢啊，一般会以我们插件的这个名称杠步特杠 stat 好，然后作为报名的这个后缀啊， 那在 sprincp 城里面，我们要去开发一个插件呢，那我们要做到以下的这一个插件开发过程呢啊，就可以完成一个 sprinprot 的 插件开放了。那首先我们要完成一个 supermebode 的插件呢，首先我们要创建的是一个 supermebode 的一个这个插件工程呢， 是不是不得的插件工程呢，就是我们普通的这个家玩应用程序啊，只是里面呢，我们要引入我们 supermeboot 的这个插件的一个核心包，那这个第二步呢，就是引入我们 supermebode 的核心插件包了，在 super 里面的我们的核心插件包呢，主要有两个包啊，那第一个包呢，是我们 supermebood 的 ouch， 看这个啊，这一个是我们 supermeboot 里面要完成插件的这一个自动配置啊，就需要有这么一个包啊， 那第二个这个包呢，是我们的这个 superfaceboot configuration processor， 那这个包主要是拿来干嘛的呢？这个包主要是为我们生存 我们插件包里面的这些配置属性的描述信息啊，描述这些文件的，那有了这个包了以后呢，我们生成的这个插件，在我们 appk 星点幺妹文件里面进行配置的时候呢， 我们就可以出现我们的这个配置属性的这个提示了，如果没有这个包呢，就不会生成了这个属性的这 这个描述信息，也就不会出现我们的这一个啊，智能的这个提示啊，主要他是这一个作用的啊。那第三步呢，就是我们要首先要去编写我们的一个什么呢？编写我们的 自动配置的获取属性啊，获取属性的这一个配置属性类啊，配置属性类，那配置属性类呢， 就是我们普通的一个加瓦冰啊，里面呢是对应的是我们要去取的这一个属性啊属性的这个名称。那我们定义好了这个属性以后呢，我们需要在这个类上面使用我们的这个 comfider racing properties 这个注解， 那里面呢，我们是要使用他的这个 pics 这个前缀啊，来指定我们的这个属性啊， 我们的这个属性的这一个在 apk 星这一个压门文件里面啊，进行配置的这一个属性前缀啊，那就如同谁呢？就如同像我们这个里面来配置的什么 supreme， dandet 硕士，那这一个呢，就是我们的这个 数据啊，这些的这个配置的这个前缀呢？那后面的这个 password 优质内幕和这些呢，就是我们的这个属性名称啊，那前面的这些呢，就是他的这个前缀啊，像我们的这个买 bace 的这一块也是一样的，那么呢买 bace 跟 plus 呢，就是他的前缀和我们的迈克罗克星啊等等，这些呢，就是 他的这一个属性名称啊。好，那我们写好了这一个了以后呢，我们指定好前缀了以后，那我们的这一个 还需要什么呢？还需要在我们的这个边写一个我们的自动配置类，在这个配置类上面我们要使用 n 波咖啡跟微信拍 party。 是啊，引入当前的这个属性 啊，属性稳属性类啊，属性类啊，指定这个属性类可以使用我们的这个啊，配置属性啊才可以啊。好，所以呢，接下来呢就是编写我们的这个配置类啊，编写完这个配置类呢，配置类就是一个 有 ctrl v 型的这个注解的那个普通类啊，在这个类上面呢，我们使用这个注解啊，刚才已经说到过的这个 n 波 coffecration party， 是 啊，这一个注解来指定我们哪一个配置属性啊？配置的这个属性内好，是可以使用我们的这个配置属性好，有了这个配置属性 以后呢，我们的这个配置属性就可以在什么地方呢，就可以在我们的这个配置内的这些构造器啊，构造器或者是这些方法里面就可以进行 自动注入了啊，可以进行自动注入就可以取到我们的这个属性信息，那这就是我们的这个配置类啊，当我们编写完这个配置类了以后呢，要将我们的这个工程作为我们直喷布的这个插件 啊，这个插件工程呢？插件应用啊，那首先还要去编写我们 sprin 的这个什么呢？扩展的 啊，这个插件的这个描述文件啊，那这个描述文件呢，就是在我们的这个插件工程的 mato 杠 inf 下面需要有一个固定名称的这一个啊文件，那这个文件的名称呢，就叫 supreme defectories 啊，这一个文件，有了这个 supreme defectories 这个文件了以后呢，我们需要在这个文件里面添加一句啊，就是我们的这一个 nbao toconfig。 为什么呢？这个自动配置内的这个权限定名等于谁呢？等于我们 配置我们自己的这个配置类啊，就这个配置类的这一个名称啊，就这个配置类的名称好指定到了这一个配置类的这个名称呢啊，通常情况下在这个地方啊，如果只有一行呢，我们的这一个 配置内饰可以直接写到这个凳子后面的，如果我们有多行的情况下呢，需要在我们的这个每一个配置的结尾添加一个斜杠做分割，那这个是他的一个啊里面的一 一个规范啊，一个规则啊，当我们编辑好了这一个配置的这一个描述文件了以后呢，我们就可以使用我们的这个 sprintboot 的啊这个插件啊， sprintboot 提供的这个 mone 插件呢，进行我们的这个 mone 打包了， 那打的打的这这一个尖包呢啊，就是我们最后啊我们开发出来的这个插件包，那这个插件包放到我们的其他应用里面去呢，他就 可以进行我们的这个自动化的这个配置和整合了啊，那以上呢，就是我们的这一个啊， springbook 插件的一个开发的一个流程和步骤啊，那我们再来回顾一下啊，再来总结一下，那么 sprongbook 里面要开发我们 sprong 的插件呢，首先 创建了 sprout 的这个普通的这个工程好，要在这个工程里面映入我们的这个 sproper 的自动配置啊，这一个依赖包，以及我们的这个好配置的这一个处理啊，自动配置的这个处理包。好，那第三步呢，需要我们编写一个能够 自动配置的这个配置属性类啊，要在上面使用的这一个 come figuration properties 来指定我们的这一个属性前缀。好，完了以后呢，我们呢接下来就是编写我们的这个配置文件啊，啊，配置类啊， 这一个配置类编写好了以后，在这个配置类上面要使用我们的这一个 n 波 come back go easy party 是好开启啊，我们的这一个指定，或者说叫指定我们哪一个 这个配置属性内啊，可以使用我们的这个配置属性。好，这些写完了以后呢，就需要在我们那个屋 metog i f 这个目录下面好，创建一个 superme defactory， 是这个文件啊，在文件里面呢，好，注册我们的这一个 配置类啊，我们自己写的这个配置类，那这个配置类怎么注册呢？是通过我们的 n 波 or twocoffection 这个权限定名等于我们的这个配置类的啊，权限定名好，编写好了以后呢，就可以利用我们的这个 spring but 的这一个 提供的这个麻门插件来进行打包啊。打完包了以后呢，我们的一个插件就完成了。好，有关我们 spa 不成里面怎么样开发一个插件呢？好，我们今天先简单介绍到这里。