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

12款堪称神器 Chrome 插件,Max 你工作效率!

其他功能优达菌就不啰嗦了,今天来说说 Chrome 如何提高你生产力—— Chrome 支持大量扩展插件,能帮你短时间内完成更多工作,同时比一些 App 消耗更少系统资源。...用来记笔记和待办事项 Google Keep ? 推荐理由: Google Keep 快速,轻便,完全符合快速工作节奏需求——只需点击浏览器上按钮即可快速添加笔记。...这并不意味着 Keep 只有这一个特点:它能帮你保存页面上图像和文字,你还能在上面作笔记。如果你打算写点什么,你可以随时打开,记下文本、列表和提醒。...它在浏览器工具栏里内置一个强悍任务列表,在方寸之间提供大量功能。 对于新手,你可以简单地添加任务或将活动选项卡变为列表里项目。它会让你设置优先级,并为每个待办事项设定到期时间或重复规律。...在同一个地方添加和浏览待办事项功能,比起 Wunderlist 为每个功能都要加一个插件方法做得要好, Todoist 还能通过 Zapier 与大量应用联动,把任务添加到 Google 日历,给

2.9K20

推荐 12 款堪称神器插件,提高工作效率必不可少

其他功能就不啰嗦了,今天来说说 Chrome 如何提高你生产力—— Chrome 支持大量扩展插件,能帮你短时间内完成更多工作,同时比一些 App 消耗更少系统资源。...用来记笔记和待办事项:Google Keep ? 推荐理由: Google Keep 快速,轻便,完全符合快速工作节奏需求——只需点击浏览器上按钮即可快速添加笔记。...这并不意味着 Keep 只有这一个特点:它能帮你保存页面上图像和文字,你还能在上面作笔记。如果你打算写点什么,你可以随时打开,记下文本、列表和提醒。...它在浏览器工具栏里内置一个强悍任务列表,在方寸之间提供大量功能。 对于新手,你可以简单地添加任务或将活动选项卡变为列表里项目。它会让你设置优先级,并为每个待办事项设定到期时间或重复规律。...在同一个地方添加和浏览待办事项功能,比起 Wunderlist 为每个功能都要加一个插件方法做得要好, Todoist 还能通过 Zapier 与大量应用联动,把任务添加到 Google 日历,给

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

【译】使用 Web Workers 优化 JavaScript 应用程序性能

如果你尚未安装,则可以选择适用于 Google Chrome Chrome 扩展程序。 本文章假设读者拥有 HTML,CSS 和 JavaScript 基本知识。...创建示例程序 我们将创建一个示例程序来演示运行脚本对 Web 应用程序性能影响。确保在继续之前已在 Chrome 中安装了 Web Server for Chrome 扩展程序。...HTML 文档,每个标签都有一个航天飞机图标,还有两个按钮。...书签栏中“应用”快捷方式或导航 chrome://apps 来打开Web Server for Chrome。...您将观察斐波纳契序列计算结果仍然记录在浏览器控制台中,但这不会影响页面上图像移动。 要确定 web worker 性能影响,打开开发者工具并选择 “Performance” 选项卡。

1.7K10

用 Vue 开发自己 Chrome 扩展

在本教程中,我将向你展示如何为 Chrome 构建一个能够改变新标签行为简单扩展。...由于我们要从文件(而不是Chrome网上应用店)安装自己扩展程序,因此需要使用页面右上角切换按钮来激活开发者模式。这应该添加一个额外菜单栏,其中包含 Load unpacked选项。...你可以通过在 Chrome 扩展程序页面上单击 Hello World 扩展程序 reload 图标来执行此操作。 ? 重新加载扩展 现在,当你打开新标签时,你自定义消息会出现。...将Vue添加扩展 现在我们有一个非常基本扩展,接下来要实现剩下需功能了。当用户打开新标签时,我希望扩展能够: 从精彩笑话网站 icanhazdadjoke.com 获取一个笑话。...将笑话持持久化 Chrome Storage 接下来,添加一些能够让用户喜欢一个笑话和列出喜欢笑话列表按钮

2.8K30

WeTab:适合所有人新标签扩展

WeTab 是 Chrome,Edge 和 Firefox 新标签扩展。它提供了多种功能,包括: 可自定义主屏幕,其中包含您喜爱网站、应用程序和服务小部件。...您可以从 WeTab 网站或 Chrome 网上应用店下载。 以下是使用 WeTab 一些好处: 这是自定义新标签好方法。...以下是安装 WeTab 一些说明: 对于 Chrome,请转到 Chrome 网上应用店并搜索“WeTab”。单击“添加Chrome按钮,然后单击“添加扩展程序”按钮。...单击“安装”按钮,然后单击“添加扩展按钮。 对于 Firefox,请访问 Mozilla 附加组件网站并搜索“WeTab”。单击“添加到火狐”按钮,然后单击“添加按钮。...安装 WeTab 后,您可以开始自定义新标签。您可以为喜爱网站、应用程序和服务添加小部件,还可以更改背景图像。WeTab 还提供了各种其他功能,例如内置新闻阅读器、任务管理器和密码管理器。

96530

Chrome 插件特性及实战场景案例分析

一、前言 提起Chrome扩展插件(Chrome Extension),每个浏览器中或多或少都安装了几个插件,像一键翻译、广告屏蔽、录屏等等,通过使用这些插件,可以有效提高我们工作效率;但有时候...,我们想要某个功能市面上没有现成插件,作为开发者自然而然想到,自己是否可以动手开发一个定制化插件?...下面我们通过实例来分析这些功能使用案例: 实例1:替换页面 使用替代,可以将Chrome默认一些特定页面替换掉,改为使用扩展提供页面。这让开发者可以开发更多有趣或者实用基本功能页面。...例如我们在开发工作中,经常需要频繁清除浏览器缓存,每次都需要先找到清除按钮,弹出对话框,进行确认,操作很繁琐,如果开发一个chrome扩展插件,就可以轻松实现一键快捷清除浏览器Cookie等缓存,可以参考...,效率低且痛苦,如果能将这些标签进行整理并有序展示该多好,这里给大家推荐一个Chrome扩展插件:OneTab,该插件将所有打开标签在新页面中有序排列出来,如下图,一目了然。

1.7K40

CSS精简工具-CSS remove and combine

修改起来也是很麻烦,小编为大家带来了一款专门解决这种问题chrome插件它就是[CSS remove and combine],这是一款可以通过创建仅包含正在使用选择器新CSS样式表来删除页面上未使用...扩展使用方法是基于消除所有ID和类选择器,这些选择器引用不在页面上ID和类。还有一个快速查看对话框,该对话框将在页面上为用户提供有关已使用和未使用选择器数量信息。...2.离线安装方法参照一下方法:老版本chrome浏览器,首先在标签输入【chrome://extensions/】进入chrome扩展程序,解压你在本站下载插件,并拖入扩展程序页面,它会提示你是否安装该插件...,点击添加即可。...3.安装方法把下载好crx文件后缀改为.zip然后在谷歌浏览器中直接加载已解压程序即可 4.在chrome浏览器安装好后,在浏览器右上方会出现CSS remove and combine插件按钮

1.6K30

新版本Chrome 69自定义标签,将不再需要扩展程序

很多人应该都使用过扩展程序来自定义Chrome新标签吧?从现在起不使用扩展也可以自定义新标签了。...Chrome 69中更新了不少新功能,界面也有很大改变,其中有一个就是新标签也改变,可能有不少Chrome用户还没有注意这一点,特别是一些正在使用第三方新标签用户。...新Chrome版本中我们可以对新标签进行自定义设置。 1、修改Chrome新标签快捷方式: 将鼠标放到图标的右上角会显示一个“修改快捷方式”按钮。 ?...点击这个按钮会弹出一个对话框,你可以对快捷方式名称和网址进行修改,也可以点击“移除”删除该快捷方式。 ? 2、新标签添加自定义快捷方式: 点击右下角添加快捷方式”按钮 ?...4、第三方扩展程序将被淘汰: Chrome新增这项功能非常贴心,因为它已经足够“强大”,再安装自定义新标签扩展程序已经是多此一举了,而且浏览器扩展可能会窃取隐私。

1.1K00

写html页面没意思,来挑战chrome插件开发

开发者可以利用这些技术在浏览器中添加功能、修改现有功能或者与网页进行交互。...谷歌浏览器插件可以实现各种功能,例如添加工具栏按钮、修改网页内容、捕获用户输入、与后台服务器进行通信等。开发者可以通过谷歌浏览器插件API来访问浏览器各种功能和数据,实现各种定制化需求。...某天不小心让你女神生气了,为了能够道歉争取到原谅,你是否可以写一个道歉信贴到每一个页面上,当女神打开网站,看到每个页面都会有道歉内容。...此示例适用于 Service Worker、弹出式窗口和作为标签打开 chrome-extension:// 页面 (async () => { const [tab] = await chrome.tabs.query...}) tabs创建签 首先在manifest.json权限中添加tabs配置 { "permissions": ["tabs"] } 添加tabs相关操作 chrome.tabs.query

28111

chrome插件开发教程

尤其Chrome本身是可以登录,登录后你所有的插件都会自动同步每一个登录后Chrome,非常方便啊。...Web Developer 安装Web Developer扩展后,会在浏览器工具栏中添加一个按钮,点击该按钮,会弹出各种Web开发工具。...,PageSpeed Insights是谷歌开发类似功能插件。 ColorZilla 可以从页面上任何一点获取颜色,维护获取历史等。 Measure It! MeasureIt! ...Pretty Beautiful Javascript 该扩展可以使Javascript文件更容易阅读。其整合了Beautifier和Prettify功能,可以为代码添加语法高亮。...IE Tab 在Chrome中打开IE浏览器标签,你可以打开一个标签来运行Internet Explorer,让你看到网页在IE浏览器看起来如何。

1.7K30

火狐扩展开发入门实践

答:要找官网资料(受限于学习环境),同时Firefox 与 Google Chrome、Opera 和 W3C 草案社区组织 所支持 扩展(Extensions) API 在很大程度上兼容。...为浏览器添加特性与功能,和在网页里编码相比他能帮助您处理页面上数据按照开发者流程进行,实际上扩展是用来提升或补充网站功能; 让用户展现他们个性:浏览器扩展可以操控网页内容; 从网页中添加或删除内容...3.browser action files: 在工具栏中添加按钮。 4.page action files: 添加到浏览器地址栏中按钮,用户通过点击这个按钮与你扩展进行交互。...WeiyiGeek.执行效果 2.第二个扩展实例 描述:实现将扩展添加一个新按钮 Firefox 工具栏,并在用户点击该按钮时,我们会显示一个弹出窗(popup)来让他们选择操作; 实现要点: 1....*如果该内容脚本再次注入同一面,(下次它什么也做不了。)

2.8K30

火狐扩展开发入门实践

答:要访问国外网站找官网资料(受限于学习环境),同时Firefox 与 Google Chrome、Opera 和 W3C 草案社区组织 所支持 扩展(Extensions) API 在很大程度上兼容...为浏览器添加特性与功能,和在网页里编码相比他能帮助您处理页面上数据按照开发者流程进行,实际上扩展是用来提升或补充网站功能; 让用户展现他们个性:浏览器扩展可以操控网页内容; 从网页中添加或删除内容...3.browser action files: 在工具栏中添加按钮。 4.page action files: 添加到浏览器地址栏中按钮,用户通过点击这个按钮与你扩展进行交互。...描述:实现将扩展添加一个新按钮 Firefox 工具栏,并在用户点击该按钮时,我们会显示一个弹出窗(popup)来让他们选择操作; 实现要点: 1.定义Browser Action设置相应图标,...*如果该内容脚本再次注入同一面,(下次它什么也做不了。)

2.4K10

如何将HTML表格转换成精美的PDF

该应用是用基本 HTML、CSS 和 JavaScript 构建,但你可以使用你 UI 框架或选择库轻松创建相同输出。 每个导出按钮都使用不同方法生成 PDF。...顾名思义,html2canvas 接收 HTML 内容,并将其转化为存储在 HTML 元素上图像,然后 jsPDF 接收该画布内容并将其保存。...pdfmake 还允许我加入页眉和页脚,所以很容易添加页码。但你会注意,第一和第二之间表格内容仍然没有完全分开。分页符将 2002 年一行部分地分割在两之间。...我们可以保留我们漂亮表格样式。表格列头和表脚在每一上都是重复,表格行数不会被切掉,而且页面四面都有适当大小边距,每个页面的页眉也是重复每个页面底部页码也是重复。...当涉及基于 UI 中显示 HTML 生成内容时,jsPDF 就会大放异彩。pdfmake 在从数据而不是 HTML 中生成 PDF 内容时效果最好。

6.8K20

开发Chrome插件,实现网站自动登录

想到Chrome插件可以解决这个事情,主要原理就是:新开一个,定时刷新这个页面,检测是否掉线,如果掉线,就触发登录按钮,实现自动登录,这个检测是在后台进行,不能影响前端数据大屏显示信息。...上代码: 一,每隔三秒钟刷新一下页面,检测是否掉线,掉线标准就是loginSystem这个按钮出现在页面上,检测到这个按钮存在,就触发点击事件,这里不需要关心用户名和密码问题,因为已经让浏览器记住用户名和密码了...四,安装配置Chrome扩展程序。 五,打开要检测掉线网站,看是否会自动登录。因网站可能会涉及数据泄露,就不发网站示例了,把控制台输出截图展示一下。...程序已正常运转,那个数据大屏展示,再也不会因掉线出现数据不正确现象了。 以此类推,开发Chrome扩展插件,还可以实现,其他一些功能,比如数据抓取,网站异常报警等。...Chrome扩展插件,真是一个好功能! 未经允许不得转载:肥猫博客 » 开发Chrome插件,实现网站自动登录

1.5K30

极力推荐谷歌浏览器插件

享受没有恼人广告网络世界。 Top 4. Google 翻译 浏览网页时可轻松查看翻译版本。此扩展程序将按钮添加到浏览器工具栏。每当您要翻译访问页面时,请单击翻译图标。...该扩展程序还会自动检测您所在页面的语言是否不同于您用于Google Chrome界面的语言。如果是这样,则横幅会显示在页面顶部。单击横幅中翻译按钮,以使页面上所有文本都以新语言显示。...One Tab 当您发现自己有太多标签时,单击OneTab图标,将所有标签转换成一个列表。当您需要再次访问这些标签时,可以单独或全部恢复它们。...当您标签位于OneTab列表时,您将节省高达95%内存,因为你将减少Google Chrome浏览器中打开标签数量。 Top 8....印象笔记·剪藏 使用Evernote扩展程序一键保存精彩网页内容Evernote帐户。

2.8K21

【实践】Chrome浏览器客户端调试从入门奔溃

1.箭头按钮:用于在页面选择一个元素来审查和查看它相关信息,当我们在Elements这个按钮页面下点击某个Dom元素时,箭头按钮会变成选择状态 2.设备图标:点击它可以切换到不同终端进行开发模式,移动端和...pc端一个切换,可以选择不同移动终端设备,同时可以选择不同尺寸比例,chrome浏览器模拟移动设备和真实设备相差不大,是非常好选择 image 可选择适配 3.Elements 功能标签...样式信息,此时可以在右侧进行一个修改,修改即可在页面上生效, 灰色element.style样式同样可以进行添加和书写,唯一区别是,在这里添加样式是添加到了该元素内部,实现方式即:该div元素...,在你项目环境页面内,该片段可执行项目内方法) image 自己书写片段 Content scripts 是 Chrome 一种扩展程序,它是按照扩展ID来组织,这些文件也是嵌入在页面中资源...,这类文件可以读写和操作我们资源,需要调试这些扩展文件,则可以在这个目录下打开相关文件调试,但是几乎我们项目还没有相关扩展文件,所以啥也看不到,平时也不需要关心这块 image 无结果 6.Network

3.7K30

网页截长图 截屏Google Chrom 插件 FireShot 分享 3000万人使用网页截图插件

如果您犯了错误,还有撤消和重做按钮。  您可以以各种格式存储您捕获和编辑,包括JPG、PNG、GIF、BMP和PDF。单击保存按钮选择您保存位置和图像格式类型。要上传您图片,请单击上传按钮。...2.在打开谷歌浏览器扩展管理器最左侧选择扩展程序或直接输入:chrome://extensions/       3.找到自己已经下载好Chrome离线安装文件xxx.crx,然后将其从资源管理器中拖动到...Chrome扩展管理界面中,这时候用户会发现在扩展管理器中央部分中会多出一个”拖动以安装“插件按钮。       ...5.用户这时候只需要点击添加按钮就可以把该离线Chrome插件安装到谷歌浏览器中去,安装成功以后该插件会立即显示在浏览器右上角(如果有插件按钮的话),如果没有插件按钮的话,用户还可以通过Chrome扩展管理器找到已经安装插件...FireShot会打开一个新标签,上面显示截图,下面显示保存截图选项,可以保存到文件,或另存为pdf。 梦溪分享    3.保存截图剪贴板。

3.9K20

180多个Web应用程序测试示例测试用例

22.验证所有网页标记(验证语法和错误HTML和CSS)以确保其符合标准。 23.应用程序崩溃或不可用页面应重定向错误页面。 24.检查所有页面上文本是否存在拼写和语法错误。...18.页面上所有按钮都应该可以通过键盘快捷键访问,并且用户应该能够使用键盘执行所有操作。 19.检查所有页面上是否有损坏图像。 20.检查所有页面上是否有损坏链接。 21.所有页面都应有标题。...15.对于显示报告结果网格,请检查“总计”行,并验证每一列总计。 16.对于显示报告结果网格,启用分页功能后,请选中“总计”行数据,并导航下一。...6.表列应具有可用描述信息(除了审计列,如创建日期,创建者等) 。7.对于每个数据库,应添加添加/更新操作日志。 8.应该创建所需表索引。 9.仅当操作成功完成时,才检查是否将数据提交到数据库。...2.检查图像上传和更改功能。 3.使用不同扩展图像文件(例如 JPEG,PNG,BMP等) 检查图像上传功能。4.使用文件名中带有空格或任何其他允许特殊字符图像检查图像上传功能。

8.1K21
领券