首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用Vue开发Chrome插件

前言​ 我当时学习开发 Chrome 插件的时候,还不会 Vue,更别说 Webpack 了,所以使用的都是原生的 html 开发,效率就不提了,而这次就准备使用 vue-cli 来进行编写一个某...B 站获取视频信息,评论的功能(原本是打算做自动回复的),顺便巩固下 chrome 开发(快一年没碰脚本类相关技术了),顺便写套模板供自己后续编写 Chrome 插件做铺垫。...,tab 页,axios,如下图 选择完后,将会自动下载依赖,通过 npm run server 将会在根目录生成 dist 文件夹,将该文件拖至 Chrome 插件管理便可安装,由于使用了 webpack...用过 Vue 的都知道写网页很方便,写 Chrome 插件未尝不是编写一个网页,当时的我在接触了 Vue 后就萌发了使用 vue 来编写 Chrome 的想法,当然肯定不止我一个这么想过,所以我在 github...如果有涉及到爬取数据相关的,我肯定是首选使用 HTTP 协议,如果在搞不定我会选择使用 puppeteerjs,不过 Chrome 插件主要还是增强页面功能的,可以实现原本页面不具备的功能。

3.4K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Chrome插件

    Postman 无论你是开发人员,还是测试人员,当你想快速测试下某个接口是否运行良好或者想知道这个接口返回参数列表结构,我们就可以使用Postman这款工具,我们只需要选择get或者post等方式,并填写相应参数就可以发起调用请求...4. jsonView 由于JSON的优点,目前系统接口返回数据往往通过Json格式,而在浏览器访问接口返回的JSON数据并没有安装JSON格式展现出来,此时,我们就可以给Chrome浏览器安装JSONView...插件,通过它可以方便我们的阅读。...如果想让自己的网站更加酷炫,那么就使用Stylish插件,保准让你网页风格显得与众不同。 ? 6....上述这些插件,大家可以发送关键字"Chrome插件"获取,接着打开chrome浏览器输入chrome://extensions,最后只需要将上述插件拖动扩展程序处即可。

    1.4K20

    Chrome 插件

    我是一个重度的 Chrome 使用者,还是给大家带来一波好用的 Chrome 插件吧,都是我自己亲身使用过觉得不错的,推荐给大家。 嗯......,这下不用领 Mac 了吧。...超级截图录屏大师是一款录屏神器,也是一款截屏神器.屏幕截图 & 图片编辑,屏幕录像&视频编辑,所有这些截图,录屏功能,都被一气呵成的集成到插件和对应的网站服务中。...就是让我们可以不使用 IDE 来快速查看代码之间的关系 Sourcegraph GitZip for github 可以将 github 仓库的子目录和文件压缩成 zip 下载。...JSONView Web Developer 用过 Chrome 浏览器调试 Web 的都应该用过自带的 DevTools 工具,而 Web Developer 插件则又增强了一些功能,比如禁 Javascript...,禁插件,编辑 css,cookie,form 等。

    1.5K10

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

    作为一个UI开发,平时跟Chrome浏览器打交道最多,于是就整了一个Chrome插件可以及时预览对应Animate.css中的动画效果并生成对应的动画代码,这样在实际开发中碰到一些需要使用到Animate.css...下面就以一个简单的flexbox对齐预览的插件为例,讲讲使用vuejs开发Chrome插件的开发体验和效率。...Chrome插件开发基本知识 在应用商店中下载下来的插件基本上都是以.crx为文件后缀,该文件其实就是一个压缩包,包括插件所需要的html、css、javascript、图片资源等等文件。...开发一个插件就跟我们平时做web开发流程没多大的区别,就是先搭好基本的页面,然后使用js来写交互逻辑等功能。...这些都会在 Chrome 浏览器中使用,向用户显示已安装的扩展程序,同时在 Chrome 网上应用店中向潜在的新用户显示您的扩展程序。

    10.1K50

    Chrome插件开发

    前言​ 相关文章 谷歌官方文档 (需翻墙) Chrome 插件开发全攻略 (强烈推荐看这一篇!) 你只需要看完上面那篇文章和掌握一些前端开发基础,就足以自行编写一个 Chrome 插件。...什么是 Chrome 插件​ 如果你用过 Chrome 浏览器的话,也许会用到过一些插件,其中比较知名的就是油猴插件,通过这些插件能够帮你例如自动完成一些功能,屏蔽广告,相当于一个浏览器内置的脚本。...应该来说这是 Chrome 扩展开发,不过说 Chrome 插件更顺口,后文也会说成 Chrome 插件。...安装 Chrome 插件​ 首先打开 Chrome,如下图即可进入插件的管理页面 这时候记得把右上角的开发者模式给勾上,如果不勾上的话你无法直接将文件夹拖入 Chrome 进行安装,就只能安装.crx...然后将写好的 Chrome 插件文件夹拖入到刚刚打开的插件管理页面即可。

    3.9K20

    常用 Chrome 插件

    来自 | 嘟嘟的博客 链接 | http://tengj.top/2018/02/17/ggcj/ 前言 相信很多人都在使用 Chrome 浏览器,其流畅的浏览体验得到了不少用户的偏爱,...通用类插件 1、OneTab:将无数 Tab 合并在一个页面 很多时候我们在一个窗口打开太多的tab,每一个tab太小不容易管理,这时候使用OneTab能够把所有tab收起放在一个页面,点击就可打开该...离线版下载地址: https://u14797164.pipipan.com/fs/14797164-237430000 4、Adblock Plus:免除广告困扰 只要是使用 Chrome...在安装了这款插件后,使用者可以通过点击WhatRuns图标来打开插件窗口,通过该窗口使用者可以轻松了解网站的技术信息 离线版下载地址: https://u14797164.pipipan.com...237430108 42、WEB前端助手 FE助手:包括字符串编解码、图片base64编码、代码压缩、美化、JSON格式化、正则表达式、时间转换工具、二维码生成器、编码规范检测、页面性能检测、栅格检测、JS

    1.6K10

    Chrome 灵魂插件

    给大家推荐一些常用的 chrome插件,还是非常不错的,大家可以用起来看看。...前言 相信很多人都在使用 Chrome 浏览器,其流畅的浏览体验得到了不少用户的偏爱,但流畅只是一方面, Chrome 最大的优势还是其支持众多强大好用的扩展程序(Extensions)。...7、下载+ Chrome的下载管理在二级菜单里,进去很不方便。装了这个插件就可以直接看和管理,很好用。...26、Tampermonkey 俗称‘油猴子’,方便的管理插件插件,你试试就知道如何的优秀。 27、Code Cola Code Cola是一个可视化编辑在线页面css样式的chrome插件。...28、WEB前端助手 FE助手:包括字符串编解码、图片base64编码、代码压缩、美化、JSON格式化、正则表达式、时间转换工具、二维码生成器、编码规范检测、页面性能检测、栅格检测、JS运行效率分析等等你日常生活中不可缺少的插件

    84420

    Chrome 灵魂插件

    不看结果盲测一下,肯定是 Chrome 遥遥领先,特别是在程序员这个群体里面应该占比更高。 我使用谷歌浏览器也近10年了,不是为了在开发过程中测试,基本上不会再用其它浏览器了。...所以有时候我们可以称 Chrome 插件,就是 Chrome 浏览器的灵魂,今天我就给大家推荐 6 款 Chrome 灵魂插件。...Video Downloader professional 是一款为 Chrome 浏览器用户打造的简单好用的视频下载插件。 该插件在安装以后,我们在浏览视频的时候就可以一键对视频进行解析下载。...(插件下载地址见文末) 实际上我 Chrome 浏览器安装了近20多个插件,以上是我平时使用比较多的几款,由于篇幅有限改天给大家继续介绍。...另外,由于众所周知的原因, 大家都不能直接下载 Chrome 插件使用,因此这里给大家介绍另外一种安装方式。

    68420

    chrome插件 DIY

    除了chrome本身的基本能力(控制台等)外,能大幅提高这个神器的使用体验的是,可扩展能力(插件)以及丰富的插件生态。...每个人根据使用习惯会有自己的一套插件配置(鼠标手势、代理配置等等),这些插件包括具体的插件的配置信息,甚至可以和你的google账号绑定,当你换一台电脑,只要使用相同的google账号登录chrome,...当你打开chrome的“扩展程序”界面,看着琳琅满目的插件,有没有想过亲自动手,打造一个自己的插件呢?当然,这种想法不应该是闲着某个部位疼,刻意的去开发一个连自己都不会实际使用插件。...而应该是发现现在的插件库里,没有一个能解决自已在使用chrome过程中某个痛点的插件。...好,假设现在你在chrome使用上想要一个扩展功能,但用各种关键字在各种可能找到答案的地方都搜索了,仍然没有看到想要的插件。这个时候,就可以考虑自己开发了。

    3.1K60

    chrome插件 DIY

    除了chrome本身的基本能力(控制台等)外,能大幅提高这个神器的使用体验的是,可扩展能力(插件)以及丰富的插件生态。...每个人根据使用习惯会有自己的一套插件配置(鼠标手势、代理配置等等),这些插件包括具体的插件的配置信息,甚至可以和你的google账号绑定,当你换一台电脑,只要使用相同的google账号登录chrome,...当你打开chrome的“扩展程序”界面,看着琳琅满目的插件,有没有想过亲自动手,打造一个自己的插件呢?当然,这种想法不应该是闲着某个部位疼,刻意的去开发一个连自己都不会实际使用插件。...而应该是发现现在的插件库里,没有一个能解决自已在使用chrome过程中某个痛点的插件。...好,假设现在你在chrome使用上想要一个扩展功能,但用各种关键字在各种可能找到答案的地方都搜索了,仍然没有看到想要的插件。这个时候,就可以考虑自己开发了。

    2.2K20
    领券