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

浏览数：27 / 时间：2015年06月09日

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.看看插件的运行情况。