大家都知道JS是运行在客户端的,所以,如果我们自己写一个浏览器的话,是一定可以往下载下来的网页源代码中加入js的。可惜我们没有这个能力。不过幸运的是,chrome的扩展程序可以帮我们做到这件事。
本文会做一个chrome插件开发的入门介绍,实现利用chrome扩展实现在目标网页运行我们的js的功能。关于chrome扩展的详细内容,可以通过官网了解。
开发工具很简单,记事本就OK了,当然还要有一个chrome浏览器。
新建一个文件夹,比如,HelloWorld
然后创建一个文本文件,作为这个扩展程序的配置文件,所以文件名是manifest.json,注意扩展名是json,然后输入如下内容。
{ "name": "第一个Chrome插件", "manifest_version": 2, "version": "1.0", "description": "我的第一个Chrome插件,还不错吧", "browser_action": { "default_icon": "1.png" } }
1.png的话,随便拖一张图片进来就OK啦。另外需要注意的是,该文本文件需要用UTF8字符集保存。
你的第一个chrome扩展就完成了。
什么?完成了?这么快?
确实是,打开chrome,打开菜单,找到扩展程序选项我的在扳手->工具->扩展程序 路径下。
点击加载正在开发的扩展程序
可以看到,你的1.png已经作为图标被放在地址栏旁边了。只不过现在毫无功能。
现在让我们把helloworld添加进去。在manifest文件里添加几行这样的代码。
"content_scripts": [ { "matches": ["http://www.aaaaa.com/*"], "js": ["myscript.js"] } ]
注意跟之前的代码用逗号分割开。
可以看到我们新增了一个内容,就是content_scripts,详细的介绍应该去看官方文档,我在这里简要介绍下,content_scripts是运行在打开页面的脚本,可以拿到整个页面的DOM对象,所以可以利用该脚本对页面进行操作。
新建一个js文件myscript.js,里边代码很简单。
alert("HelloWorld"); document.body.style.backgroundColor="gray";
在扩展程序页面重新加载插件,就可以去看效果了。
当我打开百度的时候,Oh,my god!
点击确定后
丑爆了有木有,但确实变灰了。另外百度,咱就不能换个背景透明的png做logo吗?
相关推荐
请参考目录,以获取最新的解压缩版本,该版本可能会在开发模式下的Chrome扩展程序页面上加载。 关于 一个简单的chrome扩展程序,其中包括工具,并向其中添加了几个功能,这使得在本地使用此惊人的工具更加容易。 ...
Google曾在自己的官方博客中宣布在Beta版Chrome25 中将加入网络语音API(Web SpeechAPI),让用户在某些嵌入了JavaScript的网页中可以更方便地使用语音指令、听写等功能。同时新版本在内容安全策略标头(Content ...
Google Chrome支持多标签浏览,每个标签页面都在独立的“沙箱”内运行,在提高安全性的同时,一个标签页面的崩溃也不会导致其他标签页面被关闭。谷歌浏览器屏幕的绝大多数空间都被用于显示用户访问的站点,屏幕上...
例如,您可以试试 Google Mail Checker(仅提供英文版)之类的扩展程序。 网页操作 无论您什么时候访问特定类型的网页,此类扩展程序都会检测出来,并在地址栏中显示一个图标。点击该图标可对网页执行相应的操作...
HybridApp 一种可以下载的Native App,其用户界面的全部或者部分元素在嵌入式浏览器组件(WebView之类的)里面运行 优雅降级 一开始就构建站点的完整功能,然后针对浏览器测试和修复。认为应该针对那些最高级、最...
语言:English (United States) 扩展程序,可让您保持正常运行! Hocus Focus是我们在SD ...设置/选项页面包含网站黑名单管理器,交互式任务列表以及有关chrome扩展程序的其他文字。 它也包含在它的html文件中,并由
开发/扩展:在应用程序/开发中修改正确的文件。 要测试:在您喜欢的浏览器中打开jasmineTests / runTests.html 要构建:运行app / build / assemble.bash注意:这是一个BASH脚本,旨在在Linux终端中运行。 该脚本...
您可以打开一个 HTML 页面,然后单击第二个闪电以使用该扩展程序进入 HTML 实时开发。 这将在您的默认浏览器中启动页面。 然后,您还应该能够将该浏览器中的 URL 复制并粘贴到任何其他浏览器中,实时编辑将立即更新...
v1功能github动作,将github问题转换为json文件( ) 一个列出所有问题的网站(( )) 托管智能合约(( )) 监视托管合同的服务(( )) 显示资金状态的评论机器人(( )) v2成就辉煌的未来一个chrome扩展程序,...
目标是创建没有ViewState,没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注:ExtAspNet基于一些开源...
目标是创建没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注:ExtAspNet基于一些开源的程序ExtJS, ...