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

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

本文会做一个chrome插件开发的入门介绍,实现利用chrome扩展实如今目标网页执行我们的js的功能。关于chrome扩展的具体内容,能够通过官网了解。

开发工具非常easy。记事本就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,打开菜单。找到扩展程序选项我的在扳手->工具->扩展程序 路径下。

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

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

能够看到,你的1.png已经作为图标被放在地址栏旁边了。

仅仅只是如今毫无功能。

如今让我们把helloworld加入进去。

在manifest文件中加入几行这种代码。

"content_scripts": [
{
"matches": ["http://www.aaaaa.com/*"],
"js": ["myscript.js"]
}
]

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

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

新建一个js文件myscript.js,里边代码非常easy。

alert("HelloWorld");
document.body.style.backgroundColor="gray";

在扩展程序页面又一次载入插件,就能够去看效果了。

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

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

点击确定后

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

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxNDQxOTUxMg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

丑爆了有木有,但确实变灰了。

另外百度,咱就不能换个背景透明的png做logo吗?

上一篇:linux:vim


下一篇:linux使用git时传输速度太低,提速