chrome扩展程序开发之在目标页面运行自己的JS-阿里云开发者社区

开发者社区> 开发与运维> 正文

chrome扩展程序开发之在目标页面运行自己的JS

简介:

大家都知道JS是运行在客户端的,所以,如果我们自己写一个浏览器的话,是一定可以往下载下来的网页源代码中加入js的。可惜我们没有这个能力。不过幸运的是,chrome的扩展程序可以帮我们做到这件事。

本文会做一个chrome插件开发的入门介绍,实现利用chrome扩展实现在目标网页运行我们的js的功能。关于chrome扩展的详细内容,可以通过官网了解。

开发工具很简单,记事本就OK了,当然还要有一个chrome浏览器。

新建一个文件夹,比如,HelloWorld

然后创建一个文本文件,作为这个扩展程序的配置文件,所以文件名是manifest.json,注意扩展名是json,然后输入如下内容。

Plain代码  收藏代码
  1. {  
  2.   "name""第一个Chrome插件",  
  3.   "manifest_version"2,  
  4.   "version""1.0",  
  5.   "description""我的第一个Chrome插件,还不错吧",  
  6.   "browser_action": {  
  7.     "default_icon""1.png"  
  8.   }  
  9. }  

1.png的话,随便拖一张图片进来就OK啦。另外需要注意的是,该文本文件需要用UTF8字符集保存。

 

你的第一个chrome扩展就完成了。

什么?完成了?这么快?

确实是,打开chrome,打开菜单,找到扩展程序选项我的在扳手->工具->扩展程序 路径下。

点击加载正在开发的扩展程序

可以看到,你的1.png已经作为图标被放在地址栏旁边了。只不过现在毫无功能。

现在让我们把helloworld添加进去。在manifest文件里添加几行这样的代码。

 

Plain代码  收藏代码
  1. "content_scripts": [  
  2.     {  
  3.       "matches": ["http://www.aaaaa.com/*"],  
  4.       "js": ["myscript.js"]  
  5.     }  
  6.   ]  


注意跟之前的代码用逗号分割开。

 

可以看到我们新增了一个内容,就是content_scripts,详细的介绍应该去看官方文档,我在这里简要介绍下,content_scripts是运行在打开页面的脚本,可以拿到整个页面的DOM对象,所以可以利用该脚本对页面进行操作。

新建一个js文件myscript.js,里边代码很简单。

 

Javascript代码  收藏代码
  1. alert("HelloWorld");  
  2. document.body.style.backgroundColor="gray";  


在扩展程序页面重新加载插件,就可以去看效果了。

 

当我打开百度的时候,Oh,my god!

点击确定后

 

丑爆了有木有,但确实变灰了。另外百度,咱就不能换个背景透明的png做logo吗?

 


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章