使用 Vuejs 开发 chrome 插件 chrome 插件的开发其实并不难,web开发者可以使用 html, css, javascript 轻松的开发实用的 chrome 插件. 一个好的 chrome 插件可以提高我们的开发效率,甚至方便我们的生活.例如 Vue-devtools ,是 Vuejs 的开发者不可或缺的利器,再如最常见的谷歌翻译插件,可以翻译整个网页中的英文内容,可以很方便的帮助我们查阅英文文档. chrome 插件使用前端技术开发,但是提供了一些高级的接口(文件操作,操作…

chrome 插件的开发其实并不难,web开发者可以使用 html, css, javascript 轻松的开发实用的 chrome 插件. 一个好的 chrome 插件可以提高我们的开发效率,甚至方便我们的生活.例如 Vue-devtools ,是 Vuejs 的开发者不可或缺的利器,再如最常见的谷歌翻译插件,可以翻译整个网页中的英文内容,可以很方便的帮助我们查阅英文文档. chrome 插件使用前端技术开发,但是提供了一些高级的接口(文件操作,操作USB设备,系统信息等),所以可以开发出一些…

摘要: 最近在开发微信项目时,需要在微信调试,所以经常会在微信中输入本地服务地址,输入起来特别麻烦,所以自己就想了想微信中的扫一扫,然后开发了这款chrome插件,将当前url生成二维码,用微信扫一扫就可以看效果了.在公司里面已经使用起来了,屡试不爽. 代码地址:https://github.com/baixuexiyang/qrcode 欢迎star和fork…

官方文档 https://developer.chrome.com/extensions/getstarted.html [干货]Chrome插件(扩展)开发全攻略 http://blog.haoji.me/chrome-plugin-develop.html 入门 https://juejin.im/post/5c135a275188257284143418#heading-45…

最近闲来无事在好朋(da)友(shen)的帮助下开发一个chrome插件,目的是为了替换infinity主页插件, 当然在此也推荐一波infinity确实不错,界面和易用性都是非常好用的水准了. 主页图标可以改成任意你想要的网站链接,在办公和家用都是不错的选择. 而我们自己开发的插件还是因为看到了某些小尾巴,觉得不爽,索性自己开发起来,闲篇不扯说干就干. 左下角看板娘还有待开发,右下脚可以JSON文件配置页面的链接元素内容. 导航条颜色快速更换可以清楚的让你知道,目前处于哪一个工作的页面(一般配…

用blazor(Wasm)开发了一个chrome插件感觉效率挺高的,分享给大家 先简单介绍下WebAssembly的原理: "WebAssembly是一种用于基于堆栈的虚拟机的二进制指令格式" image 如上图,浏览器在执行js时是会经历 Parser转成语法树->Compiler转成字节码->JIT即时字节码解释执行 因为WebAssembly 模块已经被编译成一种 JavaScript 字节码形式,现代支持 WebAssembly 的 JavaScript 引擎可以在…

近期被一个事情困扰着,我们采购了一款软件,里面有一个数据大屏页,当登录过期后,数据就会保持原状,不再更新.和供应商反馈了很多次,都无法彻底解决数据显示的问题,没办法,自己周末在家研究,网站自动登录的事情. 想到Chrome插件可以解决这个事情,主要原理就是:新开一个页,定时刷新这个页面,检测是否掉线,如果掉线,就触发登录按钮,实现自动登录,这个检测是在后台进行的,不能影响前端的数据大屏显示信息. 上代码: 一,每隔三秒钟刷新一下页面,检测是否掉线,掉线的标准就是loginSystem这个按钮出现…

我的第一个chrome插件,是app形式的 代码如下 创建一个文件: 1.manifest.json { "version": "1.0", "manifest_version": 2, "app":{ "launch":{ "web_url":"http://www.cnblogs.com/zzzzw" }, "urls":["http…

本文由 伯乐在线 - xianhu 翻译,Daetalus 校稿.未经许可,禁止转载!英文出处:pythonspot.com.欢迎加入翻译小组. 谷歌Chrome插件是使用HTML.JavaScript和CSS编写的.如果你之前从来没有写过Chrome插件,我建议你读一下这个.在这篇教程中,我们将教你如何使用Python代替JavaScript. 创建一个谷歌Chrome插件 首先,我们必须创建一个清单文件:manifest.json. 1 2 3 4 5 6 7 8 9 10 11 12 13…

参考:http://www.cnblogs.com/sosoft/p/3490481.html 越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率.尤其Chrome本身是可以登录的,登录后你所有的插件都会自动同步到每一个登录后的Chrome的,非常方便啊. Postman - REST Client Postman是Ajax开发的神器,对于Restful开发方式特别有帮助,可以用来模拟各种请求来测试API的正确性,比如用来模…

写在前面 我花了将近一个多月的时间断断续续写下这篇博文,并精心写下完整demo,写博客的辛苦大家懂的,所以转载务必保留出处.本文所有涉及到的大部分代码均在这个demo里面:https://github.com/liuxianan/chrome-plugin-demo ,大家可以直接下载下来运行. 另外,本文图片较多,且图片服务器带宽有限,右下角的目录滚动监听必须等到图片全部加载完毕之后才会触发,所以请耐心等待加载完毕. 本文目录: demo部分截图: 前言 什么是Chrome插件 严格来讲,我们…

写在前面 我花了将近一个多月的时间断断续续写下这篇博文,并精心写下完整demo,写博客的辛苦大家懂的,所以转载务必保留出处.本文所有涉及到的大部分代码均在这个demo里面:https://github.com/sxei/chrome-plugin-demo ,大家可以直接下载下来运行. 另外,本文图片较多,且图片服务器带宽有限,右下角的目录滚动监听必须等到图片全部加载完毕之后才会触发,所以请耐心等待加载完毕. 本文目录: demo部分截图: 前言 什么是Chrome插件 严格来讲,我们正在说的东…

写在前面 我花了将近一个多月的时间断断续续写下这篇博文,并精心写下完整demo,写博客的辛苦大家懂的,所以转载务必保留出处.本文所有涉及到的大部分代码均在这个demo里面:https://github.com/sxei/chrome-plugin-demo ,大家可以直接下载下来运行. 另外,本文图片较多,且图片服务器带宽有限,右下角的目录滚动监听必须等到图片全部加载完毕之后才会触发,所以请耐心等待加载完毕. 本文目录: demo部分截图: 前言 2.1. 什么是Chrome插件 严格来讲,我们…

[干货]Chrome插件(扩展)开发全攻略   写在前面 我花了将近一个多月的时间断断续续写下这篇博文,并精心写下完整demo,写博客的辛苦大家懂的,所以转载务必保留出处.本文所有涉及到的大部分代码均在这个demo里面:https://github.com/liuxianan/chrome-plugin-demo ,大家可以直接下载下来运行. 另外,本文图片较多,且图片服务器带宽有限,右下角的目录滚动监听必须等到图片全部加载完毕之后才会触发,所以请耐心等待加载完毕. 本文目录: demo部分截图…

常用浏览器google chrome 有很多优秀的插件,寂寞的时候想看看人家是怎么实现的,说是快那就动手吧 插件代码位置 本人mac笔记本,chrome 插件位置如下 $ cd  /Users/vincent/Library/Application\ Support/Google/Chrome/Default/Extensions $ ls -al drwxrwxr-x   3 vincent  staff   102 Jun 24 13:33 bnoamnljhdaigfhafpomkflke…

开发chrome插件时遇到需要获取原始网页中的一个js变量的值问题.由于content.js和原始网页的作用域环境不同,无法直接获取变量的值,提示undefined.谷歌找到大神提供的办法.综合起来记录如下: 考虑到Google Reader的网页太复杂,这里就以Google首页来举例了.打开网页后,右键打开审查元素,然后在控制台输入fp,就会看到一个字符串,这就是原始网页的一个全局变量. 现在我要获取它,就可以创建一个script元素,append到head.而这个script元素的执行环境是…

1.Chrome插件开发基础   开发Chrome插件很简单,只要会基本的前台技术HTML.CSS.JS就可以开发了. Chrome插件一般包括两个HTML页面background和popup.   background页面只在启动浏览器加载插件时载入一次,它不直接显示出来而是在后台运行. 它包含了插件的主要逻辑,收集或处理的结果可以保存到全局变量localStorage中传递给popup 页面.popup页面就是点击插件图标后弹出的页面,将用户需要的数据展示出来或者与用户交互.   此外插件还…

开发chrome插件时遇到一个问题,那就是单文件组件的data数据需要从chrome提供的storage对象中获取,但是 chrome.storage.sync.get 方法是异步获取数据的,需要通过它的回调函数进行使用获取到的数据,没有返回值 解决方案就是 通过Function.bind(context)方法进行绑定上下文信息,这样就可以正常的在回调函数中进行设置到 vue 单文件组件的数据里面了 beforeMount:function(){ chrome.storage.sync.get(…

基于REST的Web服务客户端是一款功能强大的谷歌浏览器插件,使用基于REST的Web服务客户端(模拟REST客户端)可以让用户使用谷歌浏览器模拟REST请求来测试REST风格. 基于REST的Web服务客户端的开发背景 REST风格的web架构系统,又称为RESTful架构,它是一种网络数据编程的规范,REST没有具体的标准,它只是一种编程风格或者是一种约束,主要用于网络客户端与服务端的数据交互,比如手机app与云服务器之间的交互,游戏客户端与游戏服务器的交互.REST的一大特点就是表现在其是…

本文将从个人经验出发,讲述为什么需要Chrome插件,如何开发,如何调试,到哪里找资料,会遇到怎样的问题以及如何解决等,同时给出一个个人认为的比较典型的例子——获取网页内容,和服务器交互,再把信息反馈给用户.OK,准备开始吧,我尽量把文章写得好看点,以免读者打瞌睡. 目录 为什么需要 为什么是Chrome 需要准备什么 如何开始 Page Action Chrome插件结构 学习资料 我的例子 调试 调试Content Scripts 调试Background 调试Popup 一些问题 总结 为…

[开发必备]吐血推荐珍藏的Chrome插件 一:(Lying人生感悟.可忽略) 青春浪漫,往往难敌事故变迁.生命对每一个人都是平等的,彼此所经历的那就一定是彼此所必须经历的,它一定不是只为了折磨.消耗我们.它一定会在我们未来的人生路上发生一定的化学反应.如果这些事在你我的人生中必须要经历,还不如让它来的早一点,在我们还可以从头再来的时候一起牵着手,心连心地走下去...... 二:(回到正题.待细看) 一直都对Chrome情有独钟,第一次接触她只因她的icon就喜欢上它了,后来便一发不可自拔,现在…

这篇博客推荐的都是谷歌chrome浏览器插件,理论上,与之相同内核的浏览器都能使用.由于是谷歌插件,所以在天朝的网络,你懂的! 红杏 专为 学者 .程序员.外贸工作者 打造的上网加速器.我们相信,上网本该如此简单!扯淡了,我相信大家都懂,因为在天朝.不多说,我相信收费的才能得到更好地服务. 有道智能翻译 浏览页面时,点击插件栏按钮, 就可以立刻体验有道网页翻译2.0.网页可以分翻译等级,难词用括号在原文中注释,可以全文翻译.某些网站因为安全原因,可能会使用不了,不过绝大部分网站是可以使用的. 颜…

http://jingyan.baidu.com/article/b907e627fb90fd46e7891c3c.html Chrome 浏览器作为基于Webkit的新一代浏览器.Chrome自从正式发布以来,市场占有率逐步提高,自从公布了Chrome扩展的API以来,Chrome扩展开发更是前途似锦.一个Chrome插件小则可以解决生活中琐碎的问题,多则可以惠及千众,造福万代.而且,Google为Chrome建立了自己的Web开发市场,做得好的插件还可以为作者赢得丰厚的利益. 工具/原料 C…

Web前端开发实用的Chrome插件 越来越多的前端开发人员喜欢在Chrome里开发调试代码,Chrome有许多优秀的插件可以帮助前端开发人员极大的提高工作效率.尤其Chrome本身是可以登录的,登录后你所有的插件都会自动同步到每一个登录后的Chrome的,非常方便啊. Postman - REST Client Postman是Ajax开发的神器,对于Restful开发方式特别有帮助,可以用来模拟各种请求来测试API的正确性,比如用来模拟Ajax请求.它还支持认证,比如简单的用户名/密码,或者…

下载了很多chrome插件和应用,有些是常用的,有些偶尔用一次,有些是不止开发中用的,现做一下总结: 红色是个人认为比较好用的,排名不分先后 1.AppJump管理应用的插件  安装了许多应用之后肯定是需要工具管理的. AppJump能从工具栏下拉菜单上快速找到并启动应用程序和其他插件.AppJump的一个很酷的功能是能将应用程序和插件组织进入不同组.例如,可以轻松将个人插件同工作插件隔开,以进行更有效的时间管理. 但是管理全部插件会另开页面,这点不太方便. 2.Extensions Manag…

公司需要开发chrome浏览器右键菜单功能,点击后可传页面的相关参数与客户端(winform)交互. 我对chrome扩展一无所知,所以第一阶段,我称之为"扫盲".也就是先找些相关资料,了解下情况.我在网上看到一篇题为:[干货]Chrome插件(扩展)开发全攻略 的文章,里面的知识点覆盖面广,很全,我把它当字典去查.然后把博主提供的例子下载下来运行.主要看看人家是怎么做的.我需要的右键菜单,demo里有.但是如何与客户端交互,这个倒没有.还需要查看更多的资料. 要查看资料,我建议首选官…

WEB前端助手(FeHelper)插件概述 WEB前端助手:FeHelper是一款chrome浏览器插件.包含一些前端实用的工具,如字符串编解码.代码美化.JSON格式化查看.二维码生成器.编码规范检测.栅格规范检测.网页性能检测.页面取色等web前端开发的常见功能.官方网站:https://www.baidufe.com/fehelper WEB前端助手(FeHelper)插件功能介绍 这款FeHelper插件对于web前端需要处理的网页html源码压缩,css或javascript的压缩都能…

安装使用插件钱包 1. 打开Google浏览器的应用商店,搜索Bystore 下载链接:http://t.cn/E6cFFwb 2. 然后点击添加到Chrome,就可以添加到我们的: 3. 使用google插件钱包 如果你使用的是测试网,可以去测试网水龙头领取BTM. 测试网水龙头:http://test.blockmeta.com/faucet.php 搭建Dapp demo Dapp demo是一个基于比原的储蓄合约,该demo可以进行资产的锁仓储蓄,到期返还资产并给一定的利息.这个dapp…

前言:本文参考了其他已有的文章,在其基础上简化了一些没有必要的操作. 同时也记录一下chrome 插件ppapi环境的基础搭建.并且感谢已有文章作者的大无畏的分享精神! 在这附上参考文章链接:https://blog.csdn.net/y601500359/article/details/72821974 当前系统版本为 Windows 10 x64, Chrome 版本 71.0.3578.98(正式版本) (32 位),VS2013(中文版) ========================…

[干货]Chrome插件(扩展)开发全攻略:https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html…