浏览器扩展使用HTML、JavaScript、CSS和图片等Web技术开发。 浏览器扩展与浏览器插件不同。...浏览器扩展无需了解浏览器的源代码，而浏览器插件是更底层的浏览器功能扩展，需要深入掌握浏览器的源代码。...以谷歌内核的浏览器扩展的基本组成 浏览器扩展，至少包括一个manifest.json和一个js文件 manifest.json是扩展的调度中心，用于声明各种资源。...该文件采用JSON格式定义 js文件中定义要执行的操作 浏览器扩展，通常还可以包括图标、页面和CSS等资源 图标通常是19px*19px的PNG文件 页面通常是HTML文件，用于定义显示给用户的窗口，如...popup页面或options页面等 注意：控制popup窗口或options窗口的分别是popup.js和options.js文件 CSS是常见的定义页面样式的文件 作为一个浏览器扩展，上述所有文件应该都位于一个根目录之下
icons": { "48": "icon.png" }, "content_scripts":[{ "matches":["http://*/*"], "js...":["jquery.min.js", "content_script.js"] }], "browser_action": { "default_icon": "icon.png...default_popup": "popup.html" } } name就是程序名称 version是版本 manifest_version是2（如果是1会提示版本低） description是扩展描述...icons是图标 content_scripts是加载的js browser_action这是显示在浏览器插件栏的icon以及点击icon弹出的页面 content_script.js代码如下 $(...备注：免费使用哦~另外，你会js的话，想怎么玩就怎么玩咯！！ example
扩展 定义对象 var zj = zj || {}; 字符串转json对象 /** * 字符串转json对象 */ zj.toJson = function(result) { if (typeof...document.body.appendChild(iframe); console.info(nowDate); window.open(url, nowDate); console.info(nowDate); } js...进行post同步提交 /** * js进行post同步提交 */ zj.post = function(URL, PARAMS) { var temp = document.createElement...zj.getLeftStr = function(str, delimiter) { return str.substring(0, str.indexOf(delimiter)); } 获取浏览器信息.../** * 获取浏览器信息 */ zj.getBoswerMsg = function() { var Sys = {}; var ua = navigator.userAgent.toLowerCase
chrome浏览器成为最受欢迎的浏览器不仅因为它的简洁和速度，更多地是因为它为Web开发人员提供了构建强大应用程序的出色工具。...开发人员可以从各种出色的浏览器扩展中进行选择，通过这些扩展软件，可以大大帮助软件工程师提高生产力，更快地开发应用程序或查找错误。...React开发工具和Vue开发工具 作为最火的前端框架react和vue，它们都为浏览器开发了各自的扩展，使用扩展组件，我们可以非常方便地查看组件的状态，进行路由管理，进行数据的调试。...JSONView 作为web开发人员，调试接口api是家常便饭，如何快速地优雅地通过浏览器查看接口数据结构，答案就是使用jsonview，这个插件通过将返回结果进行格式化的输出，非常方便我们对接口数据的观察和调试...Web Developer 这是一个扩展工具栏，有了它我们可以非常方便地禁用网页图片，网页样式，网页的js，有了它我们还可轻松地获取到表单的元素，同时，它也可以非常方便地帮助我们管理网站的cookies
创建并加载一个扩展 在这一节中，将编写一个browser action扩展，这个扩展会在谷歌浏览器的工具栏上增加一个图标。...a)点击 图标，在菜单中选择工具>扩展程序，这会打开扩展管理的页面 b)如果“开发人员模式”旁边有个“+”号，点击这个“+”号进入开发人员模式。...“+”号会变成“-”号，同时会显示更多的按钮和信息 c)点击“载入正在开发的扩展程序…”按钮，会出现一个文件选择对话框 d)在对话框中，找到扩展目录并点击“确定” 如果扩展是正确的，它的图标就会显示在地址栏右侧...，扩展的信息也会显示在扩展管理页面上，如下图所示： 向扩展中添加代码 在这一节，会给扩展增加一点功能 1.编辑manifest.json文件，增加下面的内容： "browser_action":...增加一些代码：CSS and JavaScript code for hello_world 2.回到扩展管理页面，点击“立即更新扩展程序”按钮，这时会重新加载修改后的扩展 3.点击扩展的图标，会弹出一个气泡窗口
Cookie 管理 QR Code Generator QR Code Tampermonkey 用户脚本管理器 greasyfork SwitchyOmega 代理设置工具 Vimum 使用vim键位操作浏览器
使用 chrome 的扩展，注入下雪的代码到任意网页，如下图： 如何实现的？ chrome 扩展主要的文件是 manifest.json 这个文件。...":["jquery.min.js","snowfall.jquery.min.js","app.js"], "matches":[""],..."run_at": "document_idle" }] } 记住 manifest_version 必须为 2 在 app.js 写入要注入的 js 代码即可实现。...安装拓展体验路径如下： 1 首先点击谷歌浏览器右上角的自定义及控制按钮，在下拉框中选择更多工具选项，然后点击扩展程序来启动Chrome浏览器的扩展管理器页面。...3 在勾选开发者模式选项以后，在该页面就会出现加载正在开发的扩展程序等按钮，点击“加载正在开发的扩展程序”按钮，并选择刚刚解压的文件夹的位置。
2021.12.5更新 [0.10.0] 更新了小助手失效的问题 如何添加扩展程序 按规矩讲扩展程序应该在浏览器的应用商店里下载，但是考虑到身在墙国访问谷歌的应用商店可能不太方便，所以这里采用离线加载的方式提供给大家...在浏览器的地址栏中输入下面的地址转到扩展程序页面（在浏览器菜单里打开也可以） chrome://extensions/ 2 .打开开发者模式 3 .解压下载的压缩文件，点击加载已解压的扩展程序，然后选择...一定要通过添加浏览器扩展程序的方式来加载小助手，直接打开网页是没有效果的 如何更新扩展程序 1 .在小助手选项页面点击检查更新按钮，或者自己下载新版本 2 .在浏览器扩展程序页面移除掉旧版本的小助手 3....重新添加新版本的小助手 特别注意 大家悠着点答题呀，答得太快的话网站会经常给你弹验证码的 由于小助手扩展程序没有上传至chrome的应用商店，浏览器可能会提示各种安全问题，如果你觉得提示比较烦可以在不用的时候关闭扩展程序...由于小助手扩展程序调用了chrome的调试API，在使用时浏览器可能会提示U校园小助手正在调试此浏览器，如果不想要这个提示可以点 × 关掉，但是不要点击取消，这样会导致小助手失效！
向大家极力推荐这个插件：沉浸式双语网页翻译扩展，浏览器翻译神器，而且完全免费！ ️
Kotlin 扩展函数 与 JS 的 prototype Kotlin 扩展函数 Kotlin的扩展函数功能使得我们可以为现有的类添加新的函数，实现某一具体功能 。...扩展函数是静态解析的，并未对原类添加函数或属性，对类本身没有任何影响。 扩展属性允许定义在类或者kotlin文件中，不允许定义在函数中。...(extensions) 在不修改原类的情况下, Kotlin能给一个类扩展新功能,无需继承该类,也不用任何设计模式(如装饰模式等), Kotlin支持扩展函数和扩展属性!..., 扩展声明所在的类称为分发接收者(dispatch receiver), 扩展函数调用所在类称为扩展接收者(extension receiver) 1.定义 class D { //扩展接收者...(非多态) C1().call(D()) // 输出 "D.foo in C1",分发接收者虚拟解析(多态) JS 的 prototype JavaScript prototype 属性 定义和用法
想要做出一个成功的 PHP 扩展包，不仅仅是简单的将代码放进文件夹中就可以了，除此之外，还有非常多的因素来决定你的扩展是否优秀。...以下清单的内容将有助于完善你的扩展，并且在 PHP 社区中得到更多的重视。 1. 为你的扩展选择一个正确合适的名字 确保你的命名没有被其他项目使用。 扩展的名字需要和你的 PHP 命名空间保持一致。...将你的扩展开源 GitHub 可以免费管理这一类公共的项目。 GitHub 非常有助于你来管理这个开源项目，并且方便他人获取你的扩展。 如果你不想使用，可以尝试替代品: Bitbucket. 3....让开发人员安全的升级软件，而不用担心会产生破坏性的改动。 请记得及时给发布版本打上标签！ 10. 保持定期更新日志 明确标记并展示出版本之间显著的变化。...编写大量的使用文档 一份优秀的文档对于扩展包来说至关重要。 至少要确保库中有详细的 README (自述) 文件。 可以尝试在 GitHub Pages 中托管文档。
对于Chrome 浏览器，除了占用内存的缺点，其他都很不错。...对于Chrome 浏览器的开发者工具，Jeff 除了Elements、Resources、Network、Console这四个标签页用得比较多外，其他的都甚少理解。...今天偶然看到一篇Chrome 浏览器开发者工具的使用教程，感觉不错，顺便转载在这里，感谢原作者的辛苦劳动。 作为一个Web开发人员，除了上面的原因以外，与我们开发相关的，就是Chrome的开发者工具。...你点一下就知道了哦，嘿嘿） 你还可以对某个元素进行监听，在JS对元素的属性或者HTML进行修改的时候，直接触发断点，跳转到对改元素进行修改的JS代码处： ? ?...Scripts标签页 很明显，这个标签页就是查看JS文件、调试JS代码的，直接看下图的说明： ? ? 还有你可以打开Javascript控制台，做一些其他的查看或者修改： ? ?
Zepto.js是一个轻量级的针对现代浏览器的JavaScript库， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。 1. Why Zepto.js？...API类似jQuery，熟悉jQuery可以无缝迁移到Zepto.js Zepto仅针对高版本现代浏览器设计了最小核心的通用库，代码体积小，尤其适合移动端开发。...Zepto.js下载 代码下载：zeptojs中文站 、 github 2.1 自定义Zepto.js文件模块 zepto默认是有五个模块的，分别为zepto、event、ajax、form、ie，这五个模块被称为核心模块...不支持jQuery CSS 扩展， 然而，可选的“selector”模块有限提供了支持几个最常用的伪选择器 Zepto.js: 无法获取隐藏元素宽高； Zepto 的选择器表达式: [name=value...总结 zepto.js确实非常小巧，而且非常讨巧的利用了大家熟悉jQuery的优势，确实非常可爱的一个js库，设计的模块中庸而又实用，在移动端的触屏事件封装的很不错，移动端web开发值得推荐。
Google 浏览器 Chrome 是我现在主要使用的浏览器，Chrome 更新到 2.0 之后，除了支持 Greasemonkey 之外，也开始支持扩展。...要让 Google 浏览器支持扩展，你首先要把 Chrome 升级到 2.0 最新版本，然后找到 Chrome 的快捷方式，右键单击它，然后选择属性，然后在 target 输入框里面添加这个参数： --...enable-extensions，重启浏览器就可以了。...启用 Google 浏览器 Extensions 现在目前 Chrome 官方已经提供了两款 Google Chrome 的扩展： Chrome Extensions: Gmail Checker...安装 + 下载源代码 当然对于那些想自己动手写 Chrome 扩展的同学，这里有一个教程教你如何创建一个非常简单的 Chrome 扩展。
Chrome浏览器 超级好用的浏览器，没有之一 我平常工作最常用的浏览器就是 Chrome 了，Google 出品，值得信赖，用 Chrome 就不得不提浏览器扩展了，有了各种 Chrome 扩展，可以让你浏览器网页更方便...Chrome 扩展可以在 Google 应用商店下载，这里可以搜索安装你喜欢的各种扩展。...比如我装了很多扩展。 ? 扩展这么多，其中的油猴Tampermonkey 是必须推荐的一个，它是扩展中的王者，最强大的浏览器扩展。...chrome://extensions/，打开开发者模式，将下载的crx文件拖进去。...如果出错提示程序包无效，将 crx 后缀改为 zip 再拖进去就能安装成功了，浏览器右上角可以看到图标。 ? 脚本网站 其实就是加载页面的预处理 有了油猴扩展，还需要配上脚本。
要开发Firefox扩展当然需要一些工具和教程，这里根据笔者的所得，略略写一下： 教程： 教程嘛，网上基本没有什么中文资料，最多也就一个简单，非常简单的入门说明。...所以教程还是以官网的为主：https://developer.mozilla.org/En 工具： 官网的教程中，会提到一些工具。 1.Firefox 3.0，这个肯定必不可少了。...在此推荐3.0，因为最新版3.6或者3.7，那些扩展还没有更新跟进，所以要想安装更多的扩展，还是以3.0为好。 2.Firebug，这个不必多说。...这个是一套Firefox扩展，包括打包xpi功能，预览xul等。 4.Spket IDE。开发扩展的IDE，官网推荐的，比较好用。不过好像不能打包xpi，也不能测试。不过只作为编辑器也不错了。...用它来看人家的扩展的代码，非常舒服…… 5.xul explorer。预览xul效果。 6.emEditor。快速打开代码文件，进行修改。另外最重要的功能是：查找。
Chrome 的扩展程序就是一个非常不错的工具，它可以提高我们作为开发人员的生产力。 下面我们介绍一些非常好用的浏览器扩展。...Wappalyzer 作为开发人员，有时当您从浏览器访问网站或 Web 应用程序时，您会对用于创建该网站或应用程序的技术和工具感到好奇。 这就是 Wappalyzer 发挥作用的地方。...Githunt Githunt 是一个非常棒的扩展，可以在浏览器的新选项卡中突出显示所有 GitHub 趋势项目。...几乎所有 React 开发人员都使用此扩展，它拥有超过 300 万用户。 Momentum Momentum 可以帮助您提高开发人员的工作效率。...结论 因为这些扩展的出现，浏览器已经不仅仅只是一个网页浏览工具，它更是一个提升开发效率的工具，有了这些工具，我们的工作效率变得非常高效，生活也变得更加轻松。
我是一直推荐谷歌浏览器的，之前也写过文章 那些你可能不知道的谷歌浏览器实用技巧 以及推荐扩展系列 那些有趣/实用的 Chrome 扩展神器系列（二） ，实用油猴脚本推荐，让你的谷歌浏览器更强大 。...所谓没有安装扩展的浏览器是没有灵魂的，为什么我喜欢用谷歌浏览器，因为谷歌商店有很多丰富的插件可以使用，edge浏览器也一样推荐你安装扩展，下面就分享下如何在edge浏览器安装扩展 。...选择一个扩展点获取即可安装使用。 ? 谷歌扩展商店安装 由于新出的商店扩展比较少，支持直接安装谷歌商店里的扩展。 ? 和Chrome浏览器一样添加安装。 ?...手动安装 如果谷歌商店打不开就只能手动安装了，输入 edge://extensions/ 进入扩展管理页面， 跟谷歌浏览器手动安装一样开启开发人员模式，将下载的扩展crx文件拖进去就是 。 ?...回到edge浏览器的扩展管理页面，点击 加载解压缩的扩展 。 ? 选择刚才解压出的目录就安装好了。 ? 不过手动安装的扩展启动的时候会提示什么危害计算机， 不用管它，关闭即可。 ?
我平常工作最常用的浏览器就是 Chrome 了，Google 出品，值得信赖，用 Chrome 就不得不提浏览器扩展了，有了各种 Chrome 扩展，可以让你浏览器网页更方便，工作更高效。...hl=zh-CN 这里可以搜索安装你喜欢的各种扩展。 ? image.png 比如我装了很多扩展。 ?...image.png 扩展这么多，其中的油猴Tampermonkey 是必须推荐的一个，它是扩展中的王者，最强大的浏览器扩展。...下载的是个 crx 文件，然后打开 Chrome 扩展chrome://extensions/，打开开发者模式，将下载的crx文件拖进去，如果出错提示程序包无效。 ?...image.png 将 crx 后缀改为 zip 再拖进去就能安装成功了，浏览器右上角可以看到图标。 ? image.png 脚本网站 有了油猴扩展，还需要配上脚本。
(扩展是能够给Mozilla增加一些新功能的附加软件,插件是允许网站向你提供内容并在浏览器中显示的程序).通俗的讲,“扩展”是基于Firefox本身增加的一些实用功能,而“插件”则是在Firefox之外独立编写的程序...3.看看入门例子，用记事本，做一个最简单的扩展，运行一下。另外，使用Firefox，下载一些常用的扩展，并查看一下人家的源代码。 4.正式搭建开发环境。...BlogPart_BlogPart=blogview&_c=BlogPart&partqs=cat%3dFirefox%25e6%258f%2592%25e4%25bb%25b6 第三步： 根据这个简单教程...firebug的官网，下载chromebug：http://getfirebug.com/downloads#chromebug（有了chromebug才能更好的调试自己写的chrome文件） 因为调试js...这个是一套Firefox扩展，包括打包xpi功能，预览xul等。 4.Spket IDE。开发扩展的IDE，官网推荐的，比较好用。不过好像不能打包xpi，也不能测试。不过只作为编辑器也不错了。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
