首页
学习
活动
专区
工具
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.9K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

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

    1.9K30

    那些实用的 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.2K20

    从零实现的Chrome扩展

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

    55420

    那些实用的 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 ? 打开这篇文章那些我常听的中文播客节目,图片有中文的话先设置语言。

    91920

    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 分享本文或扩展 捐赠(下面那个红色按钮) 感谢 再次感谢我的御用设计师 大麦

    56430

    那些实用的 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.9K20

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

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

    1.9K20

    如何编写漂亮的 React 代码?

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

    98010

    React 系列 - 写出优雅的路由

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

    1K30
    领券