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

Vue 开发自己 Chrome 扩展

在本教程,我将向你展示如何为 Chrome 构建一个能够改变新标签页行为简单扩展。...; 3}); 最后安装扩展程序。打开 Chrome 并在地址栏输入 chrome://extensions/。你应该看到一个显示已安装扩展程序页面。...但是出于本教程目的,我将用 Vue 和令人敬畏 vue-web-extension 样板来实现此功能。 Vue 可以让我又快又好地编写更有条理代码。...接下来,切换到项目目录并安装依赖项: 1cd new-tab-page 2npm install 然后就可以样板提供脚本构建我们扩展了: 1npm run watch:dev 这会将扩展构建到项目根目录...在 src 文件夹还有一个 icons 文件夹。如果你看一眼 Chrome 工具栏,会看到我们扩展程序新图标(也被称为 browser action)。这就是从此文件夹拿到

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

TypeScript编写React最佳实践

你可以运行以下面的命令: npx create-react-app my-app --template typescript 这可以让你开始使用 TypeScript 编写 React 。...社区提出准则: 在编写库或第三方环境类型定义时,始终将 interface 用于公共 API 定义。...通常,在 React 和 TypeScript 项目中编写 Props 时,请记住以下几点: 始终使用 TSDoc 标记为你 Props 添加描述性注释 /** comment */。...常见例 本节将介绍人们在将 TypeScript 与 React 结合使用时一些常见坑。我们希望通过分享这些知识,您可以避免踩坑,甚至可以与他人分享这些知识。...在本文中,我们介绍了配置,组件,Props,Hook,常见例和第三方库。尽管我们可以更深入地研究各个领域,但这应涵盖帮助您遵循最佳实践所需 80% 。

4.7K51

关于chrome插件编写小结

这里有一篇chrome官方提供插件编写例子 popup.html说明,就是浏览器导航上插件按钮点击后弹出页面...background.htm是一个始终运行于浏览器后台页面,浏览器关闭时它才被关闭,可以作为一个监听者 地址栏访问:chrome://extensions/  载入编写插件目录 ?...popup.html可以使用ajax进行跨域请求数据,但受manifestpermissions选项限制(需要指定相应域名),content_scripts跟页面一样,不能直接跨域请求数据 二、...content_scripts 与浏览页面生命周期同步 四、消息传递 一般来讲,是在popup.html操作后,需要同步至各content_scripts,这就存在几个问题: 1、popup.html...被激活时,如何广播消息至各tab页; 2、当激活指定tab页时,content_scripts如何获取popup.html存储相关数据; 当popup.html关闭时,content_scripts

1.8K30

那些实用 Chrome 扩展神器

作者:苏生不惑 来源:苏生不惑 之前已经写过不少Chrome扩展那些我常用 Chrome 扩展,这里继续推荐那些实用Chrome扩展 ,所谓实用就是能解决实际问题。...简单来说就是打开谷歌扩展管理页面 chrome://extensions/ ,然后将下载crx文件拖进去,如果提示该扩展程序未列在 Chrome 网上应用店,并可能是在您不知情情况下添加或者程序包无效...下载后目录结构如下,.md文件使用markdown软件Typora 打开,看看之前文章 Markdown 写简历和 PPT ? ? 留言备份文件内容 ?...office就能打开Word等文档,直接将文档拖进 Chrome 查看,并且可以进行简单编辑,非常方便,当然你也可以谷歌云盘 https://www.google.com/drive/ 在线编辑 Word...hl=en 截图 ocr 这个扩展让你方便复制图片/视频/PDF文字 https://ocr.space/copyfish ? 打开这篇文章那些我常听中文播客节目,图片有中文的话先设置语言。

1.1K20

从零实现Chrome扩展

从零实现Chrome扩展 Chrome扩展是一种可以在Chrome浏览器添加新功能和修改浏览器行为软件程序,例如我们常用TamperMonkey、Proxy SwitchyOmega、AdGuard...描述 实际上FireFox是才第一个引入浏览器扩展/附加组件主流浏览器,其在2004年发布了第一个版本扩展系统,允许开发人员为FireFox编写自定义功能和修改浏览器行为软件程序。...而Chrome浏览器则在2010年支持了扩展系统,同样其也允许开发人员为Chrome编写自定义功能和修改浏览器行为软件程序。...,要接上次工作怎么办,Google答复是chrome.storage类似存储来暂存工作任务,等待下次激活。...此外注册Chrome扩展开发者价格是5$,注册之后才能在谷歌商店发布扩展。那么首先,我们先在popup绘制一个界面,用来展示当前扩展状态,以及提供一些操作按钮。

44520

那些实用 Chrome 扩展神器

之前已经写过不少Chrome扩展那些我常用 Chrome 扩展,这里继续推荐那些实用Chrome扩展 ,所谓实用就是能解决实际问题。...简单来说就是打开谷歌扩展管理页面 chrome://extensions/ ,然后将下载crx文件拖进去,如果提示该扩展程序未列在 Chrome 网上应用店,并可能是在您不知情情况下添加或者程序包无效...下载后目录结构如下,.md文件使用markdown软件Typora 打开,看看之前文章 Markdown 写简历和 PPT ? ? 留言备份文件内容 ?...office就能打开Word等文档,直接将文档拖进 Chrome 查看,并且可以进行简单编辑,非常方便,当然你也可以谷歌云盘 https://www.google.com/drive/ 在线编辑 Word...hl=en 截图 ocr 这个扩展让你方便复制图片/视频/PDF文字 https://ocr.space/copyfish ? 打开这篇文章那些我常听中文播客节目,图片有中文的话先设置语言。

88620

React路由使用

react配置前端路由一般会使用react-router这个包,但是下V4版本之后,这个包针对不同开发环境被拆分成了不同包,在web我们使用react-router-dom。...2、从react-router-dom中导出需要使用模块组件,这里面有: a、路由最外层组件 Router b、Switch包裹组件,作用是匹配路由后只渲染一个组件 c、Route站位组件...3、结构布局,Router在最层,Switch在中间层包裹所有Route,Link放在导航部分,一般Link部分会放在页面公共部分。...上面三步基本基本能满足大部分React路由需求了,但是这里面有需要大家注意地方: A、首先是路由匹配是从上到下,也就是在switch包裹Route,先匹配/about,在匹配/users,在匹配...以上便是React路由使用,希望对你有所帮助。

1.4K40

首个Chrome扩展发布了

忙活了有一段时间,零零散散写了一个Chrome扩展。这里发发一篇文章安利一下。 怎样一个扩展呢 它是一个Gmail 过滤器辅助工具,使用这个扩展可以轻松创建邮件过滤器。 有图有真相 ?...如何下载 Chrome Store 大中华局域网用户下载地址 为什么写这个扩展 还是那个原因,自己遇到了不爽与痛点。 我是一个重度Gmail用户,工作邮箱使用Gmail托管。...而是邮箱最大烦恼就是处理垃圾邮件。好在Gmail支持创建过滤器来永久地过滤这些垃圾邮件。...创建一个Filter大致流程是这样 1.复制过滤规则(通常为邮件地址) 2.点击创建Filter按钮 3.将过滤规则填入Filter条件框 4.点击创建规则 然而,这实际上是一个重复步骤.../Gmail-Helper-Filter 贡献力量 除了开源贡献代码外,如果你有想法,也可以共享力量,比如 提需求 提bug 分享本文或扩展 捐赠(下面那个红色按钮) 感谢 再次感谢我御用设计师 大麦

53830

那些实用 Chrome 扩展神器(二)

之前已经写过 那些实用 Chrome 扩展神器 ,如果你不能上谷歌没法直接安装Chrome扩展,可以使用https://crxdl.com/ 这个网站下载crx文件,然后手动安装。 ?...下面继续推荐几个实用Chrome扩展神器。 划词翻译 支持谷歌、百度、有道三大翻译和朗读引擎,可以方便查看、复制和朗读不同引擎翻译结果,选中文字直接翻译。 ? 也可以翻译英文 ?...Chrome扩展地址 https://chrome.google.com/webstore/detail/rooster-for-chrome/pimolnhbniceppehbgmibnbgcnhpkhfh...OBS这类直播软件,就可以把浏览器任何页面直播到B站、斗鱼或者虎牙直播间里去,假如你有自己直播间并且也安装了Node.js的话,那么可以安装这个Chrome扩展玩下,适合做无人值守音乐轮播或者电影轮播什么...Chrome扩展地址 https://chrome.google.com/webstore/detail/jfgjlmafdjaofbkjpaoojooghnocjcag

1.4K10

那些有趣实用 Chrome 扩展神器

Chrome 浏览器扩展神器油猴 请停用以开发者模式运行扩展程序?搞定谷歌浏览器插件弹窗 上不了谷歌如何安装 Chrome 扩展?...这里再推荐几个有趣/实用 Chrome 扩展神器,都是我经常使用。...二管家 这是一个管理扩展扩展 ,可以获取扩展更新通知并记录拓展历史,自动开启/关闭拓展,根据当前网站获取二管家社区推荐,Chrome 扩展地址 https://chrome.google.com/webstore...• 脱机浏览备份数据 • 将备份数据导出为 Excel 文件 • 将备份数据图片上传到 Cloudinary 云存储 • 迁移备份数据到当前豆瓣帐号 点击新建任务,选择备份项目,我这里选豆邮...我这里谷歌浏览器无痕模式测试,输入对方id连接后点击请求同步。 ? 对方同意后画面就可以同步播放了,还能聊天。 ?

1.9K21

分享几个实用Chrome扩展程序

这次分享几个自己工作这几年下来,平常用比较多几个谷歌浏览器扩展程序。 AdBlock 最受欢迎 Chrome 扩展,拥有超过 6000 万用户!拦截网页上广告。...MultiLogin 这是一款能打开多个独立隐身窗口工具 ,在现在互联网环境,大多系统都是已经实现了单点登录了,即一处登录,处处登录,一处注销,处处注销。...当在同一套系统想要登录多个用户时,通常情况是打开一个谷歌浏览器隐身窗口,但是Chrome只支持打开一个独立环境隐身窗口,如果同时打开多个隐身窗口,cookie等信息是共享,也可以360浏览器...(360支持打开多个单独隐身窗口),但是360浏览器就需要再安装一个浏览器。...最后最后,这些扩展程序都是自己经常用到,如果大家也有好用Chrome插件也可以推荐给我。

1.8K20

react router 路由守卫_React路由鉴权实现方法「建议收藏」

前言 上一篇文章中有同学提到路由鉴权,由于时间关系没有写,本文将针对这一特性对 vue 和 react 做专门说明,希望同学看了以后能够受益匪浅,对你项目能够有所帮助,本文借鉴了很多大佬文章篇幅也是比较长...虽然服务端做了进行接口权限,但是每一个路由加载时候都要去请求这个接口太浪费了。有时候是通过SESSIONID来校验登陆权限。...在正式开始 react 路由鉴权之前我们先看一下vue路由鉴权是如何工作: 一、vue之beforeEach路由鉴权 一般我们会相应路由表角色菜单配置在后端,当用户未通过页面菜单,直接从地址栏访问非权限范围内...vue 初期是可以通过动态路由方式,按照权限加载对应路由表 AddRouter ,但是由于权限交叉,导致权限路由表要做判断结合,想想还是挺麻烦,所以采用是在 beforeEach 里面直判断非动态路由方式...在使用 Vue时候,框架提供了路由守卫功能,用来在进入某个路有前进行一些校验工作,如果校验失败,就跳转到 404 或者登陆页面,比如 Vue beforeEnter 函数: … router.beforeEach

1.8K20

如何编写漂亮 React 代码?

当然,如果出于某种原因,React 对我来说是不愉快,而我想要花时间编写代码来获得乐趣,那么最明显做法就是不要使用 React。而我大多数时间就是不用 React 。...但是,众所周知,编码是多方面的:你有代码、工件、你向计算机输入符号行,但你也有代码结果,它输出,你编程语言表达想法现实意义。...从这个角度来看,JSX 使用是不必要:它增加了噪音,并且对于它表达思想没有帮助。 所有这些都是说,我朝着一种更愉快方式编写 React 第一步就是摆脱 JSX。...结果发现,我美观探索基本上就是更少 React 代码表达思想。CoffeeScript 带来卓越改进——也是其它语言使用方式——就是去掉无意义标记。...感谢您阅读。 总结:从代码美学角度来看,Hyperscript 和 CoffeeScript 结合是编写漂亮 React 代码一种很好方式。

96810

React 系列 - 写出优雅路由

前言 自前端框架风靡以来,路由一词在前端热度与日俱增,他是几乎所有前端框架核心功能点。...不同于后端,前端路由往往需要表达更多业务功能,例如与菜单耦合、与标题耦合、与“面包屑”耦合等等,因此很少有拆箱即用完整方案,多多少少得二次加工一下。 ? 1....UmiJS 简述 优秀框架可以缩短 90% 以上无效开发时间,蚂蚁 UmiJS 是我见过最优雅 React 应用框架,或者可以直接说是最优雅前端解决方案(欢迎挑战),本系列将逐步展开在其之上应用...需求概述 动码之前先构想下本次我们要实现哪些功能: 路由需要耦合菜单,且需要对菜单空节点自动往下补齐; 路由中总要体现模板概念,即不同路由允许使用不用模板组件; 模板与页面的关系完全交由路由组合...,不再体现于组件; 需要实现从路由中获取当前页面的轨迹,即“面包屑”功能; 实现从路由中获取页面标题; 上述每一点功能都不复杂,若不追求极致,其实默认约定式路由基本能够满足需求(详情查询官方文档

1K30
领券