Blazor 开发浏览器扩展原创

好，欢迎大家回来，欢迎正在收看直播的观众回到我们的直播间，呃，这里呢，是由blazer中文社区举办的blazer day in China呃，非常感谢donna的中国社区，微软reactor和NCC社区对本次活动的支持。那么接下来呢，我们还有三场分享带给大家，在我们的分享结束之后，还会有一次抽奖，线上的观众可以参与抽奖，赢取由我们微软react社区提供的帽子，就是我现在带的这一顶啊。那么接下来为大家分享的是由IHUB的软件工程师玉坤为大家带来的开发，呃，用blazer开发浏览器拓展。

好，谢谢谢谢，谢谢各位的掌声，好吧，呃，现在已经三点了，三点的时候应该干嘛？三点的时候应该饮茶下班了是吧？正常应该是这样的，但是今天大家休息过来听我分享，那我就好好的给各位讲一讲这个blazer的浏览器扩展开发到底是一个什么样的东西，以及他可以可能给我们带来什么样的好处。好吧，呃，首先呢，是一个简短的自我介绍啊。稍等一下啊。首先是一个简短的这个自我介绍，我呢是上海赫公司的软件开发工程师，好吧，这个blazer跟浏览器扩展开发的经验足足有两个半月，呃，那从某种程度上来说，第一这两个技术的结合本身并不困难，第二，如果等下有提问环节的话，大家提问的少一点是吧，我就两个半月的经验，不要问太多东西。

那然后呢，这个所有的东西，今天要讲的所有内容，实际上是基于一个开源项目来做的，这个开源项目就是上面的这个链接比较长，那总的来说它的名字就是blazer browse extension blazer结合浏览器扩展，那什么是浏览器扩展呢？实际上就是现在大家看到的这个看似像PPT的东西，它实际上就是一个浏览器的扩展，那这个扩展你可以看到它的路径是extensions，实际上呢，它是浏览器当中的一个扩展。然后这个所谓的PPT实际上是用blazer and design做的一个轮播画，就是大家经常看到页面的那种跑马灯的那个广告图，然后下面有这个previous跟next按钮，然后呢，我刚才做了一个大概的，呃，键盘上的控制，所以它可以左右用键盘控制类似这样的一个效果，那所有的今天要讲的东西都是基于这个之上来完成开发的，所以各位如果后续想要了解，嗯，Blazer以及它浏览器扩展相关的开发，只要关注这个项目的一些动态，以及它上面一些一些帮助说明。

可以了。首先进入第一个内容，就是这个究竟如何进行，呃，整体的这个。过程。还是要分享一下桌面是吧，稍等一下。嗯。呃，我们来了解一下，这整个就是如何使用blazer，以及如何使用blazer进行这个浏览器扩展开发的一个基本的过程。首先基于刚才上面的这个项目，你只需要几个简单的步骤就可以了，首先新建一个blazer的项目，Web assembly项目，然后呢，引入一些new get包，那这些说明都在那个，呃，刚才我给出的那个项目地址当中有说明，那最后得出的一个项目结构大概就是像图上这样的一个内容，它包含一些pages，然后包含一些静态的文件，那pages当中呢，有几个比较常用的页面，就是上面说的这四个，那么这四个当中呢，实际上他们的名字都是你可以随便起的，但是只是有一些约定，或者说有一些呃历史的传统，所以你可以叫这个名字，比如说第一个是background页面，Background页面意思就是后台长期运行的一些作业，你可以认为浏览器扩展实质上就是在后台运行。

的一个一个打开的页面，而backgrounds就是其中的一个很特殊的页面，当你打开浏览器的时候，你的扩展就自动的加载这个页面，这个页面会一直在你的浏览器当中运行，那就是backgrounds页面。那你可以在这个页面当中做什么呢？你可以拦截浏览器请求，你可以做一些定时任务，你可以啊，诸如此类的。然后下面呢是index页面，Index页面为什么叫可有可无的主页呢？因为index页面就是其他的任何页面都可以，你可以在这个四个页面当中继续追加你想要的页面，Index的就是其中的一种，你可以叫其他的名字都无所谓的，所以它只是呃，你可以叫其他页面也是没问题的。

然后第三个呢是options页面，所谓options页面是当你点击这个浏览器扩展的时候，右边会出现的这个options按钮对应的页面。啊，就是这个页面没什么特殊的，他只是说浏览器专门给你保留了一个options按钮，那options按钮对应的页面就叫options页面。然后最后一个是pop pop up的页面，Pop up页面是指当你点击这个浏览器的时候，浏览器扩展的时候，它会弹出一个页面，比如说我点这个浏览器扩展。然后它会弹出这样一个页面，像刚才这个页面，就是我自定义的一个option啊，叫pop页面，那这是呃，浏览器扩展当中的最后一个我要介绍的页面，所以呢，总的来说做一个浏览器扩展就是backgrounds options以及pop up，还有其他的你想要的页面都可以往里面加类似这样的一个结构。

那这个就是如果你新建了一个基于blazer的web browse extension页面之后，他所需要所需要的配S有哪些？那下面呢是一些静态的资源，这些静态资源包括有一些呃脚本，上面这两个脚本呢，实际上都是刚才前面那个项目他们已经开发好的，当你装了那个包之后，它就自动的帮你引入了这两个文件夹，第一个意思是说他帮你包装了一些API，原先因为我们知道浏览器是JS。公开的这种API嘛，那你要把它包装成这个c shop格式，应该怎么办呢？所以他写了一些脚本来帮你完成这个事情，那么你等下就只要写c shop代码就可以调用浏览器相关的一些API就可以了，然后下面的这个呢？呃，我应该说反了，刚才说的是下面这个文件夹，那前面这个文件夹指的是浏览器扩展，它可能有一些API，因为有一些API只有在扩展模式才才能用的，比如说我刚才提到的，如果你要监控。

流量。那普通的页面你能捕捉到用户流量吗？是不行的，你只有在扩展模式下才能捕捉到这个用户流量，那换句话说，你开发了一个呃，浏览器扩展，然后他浏览器给你公开的这种截获流量的API，那你怎么去跟他互操作呢？用c top跟他互操作呢？那这里面有一些脚本帮你做了这个事情，其实就是做了做了一些包装而已。呃，剩下的比较重要的两个文件无非就是index.htm，那这个呢是呃，这个插件对你可以认为是一个program.cs这样的一个文件，对于插件来说是program.cs就是入口的文件。然后下面这个manifest的理解比较简单了，正常的有这种APP开发都都有manifest，比如说里面定义了你的财经叫什么名字呀，官方网站是什么呀，版本号呀，然后需要的这个API代次是什么，类似这样的一些内容manifest manifest的相应定义，你可以到各自的这个浏览器扩展的官方网站上去看到他想要的一些定义是什么，那这个就是整个一个插件，当你创建出来之后，它所包含的一些所有的内容，或者说呃，整个文件夹结构就是这样的，这是源代码部分。

好，然后基于这个文件代码，你只要点一下编译，就会得到下面这个文件夹，这个文件夹就是呃，你可以看到现在这个就是我创建了一个项目文件叫blaze tablelate，然后生成完之后，它会在bin文件夹的呃，Web root下面生成这样一堆东西，那这一堆东西呢，就是刚才前面那个项目，他做了一些m SP task帮你打包成这个样子的，各位可以看到它的样子呢，跟先前的这种正常的blaze的。文件夹是有一点不一样的，比如说正常的文件夹，你会不是会生成一个杠framework这样一个文件夹格式吗？当然为什么打包成这样的，因为下划线所代表的文件夹是被浏览器扩展所保留的，就是说你不能由文件夹以下划线开头，那相应的这些细节都由刚才前面的这个呃项目他开发的这Ms build task帮你完成了，所以你要做的就是创建好之后点一下build就生成了这个文件夹。

然后生成这个文件夹之后呢，你要做的第三步就是将这个文件夹载入到你的浏览器当中，那怎么做呢？打开浏览器扩展，打开这个右上角的开发者模式。然后点击load on pack，就是加载这个展开的文件夹，然后选中刚才的文件夹，插件就进来了。就这样简单三步，你就已经完成了，使用blazer创建你的第一个这个呃，插件，或者说叫浏览器扩展，那么今天的分享就是这样的，那后续所有的内容是什么呢？后续所有的内容是拿一些例子给大家看一下究竟呃，使用c shop以及这个。

Blazer究竟能做一些什么奇怪的东西？好吧，只是一些小制作的展示，以及这些制作大概是什么样子的，各位可以看一下。呃，我的分享可能有点特别，就是说如果在过程当中各位如果有什么问题的话，也可以非常欢迎举手，好吧，因为我可能讲的东西会比较分散一点。那我们就开始我今天要讲的第一个小的事例。第一个小的事例是一个叫做github release mirror的插件，这个插件是做什么呢？就是因为有的时候你要从giu上面下载这个。东西下什么呢？下release相应的文件可能会比较慢，那比较慢呢，你就需要一些mirror加速，那怎么加速呢。我来试一下这个效果。首先呢，呃，我需要正常的下载这样一个。这样一个文件。呃，我先打开F12就可以看到这个流量，好吧，首先打开F12，然后这是一个de的CI文件，它是一个release文件，那这是个路径，就是直接指向github，然后如果你直接点download，它会有一段pen，因为这一段它是要去跟呃github的域名做联通的，那这一步呢，通常来说都是会爆炸的，因为由于DNS的问题嘛，那如果我用了这个插件，它的效果可能是什么样的，现在有一些插件在这了，那现在我要演示的是这个插件叫GI mirror，然后打开它。

然后我再次请求这个路径，你就可以看到他在这一个流量的时候，他首先发出了这个请求，可能字比较小哈，呃，这个好像放大不了，但是大概我描述一下，就是他发出了这个请求，然后被浏览器捕获，浏览器捕获时候返回了一个307，将它重定向到一个，呃，就是我们国内的加速源，那这个国内的加速源呢，实际上是直接用了阿里云的，阿里云有一个叫CNCNPMJS，就是阿里云淘宝托管了一个NPMJS的镜向源，这个镜向源也支持，就是直接下GI release，所以呢，当我捕获到浏览器流量有这个release请求的时候，我就将它进行一个从定向，从定向到国内的源，然后国内的源就很快了，大家可以看到刚才这个包已经下下来了，所以刚才通过这样一个非常简单的浏览器扩展这个get mirrors，你就可以实现将这个流量捕获，然后进行重定向，当然重定向只是其中的一种，呃，你也可以试着尝试用别的方式做，比如说你可以捕获到正文。

做一些处理，你可以在发送之前加head，你可以直接拦截block，类似这些操作都是可以的。那我们接下来就来看一下这个简单的步骤究竟需要哪一些代码才能够实现，对吧？首先刚才说了，流量补货是一个长期的任务，所以你需要在backgrounds页面当中做，那因为是blazer，那我不建议将这个codes直接写这个blazer page里面，那就是建议新建一个CS，正确跟有点像这个web phone当中的code behind一样，对吧？把code写在code behind当中的CS文件当中，所以你新建一个C，呃，Background CS，然后将它声明为部分类。

那么这个代码其实就这么多啊，我来逐行的描述一下，顺便数一下时长好吧，呃，首先呢，在第17行调用了web extension web request on before request这样一个事件，或者说这样一个监听器，然后给他加一些listener，那这个是什么呢？这个实际上就是Chrome给你提供的一个API。Chrome，你如果打开浏览器扩展的官方网站，你就可以看到Chrome在extension模式下给你提供了这个API，而我刚才一开始向各位介绍的那个项目，它就实现将这些API包装成c shop代码。那像刚才这个webtension web request on before request就是它包装的一个对象，那么你往这个对象当中加入一些监听器。相当于，哎，就是调用了processtension当中的一些API，就是这样的，那只是呢，在这边展示出来的效果就是代码，那么这个代码阅读起来也就非常简单了。第19行，呃，读，读到这个用户请求的正文，哦，不叫正文，或者说请求相应的一些细节，那这些细节当中包含有，比如说它包含有UI，我将UI取出来，然后使用一个函数去尝试命中它，如果是get release链接，那我就替换它为这个。

呃，镜像链接，如果不是的话，就直接返回对吧，那最后返回一个重定向地址，就是说得到这个地址，将它重定向为一个新的地方，然后还有一些额外参数，那这些额外参数呢？嗯，具体要开发这些插件的时候就可以去了解了，然后接下来呢，那刚才说到这个GI up release呢，它可能有一个比较长的地址，那我使用一个正则表达式去匹配它，那这这个正则大概就长这个样子，那这个是业务，其实已经是业务细节，各位自己使用的时候可以用使用其他的方式。

那么当使用这个正则表达式匹配这个链接之后呢，就可以得到这个链接相应的一个匹配结果，如果是的话，那我就用新的这个mirror的地址。生成一个新的这个镜像的地址。呃，去返回给刚才前面那个函数，那么前面就会重定下这个镜像的地址啊，那就完成了。所以这个插件就这么简单，当你创建好项目之后，你只要在background页面插入一些代码，调用这个拦截请求的listener，然后在listener当中使用你的业务逻辑去完成，那自然就可以对浏览器的一些流量做控制，不管你做什么都可以，正常来说做什么都可以，你只要严格按照官方文档的要求都可以做。所以总结来说就是backgrounds是一个常驻的页面，它可以理解为浏览器扩展的一个后台任务，你可以做。拦截请求，你可以做定时任务，类似这样一些内容，那么web request API是浏览器发出请求，呃，能够支持你在浏览器发出请求的时候进行拦截，那具体web request有哪些生命周期？

比如说他是发出前收到后啊，那这些都可以参与b extension，就是微软啊，不是，就是谷歌官方给出的文档当中的一些A说明，那刚才前面那个项目都大部分将这些API包装成c shop，所以正常来说你在c shop当中访问这些API都是非常容易的。那这个就是，呃，第一个。插件相应的一些内容。啊，有什么疑惑没？没有就继续第二个。好，果然是非常简单对吧，两个月半就只能讲这些东西了，好了，那我们开始第二个，第二个是什么呢？第二个就是HTPS跟CSV，那这个事例到底讲什么东西呢？就是说你正常在服务端上能做的事情，你用浏览器现在也基本上都可以完成，他们都比较简单，因为你有了C，那你原来能做的事情，现在可能大部分也都可以做了，那就。讲一下这个到底包含什么东西，那也是一个浏览器扩展，我现在把第第二个浏览器扩展打开，就是CSVDEMO这个。

那各位可以看到，其实这个index就是这个，这个就是其实就是刚才那个background页面，当你每打开一个扩展，下面都会有这样一个background页面，它就表示了这个插件在后台运行。那刚才现在这个HTTP跟CSV的用例是什么呢？就是当我点击这个按钮的时候，他会去请求deer现在最新的这个release的呃列表，然后把它渲染为页面上的一个table，并且会生成一个链接用来下载这个CSV。啊，是不是非常是不是非常的简单，那就是下载这个C主，那我就简单的介绍一下这个过程大概是做了什么事情就可以了，那首先呢。同样的，这个页面并不是一个后台任务，所以你只要增加一个页面，那我们这个页面用什么呢？就直接用index就好了，对吧？这是一个无无关紧要什么，什么页面都可以，你可以加manager index index2，哎，都是可以的，然后加了这个类之后，你可能要处理CSV，处理这个HTTP，所以你需要引入一些包，那比如说CSV，你可以用csv helper，那HTP呢，你可以用加上new，当然这个可以按照你任何的喜好，你可以web request或者用其他的方式都是没问题的。

引入这些包之后，那刚才前面提到是用对吧，那的话你就需要定义一个这个interface来表示你要请求的API的话，你只要定义这个interface，然后加上一个方法以及他请求的路径名就可以了，剩下的代码就不需要了，然后呢，定义一个这个。返回的正文。啊，就OK了。然后有了这个Fi之后呢，我们刚才前面不是有个index页面吗？所以你需要在页面上画一些控件，控件比较简单，有一个按钮，诶第五行有个按钮，然后如果当CSV文件生成之后，生成一个A标签，这个A标签是使用BASE64将这个文件下载下来的，如果你喜欢用HTML5的API的话也是可以的，那AA标签是最简单的，直接这样CSV，然后后面一个BASE6是好的CSV文件就OK了。那下面是当release file生成之后呢，渲染下面这个表格，如果没有的话就输出，这里没有任何数据。

啊，这是一个非常简单的页面，各位刚才也看到了，那后端代码呢，实际上就是注入这个API，刚才我写好了这个API请求get release，然后呢，请求最当我点击这个按钮的时候，O click exp，然后它会请求这个API得到最新的一个release列表，得到release列表之后呢，经过一系列下去操作，然后就会得到一个序列好的表格对象，对吧？我在表格包含三列，所以这个表格release files里面就包含三列，然后调用stage change，那么这个表格自然就渲染出来了，然后渲染出来完之后呢，用csv helper在内存创建流，然后将它格式化为CSV文件，然后被十六四就得到了一个CSV文件。啊。

一共就。几步非常简单，以前你在服务端要第三方API做的任何事情，你现在在浏览器端也是一样的，代码没有任何变化，就得到了一个最终的结果。所以这个事例只是想要告诉大家，以前在浏览器上能做的事情，你现在在服务端可能大部分也都可以做，你可以尝试一下，呃，发挥一些想象，以前可能需要在服务器端做的事情，比如说我要请求API渲染出文件，你可能现在在浏览器端也是可以的，而且这不会占用你，呃服务器的那种资源去完成这种，比如说什么CSV渲染的这种事情，你在浏览器上其上也就能完成了。啊，这个是第二个事例我要讲的内容，第二个事例我就默认大家没有问题了，好吧。那第二个事例既然没有问题的话，我们就开始讲第三个事例，第三个事例才是今天的重头戏。那第三个事例是什么呢？是我要在呃浏览器端直接编译C代码，也就是说如果我在浏览器端输入一些代码，然后编译生成，然后执行它。

啊，就是这样的一个效果，那么这个我可以来。演示一下。这个插件它的效果，那我现在打开最后也不是最后就是现在要演示的这个插件。这是一段这个。标准的conso程序，它就是输出了一个hard word，对吧，它这个输出一个hard word，然后点一下这个run，然后它就会执行，然后他会得到结果。啊，就是这样的，如果改上面这个源代码，他要点一下run啊，它就会执行。然后如果换行的话，点一下run。好吧，它就不会，就是因为换函数要加S。那我再点一下run，它就会换行，得到两个结果，这一系列的动作全部都发生在浏览器上，就是把这个代码拿去编译，编译完执行得到结果全都发生在浏览器上，没有任何的后端参与。

所以我向各位介绍一下这个东西到底怎么实现的啊，可能也是今天511个稍微有点技术技术亮点的地方，那这个东西怎么实现呢？我们也看一下刚才这个接下来PPT讲一下它怎么实现的。首先第一步要有一个页面对吧？呃，那这个也是写在个index的HTM当中的，那首先你要有一个页面，Code text area里面放一些代码，你可以用来绑定你要写的那些代码，然后呢，要有一个A标签，哦，刚才没讲到这个A标签，就是这边有个download，当我点击这个运行的时候，实际上它会生成一个D，你可以直接用这个登录把它下下来，然后你用DNSBY或者用其他方式，你能你能直接查查看到这个DLL，因为它是编译好的一个呃，DLL。然后呢，如果呃，就是这个A标签，就是这个用的，然后下面呢，有一个呃，相当于展示运行结果类pie标签，然后一个按钮，这个按钮就是刚才那个run按钮啊，非常简单的页面。

然后就开始了，如果你要在浏览器端编译代码，该怎么做？首先呢，上面这个test第97，第93行，这个test的参数就是传入的那个代码，然后调用RO。相应的一些API，那如果是你相应的AAPI的定义在哪呢？定义在下面这个Microsoft code analyze.c shop里面引入这个包，然后你就会得到这一系列的这个参数。可以引用的对象，然后将这个test编译成最后的这个c shop。啊。Comp，肯也好，Comp，然后呢，得到这个对象呢，实际上就是一个编译好的语法数了，那总的来说就是这样一个过程。他要一些引入一些对象，或者说引入一些依赖项，然后将你的这个test放到这个依赖项当中，编译成一个叫assembly的DLL的新的DLL，当然你也可以叫别的DLL是无所谓的，那编译完之后呢，就得到了一个c comp对象，那接下来一步就是将这个c comp对象做什么呢？序列化成一个。

BASE64的文件，那也比较简单，使用这个comp先转成assembly，实际上在这一步em MIT的时候，它是先转成assembly，然后我将这个assembly base64层这个六呃，一个普通的文件，然后将这个BASE64的文件以这种base的形式加载进来，就加载到当前程序域的assembly当中，加载完之后呢，并且对当前的这个输入输出流做一下重定向，因为刚才这个代码当中用的是cons right嘛，那我要捕获到那cons.right我需要对输入输出流做重定向，所以你需要对输入输出流做重定向，然后呢，在这个em当中找到那个。入口方法，那通常来说对吧，通常来说各位写的入口方法就叫呃，TEVO的main码，所以呢，就是刚才那段代码，这个代码呢，就是找你写的代码当中的static word的main用反射的方式，这个背后实际上就是用反射的方式反射你的S，找到那个static方法，然后就得到这个main方法，得到这个main方法了之后呢，你就需要将这个main方法。

当然这里是用command line，实际上面你现在直接用man点就已经能够调用它了，就已经能够调用它了，这边只是用了line呢，做了一些包装，你支持传参呀，然后参数可以格式化的一些啊操作实际上你可以理解为这一整行就是为了做main.work。所以你就调用了这个方法。所以整个过程。非常简单，拿到test的对象，然后用C呃，Rosesly去编译它，变成comp，然后就变成了sembly，然后变成了sembly，之后呢，直接去找emb的那个public方法，当然你可以用其他方法，也可以找到public方法，然后执行它。

你就得到一个最后的结果。那这有什么用呢？嗯，好像也没什么用，那首先呢，第一个呃，Blazer有一个叫做re PL的这个互操作的这种互操作的这种项目，那意思是什么？你可以在浏览器上完成我刚才完我刚才说的这个事情，我刚才说的这个事情就是编译这个代码，实际上就是有一个项目叫blazer re p这个项目。那这个项目呢？现在依需要依赖一个服务端，但是如果你可以在浏览器端直接完成所有的编译跟执行，那么你可能就可以将这个项目做成浏览器扩展的方式来实现这个效果。啊，第二点就是像我说的，看起来很酷，但可能没什么大用，具体有什么实际操作啊，实际的生活应用场景的话，各位可以去尝试挖掘一下。嗯，这是我要讲的第三个事例。好，第三个事例就是这样的，各位有什么问题吗？问题啊，我我记得那个就是，呃，它是lo，它有一个直接加载半个数组的一个承载，为什么是这里是需要把它转成四个字呢。

哦，刚才实际上这个代码当中，你看这个load就是base嘛，这是base，然后刚才那个BASE64，实际上是为了那个download的按钮，能够把这个SEM下下来。就是说这一步就是这个convert To Base，六四这个string呢，只是为了这个下载按钮用的啊，真正执行的时候，实际上就是用这个原生的BI直接load assembly，然后就可以执行了。也就是说他是其实上是要把那个浏览器公享那边的东西给传递到那个，就是里面运行的那个web设备里面去放。啊，不是这个全都运行在浏览器扩展里面，就是刚才写的这所有的代码都在浏览器扩展当中运行，就是对呀，这个代码现在第80行就是这么做的，就是这么做的，刚才那个BASE64只是为了下载的时候用的，Download的时候用的。

好，没有新的问题，我们就接下来讲后面的内容。啊，这是第三个事例。直接在浏览器中编译个运行代码。然后第四个事例是一个比较复杂的事例，这个事例呢，向你描述了如何使用这个浏览器扩展的一些API来完成，比如说一些业务应用，这个业务应用是什么呢？比如说管理你的收藏夹，那管理你的收藏夹，你就可能需要用到这个收藏夹的API，可能需要用到这个，上面这些tab的API可能需要用到这个，嗯，打开关闭tab，搜索tab以及本地的存储这样一些API，那这是一个比较复杂的事例，我们可以演示一下它大概的一个效果，首先呢。首先是这个，当你点击这个插件的时候，它会弹出一个框，它就自动的将你当前的这个链接加入到你的收藏夹当中，然后呢，你可以在这里编辑你要的tag，那这些tag呢，实际上你可以认为为这些标签打上标记，然后打上标记完之后，它会调用你的浏览器的存储接口，叫storage API，然后就是些storage，将这些数据存到你的storage当中。

那这是一个交互过程，然后另外一个就是你可以制定一个专门的页面来管理你的这个收藏夹，比如说你这个manager的index，然后呢，你可以在上面做一些，比如说像呃，搜索呀，排序呀，啊，一些复杂的页面交互，这个都是可以的，而这些全都发生在浏览器里面，就是浏览器扩展里面，你不需要用一个特殊的这个服务器来，呃，叫做承载相应的服务，因为所有的这些代码全都在浏览器扩展当中。

那这个事例非常复杂，所以呢，实际上是开源项目，那各位呢，如果有兴趣的话，可以看一下这个事例相应的一些代码，以及他相应的一些做法是如何实现的，各位只要关注上面这个项目，呃，链接当中可以去安装尝试，并且提出自己的反馈，关于这个项目相应的一些内容。好，这个就是我今天要分享的所有内容了，然后现在其实上就已经直接进入到了提问环节，我相信各位好像已经提问的差不多了。麦克，给你哦。然后我想我因为我刚才看到你这个在浏览器里面编译运行这个效果了，我现在问一下，就是比如说我现在要实现一个页面里面，比如说像像那个blazer里面有个按钮，我想给他动态绑定一些脚本，比如说在他的on click里面，就通过你这个source code，然后我直接去写的话，这个可以的可行的，可以相是我其实我可以把以前的话，可能就是我的界面上的一个脚本，就直接换成c sharp的写法，然后呢就就行了，我觉得这个可能对，因为我们现在其实在在我们内部的话，我们的页面里面的脚本，其实我们都是直接动态的，但是我们是JS的嘛，但我们现在的话就可以去做一个界面，然后就可以去动态的去用CF去写一些脚本，我觉得这个在浏览器上去写CF脚本还是挺OK的一件事情，可以可以试一下，OK，那我理解好的，但是你困难。

啊，那当然对吧，你其实这样你要用，其实这样安装对用户安装就不友好了，然后呢，相当于一个CF结构了，对吧？对，针对刚才这位朋友提出的问题，就是是不是所有人都要按照这个扩展呢？实际上也可以不必要，呃，原来这个blaze I e PL项目对吧？就是我刚才提到这个blazer I PL项目，他的工作机制是什么呢？我其实可以向各位介绍一下他的工作机制当中发生了什么事情。

这个编译实际上当你点下编译按钮的时候，它会将这个服务器上面的。诶，刚才那个扩展。他会将服务器上面的D拉到本地来。我打开这个。然后注注意观察右边这个network，当我点那个run的时候，它实际上是将浏览器扩展当中的DL全都下到本地来，然后进行编译，那如果你希望他们不安装这个扩展进行编译的话，你可以直接将这些DL指向你服务器端的那些DL就可以了，那么他就不需要在本地装这个扩展，因为所有的DLL都在你的服务器端，但是呢，编译还是发生在这个浏览器端，那工作机制就是它会将远程，比如说web host上面BL全都拉下来，然后在本地编译，本地执行，那么你这种情况下是不需要装这个extension的，然后呢，这种情况下实际上就是我刚才前面介绍的place I PL这个项目它的工作机制，而我只是把它反过来，我把D全都放到extension当中，那这样子的话，我就不需要服务器存在我的DL，你只要extension装上，那自然就能编译啊，这两种方式都应该是可以的，但是呢，这个拉D的过程是省不了的，因为它怎么说呢，因为你用Rose。

编译的时候你必须要有assembly，那assembly呢？当你加载到当前APP domain之后，这个assembly的流就不存在了。那不存在的情况下，你还想要引用它，你就必须再拉一次，现在目前只能这样子做本地啊，不需要所有的方，就是刚才这个东西就是在浏览器里面做的就是，所以也有一种场景，就是说客户端我不装，等待的运行时，我只要将DL承载在服务端上，但是我可以在浏览器里面编译完成这些事情，本地不需要装任何的do net环境。

啊，这个有点像那个微软提供的一个在try. donnet.net那个项目，那个项目它就是在浏览器当中运行，但是它编译运行都发生在这个服务器上，嗯。我有一个问题，那边有那个就是那个，呃，现在这些，呃，这些拓展是不是可以正常的发布到市场里面去，呃，首先这个扩展的发布，我现在只发布成功了一个地方，就是这个微软的。呃，Mac，呃，App Store，为什么谷歌的不行呢？因为在这个浏览器扩展当中有一个权限要求叫做呃，Una eva就是有这样一个权限要求，谷歌对这个权限要求非常严格，就是这个叫做就是内容的这个安全限制，那如果你的插件要申请这个权限的话，要非常严格的审核，但现在如果你使用blaer去开发，他又必须必须要这个东西。

必须要刚才那个权限，而这个权限是源于谷歌的一个Chrome Chrome内核的一个bug，那使得他必须要有这个，那当前还在跟踪这个issue，所以你现在想要在Chrome store上发布这个插件比较困难那。微软的是可以的，因为微软为什么可以呢？因为我发布成功了啊，所以如果你想上架的话，你可以上架微软商城就没问题啊，各位可以尝试一下，如果你想做一些这种place的扩展来去上架的话哪呃。浏览器的一样的，呃，我刚才说那是内核的bug，正常来说内核bug修复完之后，你需不需要，你是不需要这个Una e v l权限的，你需要的是assembly的EVL权限，而这个权限的申请比起那个要容易一点，因为Una的VL权限通常来说是在JS端，你可以在JS端加载远程JS过来，然后执行一些奇怪的操作，比如说挖矿啊之类的，所以对这个东西要求比较严格。

诶或可访问件，呃，你说这边是吧，对，如果你的插件里面申请了这个权限。是可以的，就是相应的这个Chrome里面它有一套权限，就是我刚才说的，比如说我要拦截对吧，那我需要web request权限，我需要这个操作，这个收藏夹需要bookmark权限，相应的所有的权限都在Chrome的这个插件商城上，我现在忘记地址是什么，可以到上面去看，上面有本地文件操作的一个权限，但是那个要求也很严格。如果你要上架的话是很严格的，但是你如果自己本地就是用户用load IPA的方式是比较容易的。

课文，呃，如果你是读，你用file协议写，我没试过读是可以的。因为你用file协议是可以读的。就是你不是file冒号开头吗？然后他就是类似于像HTTP一样，就类似file这样子，你用这种协议去读是可以读到的，但是写的话我没试过，所以我也不确定。嗯。啊，于老师你好说，就是还是继这位老师说的话，就是我们下载这个依赖包，这个扩展包的时候，在我本地，比如在C盘或者在D盘，如果你这个包里面就是有人恶意在里面写了一个VBS脚本，然后在C盘的话，你这样触发会执行这些东西吗？就是这个安全机制有有有吗？这个web SIM这个。首先如果是上架的包，它是有哈希的，就是上架的时候他会用公司要加密，就是比如说我要上到这个微软的商城，微软会给我颁发一个公钥，他每次下到本地的时候，他会用公钥去验这个文件包变了没有，如果变了它是装不上的，所以里面就不可能带有你开发者未加入的那些文件。

那如果你是用这种load ipad的话，那当然是没有限制的，因为你他就认为你是一个本地的开发者，所以你这个时候如果在里面插入一些恶意的代码，他有可能是会执行的。选择是客户或者说你要把他C盘的东西或者东西给这些文件给删了，这这个我就考虑这个问题啊，你说嗯，这个插件是装在哪，然后客户可能把这些文件删了啊对，就是我们这不是呃呃blaer是这个我。啊，第二错啊，是的是的，所以不要去装那些莫名其妙的插件，这并不是，这并不是blazer存有的问题，你用JS写这样的插件也是可以的，就是警告各位不要去装那些莫名其妙的插件哦，明白了，原理上是可以的，是可以这样子对，你用S也能做，并不是一定要bla啊，明白了，谢谢于老师，嗯。

好，还有其他的问题吗？如果他只能是。呃，如果你基于我今天介绍的这个方案，因为它是基于websembly的，所以IE就必须10亿以上，就是支持assembly的都可以，但是如果你比如说我要用原生JS，那是所有的都可以。对对对，它编译之后呢，呃，各位该才我其实可以打开这个I支持，是啊是啊，其实我不了解，我就两个半月，那总的来说如果是这样的话，那刚才那位朋友说的就是对的，主要以官网上面关于这个webemb需要支持的运行时为主，如果上面写的不行的话，那就是不行的。

然后刚才提到就是说如果你插件的形式装载完之后，刚才不是看到那个图吗？实际上是这样的，那相应的一些DLL全部都在framework当中，实际上这就是个正常的websem，它的文件夹结构以及它的一些文件，只是附加了一些脚本。实际上跟原生你直接用blaze创建一个assembly项目是类似的。现场的话还有其他的问题吗？我们B站的弹幕有有人说实际上是没有权限的web somebody没有办法操作本地文件哦，那就肯定是不行的，如果他有经验的话，那就是不行的，嗯。

你们还有其他的问题吗？如果没有的话，也请于老师，呃，下来之后选一位观众，把这个充电宝送给他，选一位观众吧，你自己下来选就可以了，然后这样吧，对。挺高的，对刚才提问的朋友里面还提问的。我都忘了，然后那个可不可以再分享一下，就是这个项目就是blazer.extension这个项目的地址。嗯。你看现在我就打过来给的号了，有的时候就是这样的，呃，刚才那个项目的地址我可以在这个地方，各位如果在线上的朋友记得截图好吧，截图截一下，当然我们这个相应的这次的分享也都会有后续的视频内容，所以各位也可以到视频上去查，他可能需要一些时间，那这个就是刚才我提到这个项目。然后今天演示的那些插件的相应的一些DEMO呢，各位可以通过giu上找到这些DEMO，呃giu呃，我的账号是这个，呃，这叫牛逼36524，嗯，我相信各位很多朋友都进过这个账号，然后呢，这个上面呢，我有一个仓库叫DEMO，有个叫DEMO的仓库。

在这个里面可以搜一下，那所有的这个事例，刚才所有的五个插件，各位可以在这个里面找到啊对，我现在打不开这个get up，所以可能是出不来的。啊，至于那个项目就是这个。好的，那我们这一场分享的时间也差不多了，这里非常感谢于老师精彩的分享，那么接下来我们有请。