Chrome 扩展工具及命令

一些Chrome的地址栏命令(这些命令会不停的变动,所有不一定都是好用的)

在Chrome的浏览器地址栏中输入以下命令,就会返回相应的结果。这些命令包括查看内存状态,浏览器状态,网络状态,DNS服务器状态,插件缓存等等。

about:version         - 显示当前版本 
about:memory       - 显示本机浏览器内存使用状况
about:plugins        - 显示已安装插件 
about:histograms - 显示历史记录 
about:dns               - 显示DNS状态 
about:cache           - 显示缓存页面
about:network       - 网络监控工具 
about:gpu               -是否有硬件加速
about:flags             -开启一些插件 //使用后弹出这么些东西:“请小心,这些实验可能有风险”,不知会不会搞乱俺的配置啊!
about:stats             - 显示状态  //本人在Linux-ubuntu下试过,不好用,不知windows环境下情况如何。
about:internets      //本人在linux-ubuntu下试过,不好用,不知windows环境下情况如何
view-cache:Stats   - 缓存状态  //本人在linux-ubuntu下试过,不好用,不知windows环境下情况如何。
chrome-resource: //new-tab - 新标签页 //本人在linux-ubuntu下试过,不好用,不知windows环境下情况如何。
chrome-resource://favicon    //本人在linux-ubuntu下试过,不好用,不知windows环境下情况如何。

chrome://extensions/    - 查看已经安装的扩展

Google Chrome浏览器如何设置默认隐身启动(以此例子来说名参数的使用方法,但不限于这么使用,还可以在shell中使用这些参数)

Chrome浏览器具有隐身浏览的模式,在隐身模式窗口中查看的网页不会显示在浏览器历史记录或搜索历史记录中,关闭隐身窗口后也不会在计算机上留下 Cookie 之类的其他痕迹,但会保留所有下载的文件或创建的书签。 Google官方帮助文件说明中隐身模式的原理如下:“在隐身模式下,打开的网页和下载的文件不会记录到您的浏览历史记录以及下载历史记录中。在您关闭已打开的全部隐身窗口后,系统会删除所有新的 Cookie。Chrome 浏览器会保存您在隐身模式下对书签和常规设置所做的更改。”

通过在启动Chrome浏览器的快捷方式的命令行加上参数“–incognito”(注意是双短划线)就可以直接以隐身模式启动Chrome浏览。(右键单击快捷方式图标,选择属性,找到相应的位置添加进相应的参数即可)(只有在加参数的快捷方式上启动chrome,参数才起作用,外部调用chrome参数就不起作用了。这样可以分别建立有不同参数的不同快捷方式。)

其他的一些关于Chrome的实用参数及简要的中文说明(使用方法同上,当然也可以在shell中使用)
–user-data-dir=”[PATH]”              指定用户文件夹User Data路径,可以把书签这样的用户数据保存在系统分区以外的分区。
–disk-cache-dir=”[PATH]“            指定缓存Cache路径
–disk-cache-size=                         指定Cache大小,单位Byte
–first run                                          重置到初始状态,第一次运行
–incognito                                       隐身模式启动
–disable-JavaScript                        禁用Javascript
--omnibox-popup-count="num"   将地址栏弹出的提示菜单数量改为num个。我都改为15个了。
--user-agent="xxxxxxxx"                修改HTTP请求头部的Agent字符串,可以通过about:version页面查看修改效果 

--disable-plugins                            禁止加载所有插件,可以增加速度。可以通过about:plugins页面查看效果 
--disable-javascript                         禁用JavaScript,如果觉得速度慢在加上这个
--disable-java                                  禁用java 
--start-maximized                           启动就最大化
--no-sandbox                                  取消沙盒模式
--single-process                             单进程运行
--process-per-tab                           每个标签使用单独进程
--process-per-site                           每个站点使用单独进程
--in-process-plugins                      插件不启用单独进程
--disable-popup-blocking             禁用弹出拦截
--disable-plugins                            禁用插件
--disable-images                            禁用图像
--incognito                                       启动进入隐身模式
--enable-udd-profiles                    启用账户切换菜单
--proxy-pac-url                               使用pac代理 [via 1/2]
--lang=zh-CN                                 设置语言为简体中文
--disk-cache-dir                             自定义缓存目录
--disk-cache-size                          自定义缓存最大值(单位byte)
--media-cache-size                      自定义多媒体缓存最大值(单位byte)
--bookmark-menu                         在 工具  栏增加一个书签按钮
--enable-sync                                启用书签同步



提供了一套Chrome DevTools,是 Web开发和性能调试的必备工具,旨在为开发人员提供更轻松的生活。 但是 Chrome 能做的远不止你平常用的那么简单:Chrome的功能通过成千上万的附加组件和扩展功能进行扩展,让开发者们可以在开发过程中运用各种技巧测试网站和应用程序;尝试其他字体和布局;以及大大提高效率


1、网站分析工具 Wappalyzer

Wappalyzer 是一个实用的跨平台网站分析工具,用于帮助开发者、研究者和设计者检测网页使用的是什么技术,以更好地衡量自己的项目中该使用什么技术。Wappalyzer 的功能和 BuiltWith 类似,可检测内容管理系统(CMS),电子商务平台、Web服务器、JavaScript框架和已安装的分析工具等。





2、代码特效图 Marmoset

Marmoset 由一段 Nginx 代码组成,可以在短短几秒钟内帮助你制作漂亮的代码截图,输出线框和标记代码。 此外,您可以添加主题和其他效果,它支持多种常见及不常见的代码语言类型,内建大约数十种配色,制作好的图片可以当作电脑桌面壁纸使用,绝对是极客必备。 这个简单直观的附件,用户只需稍作了解,便在性能评分中毫不犹豫地给出令人垂涎的5星。





3、批量打开多个链接 Linkclump

Linkclump 是一款用来批量打开网页多个链接的扩展工具,只需要用鼠标拖动框选所有想要打开的链接,就能在 LinkClump 的新标签页、窗口中一次性打开它们,还可以保存为书签,复制到剪贴板,关键词过滤(即包含的关键词打开或者不打开),延迟打开,反向选择打开链接等等。 





4、清除历史记录 Click&Clean

在超过45,000条评论中能一直维持5分好评可不是件简单的事,但Click&Clean 做到了!通过 Click&Clean插件,用户可以选择多种方式来清除Chrome中的历史记录。而Click&Clean的清理界面也设计的非常新潮,它只需点击一下即可删除键入的URL,缓存和Cookie以及下载和浏览历史记录。 Click&Clean甚至还能删除客户端Web SQL数据库,Flash Cookies (LSOs)等。 这可是Google Chrome浏览器的第一个私人数据清理工具。





5、程序调试工具 Firebug Lite


Firebug 是站长和博主的必备网络工具。它能对HTML页面的代码进行分析,并能对网页式样元素提供实时预览。它不是Firebug或Chrome Developer Tools的替代品,相反,它与这些工具巧妙结合使用,提供诸如HTML元素的丰富视觉效果,DOM元素和Box模型着色功能,实时编辑CSS属性等,它还能对网站的性能进行测试评估,提供对诸如载入时间等的分析。你可以进入Chrome扩展程序中心的Firebug页面进行下载安装Chrome版的扩展 Firebug Lite。





6、字体乐园 Font Playground


这是另一款非常有用的前端工具,字体乐园(Font Playground)让在你的应用或者网站上无需改变任何东西而实验不同字体成为可能。你可以获取到超过1000种免费谷歌网页字体,它能让你在短短几秒钟内预览该字体的效果。





7、搜索图片 Search by Image

当前评分:4.5/5

搜索图片是谷歌亲生的方向图片搜索插件,其授权你可以在网页的任何图片上使用谷歌搜索(比天眼灵活,亲生就是不一样),简单的在图片上点击右键,然后选择“找谷歌上找这种图片”(Search Google with this image)。如果这是你经常用的插件,你也可以通过添加点击图片搜索来快速使用这个功能。





8、天眼-反向图片搜索 TinEye Reverse Image Search 


第一个依赖图片身份技术的反向图片搜索引擎(以抗议关键字加密,元数据和水印)(编者:深深鄙视找来的好图还要加水印的人),天眼能简单的快速搜索到几乎所有图片原资源。它为每一张要搜索的图片创建一个独立标识,并且与数据库中其他图片的标识进行精确匹配(非类似匹配),包括已被编辑,压缩,重定义大小了的匹配图片。以此每周有上千万的图片被添加进数据库。





9、内建技术构建者 BuiltWith Technology Profiler


搞清楚一个网页如何建立按钮的点击需要感谢内建技术构建者,一款不错的易用网页建构工具。在你点击构建图标后,这款控件能返回所有能在这个网页运用的技术。访问“BuiltWith”网页获取更多信息,你也可以在“BuiltWith” 网页添入url来探索那个网站使用的技术。





10、像素标尺 Page Ruler


像素标尺能为你在任何一个网页显示标尺,它可以为任何你想要测量的页面控件提供宽,高,位置(上,下,左,右)等信息。标尺的大小,位置可以很容易地通过拖动标尺边缘、改变靶心位置、或者在工具栏手动更新标尺大小和位置来做精确调整。像素标尺同样提供了一个“组件模式”,其会在你鼠标移到组件上时显示该组件轮廓。更赞的是,你可以浏览任何控件的父控件,子控件,同级控件。这个 Chrome 插件拥有超过 60 万用户,超过1450人给予其最棒的评价。



11、Secure Shell    chrome SSH 插件

3 打开后界面如下图所示,填写相关内容。





1. 掘金 Chrome 插件 :帮你发现干货

http://gold.xitu.io/extension/

  不管你是开发者、设计师还是产品经理,想必每天都需要阅读大量的行业相关文章,这就需要我们浏览大量的互联网站点去寻找我们需要的内容。抛开繁复的筛选成本不说,「比特级」的内容都会压得你喘不过气来。

掘金为了解决这个问题,开发了掘金 Chrome 插件,掘金 Chrome 插件聚合了国内外优质的互联网站点内容,在节省你的筛选成本的同时,帮你发现好内容。

 

2. Postman :强大的 API & HTTP 请求调试工具

https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop


相信 Postman 对于掘金上的各位开发者来说,一定不会陌生,这是一款强大的 API & HTTP 请求调试工具,Postman 不仅可以调试简单的 HTML、CSS 以及脚本等简单的网页基本信息,这款 Chrome 插件甚至还能发送几乎所有的 HTTP 请求,可谓是 Web 开发者的一大利器。


3. BuiltWith Technology Profiler :你的网站,用了什么技术栈?

https://chrome.google.com/webstore/detail/builtwith-technology-prof/dapjbgnjinbpoindlpdmhochffioedbn?hl=zh-CN


作为开发者,对于友商网站所使用的技术栈想必也充满了许多好奇心,有没有工具能够帮你完成这项工作呢?答案就是 Chrome 插件 BuiltWith Technology Profiler,它能够帮你分类呈现当前访问网站的技术栈组成,实乃探索友商之利器。


当然,同类产品中,你也可以使用 Wappalyzer 这一款 Chrome 插件。

4. Octotree :你的 GitHub 文档库

https://chrome.google.com/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc

GitHub 现有的目录层级形式,在查看来自不同层级文件夹的文件的时候,显得似乎不是很方便,Octotree 这款 Chrome 插件能够让你通过文档库的方式管理、查看你的 GitHub 仓库,简单直观的同时,也方便你进行文件之间的跳转操作。

5. GitHub Awesome Complete :属于 GitHub 的 「Alfred」

https://github.com/algolia/github-awesome-autocomplete


在 GitHub 搜索仓库或者项目的时候,你会怎么做?相信大部分人的步骤都是一样的:

  • 在搜索框输入关键字后按回车键

  • 在搜索结果中找到相应结果,点击进入相应页面

有没有更简单快捷的操作方法?答案是 GitHub Awesome Complete 这款 Chrome 插件。这款插件能够让你在 GitHub 中输入关键字之后通过弹窗动态显示相应的搜索结果,你所需要做的,只是点击即可。

6. Octo Mate :增强你的 GitHub 体验

https://github.com/camsong/chrome-github-mate/blob/master/README.cn.md


除了以上两款 GitHub 相关的插件,这里我还要介绍一下 Octo Mate 这款能够提升你的 GitHub 体验的小工具。对于这款插件,主要功能有以下四点:

  • 一键下载文件:GitHub 可以让你很方便的以 .zip 格式下载所有文件,但如果只需要下载一个文件,非常麻烦。使用 Octo Mate 后只需要点击文件图标即可下载。

  • 一键打开项目的 Github Pages

  • 显示仓库大小

  • 显示未读消息数

相信这样一款插件一定能让你在使用 GitHub 的时候更加高效。


7. Page Ruler :你的网页标尺

https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn?hl=zh-CN


前端开发者在调试网页的时候,一定会遇到需要查看网页中某个具体控件或者整个网页具体尺寸的情况,这时候,Page Ruler 能够帮你完成这一项工作,测量网页元素,再也不用打开占据大片空间的「检查元素」窗口了。

8. User-Agent Switcher for Chrome :网页自适应测试工具

https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg?hl=zh-CN


你的网页对于各类设备的自适应情况怎么样?正常情况下,我们需要同时在不同的设备上测试网页的自适应情况,有了 User-Agent Switcher for Chrome,只需要一个浏览器插件,你可以随时更换 UA,测试网页的自适应情况,帮你很好地提高了开发效率。

9. Vysor :解放双手的 Android 测试工具

https://chrome.google.com/webstore/detail/vysor/gidgenkbbabolejbgbpnhbimgjbffefm


实机调试 Android 应用,你是不是还在一边测试着 Android 设备一边在电脑上修改代码?有了 Vysor 这款 Chrome 插件,只需要通过 USB 连接,你就可以直接在 Chrome 中通过鼠标操作 Android 设备,设备间切换造成的时间成本降低了,开发效率自然就提高了。

10. SimilarWeb :查看网站各种流量数据

https://chrome.google.com/webstore/detail/similarweb-website-rankin/hoklmmgfnpapgjgcpechhaamimifchmp


对于网站开发者来说,除了网站本身的代码设计与开发,网站的各种用户访问数据与流量分析也是很重要的一块工作。SimilarWeb 这款 Chrome 插件能够帮你统计网站的流量来源与排名,查询网站参与等各种网站信息。


11、Window Tiler的开发背景

用户在使用Chrome的时候,可能已经习惯了多个Chrome的标签页集中到一个Chrome的窗口中


JSON-handle

很方便的解析json

https://chrome.google.com/webstore/detail/json-handle/iahnhfdhidomcpggpaimmmahffihkfnj


12.划词翻译

支持谷歌、百度、有道、必应四大翻译和朗读引擎,可以方便的查看、复制和朗读不同引擎的翻译结果。
https://chrome.google.com/webstore/detail/%E5%88%92%E8%AF%8D%E7%BF%BB%E8%AF%91/ikhdkkncnoglghljlkmcimlnlhkeamad



14.Vimium

The Hacker's Browser. Vimium provides keyboard shortcuts for navigation and control in the spirit of Vim.
https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb


17.PageMonitor

页面监控,如果内容有更新就通知你,你抢电子产品的时候肯定需要
https://chrome.google.com/webstore/detail/visualping/pemhgklkefakciniebenbfclihhmmfcd

18.EyeDroper

浏览器窗口内取色
https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka


25.Codota

Codota是另一款源代码搜索利器,索引了数百万公开项目的Java源代码,并能秒搜自己打的源代码,最重要的是它还提供了Chrome插件,操作更加简便!搞Java的,特别是Android的请先码住


27.vue-devtools

Chrome扩展调试Vue.js应用



  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 在 Chrome 扩展插件中复制内容到剪切板可以使用 Clipboard API。下面是一个示例代码: ``` document.addEventListener('copy', (event) => { event.clipboardData.setData('text/plain', '复制的内容'); event.preventDefault(); }); document.execCommand('copy'); ``` 这段代码会在复制事件触发时将字符串 "复制的内容" 复制到剪切板。 注意: Clipboard API 仅在 https 和 localhost 中可用。 需要添加权限"clipboardRead" and "clipboardWrite" 在manifest.json 中加入 ``` "permissions": [ "clipboardRead", "clipboardWrite" ] ``` ### 回答2: Chrome 扩展插件开发是指开发用于增强Chrome浏览器功能的小型应用程序。复制内容到剪切板是其中一种常见需求,以下是一个示例: 在Chrome扩展插件开发中,复制内容到剪切板是一种非常常见的需求。通过插件开发,我们可以实现在浏览器中选中文本后,通过点击插件按钮或者使用快捷键,将选中的内容复制到剪切板中。 实现这个功能,我们需要使用Chrome扩展API中的 `clipboard` 权限和相应的方法。首先,在插件的manifest.json文件中声明需要使用的权限: ``` { "manifest_version": 2, "name": "复制内容到剪切板示例", "version": "1.0", "permissions": [ "clipboardWrite" ], "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" }, "icons": { "16": "icon.png", "48": "icon.png", "128": "icon.png" } } ``` 接下来,在popup.html中添加一个按钮元素,并在popup.js中为按钮添加点击事件监听器: ```html <!DOCTYPE html> <html> <head> <title>复制内容到剪切板示例</title> <script src="popup.js"></script> </head> <body> <button id="copyBtn">复制选中内容</button> </body> </html> ``` ```javascript document.addEventListener('DOMContentLoaded', function() { var copyBtn = document.getElementById('copyBtn'); copyBtn.addEventListener('click', function() { chrome.tabs.executeScript( { code: "window.getSelection().toString();" }, function(selection) { var text = selection[0]; copyToClipboard(text); }); }, false); }); function copyToClipboard(text) { var textarea = document.createElement("textarea"); document.body.appendChild(textarea); textarea.value = text; textarea.select(); document.execCommand("copy"); document.body.removeChild(textarea); } ``` 以上代码通过监听按钮的点击事件,使用 `executeScript` 方法获取当前选择的文本内容,并将其传递给自定义的 `copyToClipboard` 函数。该函数在页面中动态创建一个隐藏的文本框,将文本赋值给文本框,然后通过 `execCommand("copy")` 方法将文本复制到剪切板中。 通过以上简单示例,我们可以看到如何在Chrome扩展插件开发中实现将选中内容复制到剪切板的功能。整个过程依赖于Chrome扩展API中的 `clipboard` 权限和相应的方法,开发者可以根据需求进行扩展和修改。 ### 回答3: Chrome扩展插件是一种能够增强Chrome浏览器功能的工具。开发Chrome扩展插件可根据个人需求,定制化地实现特定功能。在开发Chrome扩展插件时,复制内容到剪切板是一个常见的需求。 要实现在Chrome扩展插件中复制内容到剪切板,我们可以借助Chrome的API,如`chrome.tabs`和`chrome.extension`等。 首先,我们需要在扩展插件的`manifest.json`文件中声明使用`clipboardWrite`权限,以便能够访问剪切板的写入功能。 然后,在扩展插件的主要逻辑中,我们可以通过使用`chrome.tabs.executeScript`方法向当前活动标签页注入一个自定义的JavaScript脚本。 这个自定义的脚本可以通过`document.execCommand('copy')`来复制当前选中的内容到剪切板。使用`execCommand('copy')`命令可以模拟用户手动复制操作。 在执行完脚本后,可以通过`chrome.extension.getBackgroundPage().chrome.extension.sendMessage`方法将复制操作结果传递给扩展插件的background.js后台脚本。 在background.js中,我们可以使用`chrome.extension.onMessage`监听消息,然后将复制操作的结果存储到剪切板中。 最后,我们可以通过向用户显示一个通知或者通过其他方式提示复制操作完成。 总的来说,开发Chrome扩展插件实现复制内容到剪切板的功能,首先需要声明相应的权限,然后通过注入自定义脚本实现复制操作,再通过消息传递和后台脚本将结果存储到剪切板中。以上就是一个示例,具体的实现方式还可以根据具体需求进行调整和扩展

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值