首页 > 代码库 > 利用Google Chrome开发插件,在网页中植入js代码

利用Google Chrome开发插件,在网页中植入js代码

Google Chrome是一个很强大的浏览器,提供了各种各样的插件,大大提升了使用了的效率,比如vimium、honx等。

Google在提供这些插件的同时还允许用户开发自己的插件。

最近在写js的脚本采集程序,需要测试在网页中的运行情况,因此可以利用Chrome插件进行测试。

 

1.首先第一步是新建一个文件夹,并新建一个manifest.json文件,内容如下

{  "manifest_version": 2,  "name": "Js implants",  "description": "在网页中植入写好的js",  "version": "1.0",  "icons": {    "128" : "icon.png"  },  "permissions": [    "tabs", "http://*/*","https://*/*"  ],  "content_scripts": [    {"js":["maidian.js"],"matches":["http://www.baidu.com/"]}  ]}

字段解释:

manifes_version声明是我们使用的版本。

name和description分别代表我们插件的名称和描述,version则是插件本身的版本号,这些是用来向用户展示所安装的插件的相关信息。

icons指插件显示在的图标。

permissions是插件使用的权限,tabs允许使用chrome.tabs和chrome.windows的api,后面则是匹配模式,指可以和该模式的网站运行的代码进行交互。

Content scripts是在Web页面内运行的javascript脚本。通过使用标准的DOM,它们可以获取浏览器所访问页面的详细信息,并可以修改这些信息。其中js指的是要注入的脚本,marches定义了在哪些页面注入Content scripts。

 

2.然后要定义好在manifest.json中声明的资源文件,如上包括了icon.png和maidian.js,然后把文件放在manifest.json的同级目录下。

3.接着需要做的事就是加载我们自定义的插件了,打开chrome的拓展程序面板,选择“加载正在开发的拓展程序”,选择我们上述新建的文件夹,然后就可以看到我们自己的已经运行在chrome中了。

4.看看插件的运行情况。

可以看到我的js脚本已经作用在百度首页,并成功获取到了我们需要的数据。

 

官方教程及api:https://developer.chrome.com/extensions/getstarted