chrome 插件开发的入门介绍,实现利用 chrome 扩展实现在目标网页运行我们的 js 的功能。关于 chrome 扩展的详细内容,可以通过官网了解。
开发工具很简单,记事本就 OK 了,当然还要有一个 chrome 浏览器。
新建一个文件夹,比如,HelloWorld
然后创建一个文本文件,作为这个扩展程序的配置文件,所以文件名是 manifest.json,注意扩展名是 json,然后输入如下内容。
json
{
"name": "first chrome plugin",
"manifest_version": 2,
"version": "1.0",
"description": "good",
"browser_action": {
"default_icon": "1.png"
},
"permissions": [
"tabs", "http://*/*","https://*/*"
],
"content_scripts": [
{
"matches": ["https://www.baidu.com/*"],
"js": ["myscript.js"]
}
]
}
1.png 的话,随便拖一张图片进来就 OK 啦。另外需要注意的是,该文本文件需要用 UTF8 字符集保存。
现在让我们把 helloworld 添加进去。在 manifest 文件里有几行这样的代码。
json
"content_scripts": [
{
"matches": ["http://www.baidu.com/*"],
"js": ["myscript.js"]
}
]
注意跟之前的代码用逗号分割开。
可以看到我们新增了一个内容,就是 content_scripts,详细的介绍应该去看官方文档,我在这里简要介绍下,content_scripts 是运行在打开页面的脚本,可以拿到整个页面的 DOM 对象,所以可以利用该脚本对页面进行操作。
新建一个 js 文件 myscript.js,里边代码很简单。注意该文件为utf-8
编码
js
alert("HelloWorld");
document.body.style.backgroundColor="gray";
在扩展程序页面重新加载插件,就可以去看效果了。
当我打开百度的时候,Oh,my god!