chrome扩展程序开发之在目标页面运行自己的JS
来源:互联网 发布:污是什么意思网络语言 编辑:程序博客网 时间:2024/05/17 07:14
大家都知道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吗?
1 0
- chrome扩展程序开发之在目标页面运行自己的JS
- chrome扩展程序开发之在目标页面运行自己的JS
- chrome扩展开发之在content_script里执行目标页面的函数。
- Chrome插件开发-网页中运行自己的JS
- Chrome 扩展程序开发
- Chrome扩展开发学习笔记之带选项页面的扩展
- Chrome 扩展程序的开发与发布
- 自己做一款简易的chrome扩展--清除页面广告
- Chrome浏览器扩展开发系列之六:options 页面
- Chrome浏览器扩展开发系列之七:override页面
- iOS开发如何将自己的程序在真机上运行
- iOS开发如何将自己的程序在真机上运行
- Chrome扩展程序开发实例
- 如何开发Chrome扩展程序
- 如何开发Chrome扩展程序
- 如何开发Chrome扩展程序
- Chrome 扩展程序开发 Chrome Extensions
- Chrome浏览器如何运行扩展程序?
- matlab的fdatool生成的fdacoefs.h注解
- 处理select下拉框默认选中
- 一图片压缩的java类,大小变小,宽度高度不变
- Jetty服务器报错
- 一个男人关心的东西 决定了他的层次
- chrome扩展程序开发之在目标页面运行自己的JS
- PHP中冒号、endif、endwhile、endfor这些都是什么
- rpm2cpio和cpio
- Visual Studio 2010已安装,sql server 2008 management studio安装教程
- Ubuntu的wired Networks 变灰色,无法连接网络
- 重庆OA办公系统目前推出PC端、移动终端(安卓、IOS、平板)- 上弦科技
- STL中的所有算法(70个)
- CSerialPort类解析
- 界面设计添加监听器