首页
学习
活动
专区
工具
TVP
发布

Vue.js 插件开发详解

本文作者:IMWeb 林鑫 原文出处:IMWeb社区 未经同意,禁止转载 前言 随着 Vue.js 越来越火,Vue.js 的相关插件也在不断的被贡献出来,数不胜数。...比如官方推荐的 vue-router、vuex 等,都是非常优秀的插件。但是我们更多的人还只停留在使用的阶段,比较少自己开发。...所以接下来会通过一个简单的 vue-toast 插件,来了解掌握插件开发和使用。 认识插件 想要开发插件,先要认识一个插件是什么样子的。 Vue.js插件应当有一个公开方法 install 。...先新建个js文件来编写插件:toast.js // toast.js var Toast = {}; Toast.install = function (Vue, options) { Vue.prototype...既然 $msg 能获取到,那么我们就可以来实现我们的 vue-toast 插件了。 开发 vue-toast 需求:在组件中通过调用 this.

5.5K60
您找到你想要的搜索结果了吗?
是的
没有找到

Vue.js 插件开发详解

前言 随着 Vue.js 越来越火,Vue.js 的相关插件也在不断的被贡献出来,数不胜数。比如官方推荐的 vue-router、vuex 等,都是非常优秀的插件。...但是我们更多的人还只停留在使用的阶段,比较少自己开发。所以接下来会通过一个简单的 vue-toast 插件,来了解掌握插件开发和使用。 认识插件 想要开发插件,先要认识一个插件是什么样子的。...Vue.js插件应当有一个公开方法 install 。...先新建个js文件来编写插件:toast.js // toast.js var Toast = {}; Toast.install = function (Vue, options) { Vue.prototype...既然 $msg 能获取到,那么我们就可以来实现我们的 vue-toast 插件了。 开发 vue-toast 需求:在组件中通过调用 this.

4.1K20

初探 利用 javascript 开发 Chrome 浏览器插件

初探 利用 javascript 开发 Chrome 浏览器插件 前言 这几天运维组的小伙伴正在给新开发的一个商城录入一些数据。其中图片不是很好找,于是,在某个B2C网站下载图片。...所有女生都大声尖叫,这活儿不是人干的……于是,技术组老大临时任命我开发一个 chrome 插件来帮助他们解决这个问题。...Chrome 浏览器插件原理 首先,这个插件要先对页面分析,得到上面所需要的所有图片的URL 其次,要对这些URL进行处理,得到能用的格式。 最后,把这些图片全部下载下来。...manifest.json 插件基础文件 在这个插件中,规定插件的名称、版本、以及所需要的权限,以及后台执行的js文件,和其他信息。 别看不长,累死我了。...我居然也会开发浏览器插件了-_-||| 总结 什么事情,原理清楚了,善用搜索引擎,一定能够找到解决方法。谷歌比百度在这方面强太多了。

82310

快速开发一款浏览器插件

思路 我们需要通过浏览器插件来实现 要让插件只操作B站 只要是有收藏这个图标的页面都要让他变成稍后再看的数据 同过js来获取具体的稍后再看的数据 图片 通过js修改原有的页面样式 开始实践 首先我们在电脑的任意位置创建一个文件夹...,我们暂且交通“Bilibili Support” 然后我们需要创建如下几个文件 manifest.json:主要用了描述我们这个插件的一些配置,以及版本等信息。...background.js:整个插件的主入口 content.js: 我们的业务逻辑,当然你也可以将它和background.js合并再一起,但是为了后面好维护我们还是分开写。...name:给这个插件起一个名字 version: 开发的版本 permissions:我们需要的权限,由于我们需要操作打开的网站,和执行JavaScript,因此添加了这两个权限 host_permissions...试运行我们的插件浏览器中输入edge://extensions 并打开开发人员模式 我们选择上面的加载压缩的扩展,并选择我们之前创建的目录 这是已经可以看到了,如果有错误,这里也会提示。

14800

win10 Edge浏览器插件开发

win10最好用的浏览器-Edge  支持插件了  是一个商机哦,可以把开发插件发到应用商店,还能设置收费下载呢 Edge浏览器扩展API还在开发当中,目前已经支持了大部分的API 。...查看具体的API支持情况,请参考supported APIs,查看API的开发进度-请参考extension API roadmap 。下面讲解下如何创建一个简单的插件并添加到Edge浏览器上。...,接下来就把刚开发好的插件添加到Edge浏览器。...打开Edge浏览器,地址栏输入about:flags,在 “开发者设置” 里将 “启用开发人员扩展功能(这可能让设备处于危险之中) ” 选项勾上,点击工具栏上的“...”按钮(即菜单键),选择 “扩展”...至此已经开发好了一个简单的插件,debug插件方法请参考这Debugging extensions。 ?

1K20

浏览器插件开发-manifest文件解读「建议收藏」

浏览器插件开发-manifest文件解读 调研资料 当前文档基于 manifest v2, 最新版的 manifest v3 有很大不同,建议查看官方文档 manifest.json 官方文档...Chrome Extension API 360浏览器插件文档 中文, 虽然内核差不多但是不一定与 Chrome api 一致, 可以作为参考 Chrome 官方案例库 案例 如何实现网页和Chrome...default_icon": "xxx.png 显示在右上角的图标button" }, } 配置项简介 1. manifest_version 必填 清单文件格式的版本, Chrome 18 开发...写 2 即可 2. name 必填 插件名称 3. version 必填 插件版本,发布新版本后,浏览器会比较其已安装的插件的版本,有更新的版本则会自动更新 4. description...监听 history 浏览器历史记录操作权限 storage chrome.storage 的使用权限(注意不是浏览器的 localStorage) tabs 选项卡权限,允许创建、修改、重新排列选项卡

2.1K20

使用 C# 开发 node.js 插件

项目需求 最近在开发一个 electron 程序,其中有用到和硬件通讯部分;硬件厂商给的是 .dll 链接库做通讯桥接, 第一版本使用 C 写的 Node.js 扩展 ;由于有异步任务的关系,实现使用了...插件会显得有所束缚,木有那种随心所欲写 C 的那种“顺畅”;尤其是多线程部分 综上考虑,加上通讯功能又是调用 .dll 文件,索性转战 C#,对于 windows 来说再合适不过了;但是问题是 C#...插件实现的功能只是收到命令后调用 .dll 去操作硬件,再时时能把结果返回即可。...实现方式确实有很多种,这里用 Console.WriteLine() 通过标准的 stdio 方式实现,算不算是一个开发成本不高的讨巧做法呢!...大致流程 image.png 如果觉得这篇文章有难度,可以看简单版的哦 Node.js 利用 stdio 标准输入/输出实现与 C# 程序通讯 开发环境 C# 代码部分使用 Visual Studio

1.9K30

开发一个浏览器插件从未如此简单 ...

实际上我们平时说的浏览器插件指的就是浏览器扩展,它可以帮助我们实现非常多强大的能力。...实际上啊,浏览器扩展用到的技术非常简单,就是 Web 技术,只需要几个简单的 HTML、CSS、JS 文件,以及浏览器规定的扩展文件就可以运行起来,不过下面几个问题可能让我们开发起来有些阻碍: 「技术栈...「部署发布」 发布过程比较麻烦,如果你的插件想要尽可能多的在不同环境生效,你需要把开发好的程序进行适配,并且手动发布到不同的浏览器(如 Chrome、Firefox、Edge)扩展商店。...Plasmo 的官方是这样描述它的:就像浏览器扩展的 Next.js!...另外,在官方文档(https://docs.plasmo.com/quickstarts)中给出了和下面一些不同技术栈的搭配开发的能力: Next.js Stripe Redux Tailwind CSS

1.4K30

使用Preact 开发基于Shadow DOM的JS插件

前言 第三方JS插件在日常开发中经常会使用到。对于一些不涉及到展示的功能插件,仅需要引入一个js文件即可,但对于一些界面级插件,如轮播图、富文本编辑器等,往往还需要单独引入css文件使之展示正常。...如果可以仅引入一个js文件,并且插件样式能完全做到与主体应用隔离,那么插件的通用性也能进一步提高。...MVVM框架当然也可以用来开发界面级JS插件,甚至会使事情变得更加简单。 JS插件一般都是轻量的。相比于使用React,Preact更符合我们的要。...以Rollup为例,使用rollup-plugin-postcss插件,即可完成: rollup.config.js import postcss from "rollup-plugin-postcss...); shadow.appendChild(shadowRoot); render(, shadowRoot); 复制代码 至此就能在Shadow DOM上像写普通React应用一样开发插件

1.9K30

vue.js 初体验:Chrome 插件开发实录

作为一个UI开发,平时跟Chrome浏览器打交道最多,于是就整了一个Chrome插件可以及时预览对应Animate.css中的动画效果并生成对应的动画代码,这样在实际开发中碰到一些需要使用到Animate.css...下面就以一个简单的flexbox对齐预览的插件为例,讲讲使用vuejs开发Chrome插件开发体验和效率。...Chrome插件开发基本知识 在应用商店中下载下来的插件基本上都是以.crx为文件后缀,该文件其实就是一个压缩包,包括插件所需要的html、css、javascript、图片资源等等文件。...开发一个插件就跟我们平时做web开发流程没多大的区别,就是先搭好基本的页面,然后使用js来写交互逻辑等功能。...一个简单的插件就完成了,通过这一个简单的chrome插件就可以体验到vuejs在web开发中简单、优雅的魅力,还有什么理由不用起来呢。

9.9K50

推荐几个火狐浏览器插件好_安卓火狐浏览器插件

因为各类屏蔽广告的插件有损谷歌自己投放的广告的收益,因此谷歌对广告屏蔽插件下手了,削弱插件的屏蔽效果,以展现更多的广告。谷歌还通过在自家网站上提示不支持其它浏览器的手段,来打压其它浏览器。...前谷歌工程师透露由于厌倦适配该公司曾有计划的杀死微软浏览器 谋智基金会前高管发文抨击谷歌靠破坏其他浏览器推广谷歌浏览器 新版YouTube屏蔽微软EDGE浏览器要求用户换成谷歌浏览器 谷歌浏览器打击广告屏蔽软件...其优点在于,可以更改谷歌翻译的服务器(很多同类插件做不到这一点),这对中国用户格外重要。...2017年9月14日,网站coinhive.com上线,提供用于挖掘门罗币的JavaScript脚本(https://coinhive.com/lib/coinhive.min.js),此后该脚本在全球范围内疯狂扩散...火狐上有相应的FDM插件,可以取代浏览器自身的下载器。推荐大家尝试尝试。

3.8K10

开发环境】VSCode 安装插件 ( 简体中文插件 | Open in Browser 插件 | Auto Rename Tag 插件 | JS-CSS-HTML Formatter 插件 )

即可完成插件安装 ; 三、安装 Open in Browser 插件 ---- 在扩展工具面板中 , 搜索 Open in Browser 插件 , 搜索出来后 , 点击安装 , 安装该插件 ;...安装后的效果 : 在空白处点击右键 , 可以显示 Open in Browser 选项 ; 四、安装 JS-CSS-HTML Formatter 插件 ---- 在 扩展工具 面板中 , 搜索...JS-CSS-HTML Formatter 插件 , 安装该插件 ; 安装该上述插件后 , 将代码打乱格式 ; 使用 Ctrl + S 保存代码 , 会自动将代码进行格式化 ; 五、安装...Auto Rename Tag 插件 ---- 在 扩展工具 面板中 , 搜索 Auto Rename Tag 插件 , 安装该插件 ; 安装完该插件后 , 修改标签名称时 , 会自动将另一个成对的标签进行重命名操作...插件 ;

9.5K30

第105期:一次失败的浏览器插件开发

但是一直存在的问题是,每次写的时候总是总是会很麻烦,所以想着自己开发一个写文章的工具,存到自己的数据库中,这样也方便以后自己做迁移。 但是,自己开发一套前端+服务端的东西,我自己写起来有比较费劲。...所以想直接开发个基于掘金文章功能的浏览器插件,每次直接在掘金上写,写完了直接点开插件进行复制分发,一键上传git仓库,一键生成海报等功能,这样岂不是方便很多?...因为即便我把这个服务的代码写好了,浏览器插件开发完成来。插件发布的时候,我也没法把服务端的代码一起发布到,也没法实现安装插件时自动在客户端启动我这个服务。...所以这个从浏览器插件一件上传到git仓库的想法有些异想天了。 但是也稍微有些收获。就是又熟悉了一下浏览器插件开发流程,以及熟悉了如何用vite进行浏览器插件开发。...浏览器插件开发的核心在于manifest.json文件的配置。

45120

auto.js自动化处理插件 - 葡萄浏览器多账号签到

auto.js自动化处理插件 - 葡萄浏览器多账号签到 作者:matrix 被围观: 3,901 次 发布时间:2020-02-11 分类:零零星星 | 一条评论 » 这是一个创建于 932...环境:mi8 Android9 AutoJs[4.1.1] 葡萄浏览器com.qwh.grapebrowser AutoJs在应用市场都被下架了,留个下载的渠道: https://github.com...测试的app是葡萄浏览器com.qwh.grapebrowser,最终效果是运行后自动切换账号来签到。...开发环境vscode 有vscode插件开发很方便。如果没有开发调试环境,我每次都要微信发送代码的消息,toast,再上app清空粘贴运行,累死。给hyb1996好评,相当不容易。...auto.js APP设置里打开连接电脑,填入电脑端内网ip。当然手机和电脑是要一个内网环境 运行Run命令就可以在app端运行插件脚本。注意默认模式需要打开在Auso.js界面中启动。

2K30

js插件教程

;我为了方便都写到一个html中了;请把这个script标签中的内容单独写在一个js文件里 //整个插件写在一个立即执行函数里;就是function(){}();函数自执行;保证里面的变量不会与外界互相影响...号(叹号)或者;(分号)这不是写错了,为了防止那个二货写的js结束没有分号;而可能发生报错 /* ;function(win,doc,$,undefined){ }(window...比如你要点击按钮 添加input的值到 div里 var addHtml = function(demo,btn){//插件名,调用的时候直接new一下插件名就行了并传参数或者传对象(一般这个函数名手写字母大写比较好...new addHtml("demo-2","add-2"); //这里是实例2调用插件的代码 //是不是明白为什么要写插件了;要封装;两个相同组件即使有相同的class名在dom...--这里是最简单的插件写法;当然还有传对象参数的插件等等。。。。-->

35K10
领券