Google Chrome是一个很强大的浏览器,提供了各种各样的插件,大大提升了使用了的效率,比如vimium.honx等. Google在提供这些插件的同时还允许用户开发自己的插件. 最近在写js的脚本采集程序,需要测试在网页中的运行情况,因此可以利用Chrome插件进行测试. 1.首先第一步是新建一个文件夹,并新建一个manifest.json文件,内容如下 { "manifest_version": 2, "name": "Js implants&q

上一篇文章 通过“content-scripts”的方式向页面注入js和css来美化页面,但是有一个弊端:一旦配置好需要注入的页面,之后如果这个页面地址以后发生变化,或者要新加一些URL进来,那么得修改manifest.json这个文件.试想如果一个Chrome插件已经打包好,再去改代码是不可能的. 本文通过另一种方式来实现相同的功能,同时做到页面地址动态可配置.下图是本次要处理的页面:https://jiacrontab.iwannay.cn/download/ 每一行都是一个文件的基本信息,

趁着2018年还剩最后几天,发几篇博客,荒废太久了,惭愧. 最近也是需求驱动,研究了下Chrome插件开发.来看一下我们公司运维提供的日志查看页面 所有项目的日志都参杂在一起,每次去找都很痛苦.慢慢发现这些日志的名称都有个规律:项目名-日期-后缀,于是想美化下这个页面,但是服务端还动不了,只能在浏览器端想办法. Chrome插件可以本地渲染页面,是个非常不错的选择,直接来看下完成的效果 按照“项目名”和“日期”分类了,这样便于查看.同时页面也美化了,不仅实用而且赏心悦目. 一.从零开始了解Chr

序言 最近开发chrome插件,涉及到消息传递机时按照教程去敲代码,结果总是不对.研究了大半天终于找到原因,现在记录下. 程序 插件程序参考官网 chrome官网之消息传递机制, 不能FQ的同事也可以参考下这位牛人的文章 [chrome插件开发之消息传递机制](http://ju.outofmemory.cn/entry/74567 "chrome插件开发之消息传递机制") 感谢这些牛人的分享让我们学到了很多知识. 这篇大牛的文章中有content向background传递消息的按钮,

Chrome插件开发入门(二)——消息传递机制   由于插件的js运行环境有区别,所以消息传递机制是一个重要内容.阅读了很多博文,大家已经说得很清楚了,直接转一篇@姬小光 的博文,总结的挺好.后面附一个自己写过的demo,基本就对消息传递能够熟悉了. 在开发 Chrome 扩展时经常需要在页面之间进行通讯,比如 background 与 content script 之间,background 与 popup 之间等等,本文结合官方文档中的例子介绍了 chrome 扩展开发中消息传递的基本实现.

欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:陈纬杰 背景 对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见的动画效果都封装起来了,非常实用.但是有时候在开发中,仅仅只是需要某一两个动画效果,把整个CSS文件都引入,这样不是太好. 需求就出现了,能不能有一个工具可以直接预览Animate.css对应的动画效果,并且生成对应的动画代码呢? 作为一个UI开发,平时跟Chrome浏览器打交道最多,于是就整了一个

Chrome插件开发入门 Chrome扩展文件 Browser Actions(扩展图标) Page Actions(地址栏图标) popup弹出窗口 Background Pages后台页面 实战讲解   Chrome的更新速度可以说前无古人,现在我每天开机的第一件事就是打开Chrome检查是不是有了新版本.界面清爽.操作人性化.网络备份资料和快速的启动速度令我爱不释手,还有它拥有众多的扩展程序,相对于firefox的插件来说,数量上和质量上稍显不足,但相信chrome将会很快在扩展上超越fi

两个不错的网址: 360chrome插件开发文档:http://open.chrome.360.cn/extension_dev/manifest.html 图灵 chrome插件开发于应用 电子书:http://www.ituring.com.cn/minibook/950 建议总体内容先大概看一下就好,刚开始没必要纠结那么细. 比如chrome扩展框架/mainfest.json文件格式等等,再找个项目边写边学,遇到不会的再去查(文档很重要啊),最后想的话再深入全部详细看下. json的两种

写在开头: 相当有意思的UI界面,编码实现,浏览速度.对于一天浏览器使用超过10个小时的人来说,能够定制自己的浏览器,是相当的具有诱惑力. Getting Started 1:目前不支持标准发布版本的Chrome插件扩展,不过也有消息马上就开发了,对于我们这个不是问题.4.0使用中 2:创建一个所必要的文件夹,名字任意,用于存放所需文件,开发后,可以通过Chrome打包提交 3:manifest.json文件,存放描述信息,也可以理解为插件运行的总入口,使用JSON的格式进行定义 {   "na

在文章1中 尝试了开发chrome一个蛋疼的插件,而且必须要写 一坨令人费解的代码才能只能,今天来次清爽的开发:如图: 这是 "清爽模式" →_→ 我把popup.html与popup.js都扔掉了 首先:看下manifest.json文件(chrome浏览器只认识这个名字),其中代码: { "name": "Test_APP", "version": "1.0", "manifest_versi

1.新建文件夹 如图:整个项目的结构 2.新建一个名为manifest.json的文件,编码模式为utf-8,(可以先建好txt文件然后再将文件后缀txt改为json) 3.用记事本写入代码如下:(manifest.json) { "name": "Test_APP", "version": "1.0", "manifest_version":2, "description": &quo

本来来自 http://www.cnblogs.com/rufus-hua/ 1.新建文件夹 如图:整个项目的结构 2.新建一个名为manifest.json的文件,编码模式为utf-8,(可以先建好txt文件然后再将文件后缀txt改为json) 3.用记事本写入代码如下:(manifest.json)   注释:其中browser_action 中的dafault_icon 是自己 准备的图片(我将一张jpg到网站上转化为了几张不同大小的ico),dafault_popup是默认页面 4. 新

近期在用百词斩这个站点来学单词,感觉非常不错,就是在回想单词列表的时候仅仅有单词和意思.却没有读音.感觉非常不方便,思来思去,想到了Chrome插件能够胜任这个工作.于是小小的研究了一下. Chrome插件的本质就是一个由 manifest.json 文件和插件所须要的图片,css.html,js资源组成的一个web页面,仅仅是和传统的web页面不同的,它是以chrome浏览器为宿主执行的一个web程序. Chrome插件能够与Web页面交互,也能够通过content script或cross-

作为一个开发人员,我们在日常工作中肯定会用到 Chrome 浏览器,同时也会用到谷歌的一些插件,比如 Tampermonkey,AdBlock等,在之前的文章本人还是用了 Tampermonkey,传送门 https://www.cnblogs.com/weijiutao/p/11677932.html, 在某些时候我们会自己开发一些简单实用的插件,本章开始我们就开始学习一下如何做一些简单的谷歌插件. 作为一个新手,我在学习如何制作谷歌插件时翻到了博主 小茗同学 的笔记 https://www.

作为一个前端开发者,我们经常需要和各种各样的接口打交道,很多时候我们的开发环境的域和接口所在的域是不同的,比如我们本地开发环境运行域是localhost,但接口所在的域是www.xx.com,这个时候如果我们代码中出现异步请求www.xx.com域API的情况,就会出现跨域问题. 一般情况下,我们会请后端大佬帮我们加上跨域策略,通过设置响应头Access-Control-Allow-Origin来解决跨域问题,但是有时候我们最终的代码可能也会发布到和API的同域的环境上去,如果每个接口都需要请后

最近学习了Chrome插件的开发,总体来说上手还是很容易的,因为浏览器插件本质上依旧是网页,写几个demo基本就了解了他的开发过程. 完整项目:xmy6364/chrome-extension-getimage 什么是Chrome插件 正如开头所说的,Chrome插件实际上就是一个网页,由HTML.CSS.JS.图片等资源组成,与网页不同的是,Chrome插件是用来增强浏览器功能的,同时它还有一套属于自己的开发规则和API. 每个插件都由不同的组件构成,这些组件大都包括background sc

昨天用360极速(虽然我不喜欢360.)浏览器,登陆知乎查阅一些东西,突然感觉有些观点很赞同,想copy转载一下,我了个去,它丫的居然不让我复制. 地址:https://www.zhihu.com/question/19748408 不过,这个简单啊.很多方法可以实现"丫的就要copy你",更何况,360插件不少呢,于是我试了Enable Copy,Allow Right Click等著名解除防复制的插件,TMD居然都破不了!!于是,自己动手丰衣足食啊. 以前没写过chrome插件,怎

参考文档: http://open.chrome.360.cn/extension_dev/overview.html 参考博文: http://www.cnblogs.com/mfryf/p/3701801.html http://www.cnblogs.com/jue-star/p/5077036.html 常见问题: http://segmentfault.com/q/1010000003926071

开发Chrome插件很简单,只要会web开发(html+javascript+css)那么这个就是能驾轻就熟,只需要了解一下插件具体的运行环境及要求就OK了. 1.先创建一个html文件,名字随便取,如index.html,内容如下 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8" /> <title></title> &

序言 去年7月刚过了日语N2,想着今年考个N1,为了加深日语文化的了解,还有学习日语,平时免不了经常上日语网站. 但是毕竟水平有限,所以不免遇到不认识的单词,日语单词的一个特点就是很多单词你知道是什么意思,但是不知道怎么读. 比如:"簡素な構造" 中的第一个词:"簡素",很显然就是"简单,朴素的意思",但是你肯定不知道它的读音是:"[かんそ]①". 以前遇到这样的词的时候,就会在沪江小D网页版上面查询,但是这样特别麻烦,你要跳

使用场景 在开发Chrome插件时, 有一种需求: 要求在WEB页面显示一个浮动窗口(A), 在此窗口中允许用Ajax方式调用另一个服务器上的一个页面(B) B页面上有独立的功能用JS写function来实现 已知条件 窗口A可以利用content-script.js动态生成 窗口A中放置一个按钮, 调用Onclick方法召唤出B页面, 样例代码如下 <button onclick="invokeContentScript('openalertWin()')">test&l