使用chrome扩展往浏览器中导入本地js脚本(制作一个简单的谷歌浏览器插件)

一般要在网页中插入js的话直接打开控制台写js就行，但是要插入大量的js，或者要在很多网站上运行本地脚本。就需要频繁打开控制台。chrome的扩展程序可以方便的帮我们插入js脚本。

制作一个简易的 chrome扩展 很简单，推荐查阅360极速浏览器的文档（和谷歌浏览器一样的），http://open.chrome.360.cn/extension_dev/manifest.html#manifest_version

第一步：新建一个文件夹，接下来的操作都在该文件夹内进行。
第二步：新建一个json文件：manifest.json，在里边加入以下代码：

{
  "name": "测试",
  "manifest_version": 2,
  "version": "1.0",
  "description": "运行一个脚本",
  "browser_action": {
    "default_icon": "1.png"
  },
  "content_scripts": [
    {
      "matches": [
        "*://*/*"
      ],
      "js": [
        "test.js"
      ]
    }
  ]
}

其中：
manifest_version表示manifest文件自身格式的版本号。从Chrome 18开始，开发者应该（不是必须，但是2012年底左右就必须了）指定版本号为2（没有引号）。

default_icon是扩展程序的图标 随便找张png图片放入文件夹内重命名为1.png就可以。

content_scripts是在Web页面内运行的javascript脚本。通过使用标准的DOM，它们可以获取浏览器所访问页面的详细信息，并可以修改这些信息。参考文档：http://open.chrome.360.cn/extension_dev/content_scripts.html

matches： 定义哪些页面需要注入content script。上方的例子中*://*/* 表示匹配所有网页。如果要指定网页，可以这么写：http://www.xx.com/ 具体匹配规则参考：http://open.chrome.360.cn/extension_dev/match_patterns.html

js： 需要向页面中注入的javascript文件，按定义顺序注入。

上方例子中 引入了test.js ，把test.js放入文件夹内就可以了。
test.js中我写入了以下代码：

document.body.style.backgroundColor="#5d5d5d";

这样，安装扩展后，打开的网页背景色就都是#5d5d5d了。

安装扩展程序的方法：
点击 谷歌浏览器的菜单：更多->扩展程序 然后打开开发者模式，点击 加载已解压的扩展程序，在弹出的资源管理器中选择前面创建的文件夹就可以了。

现在，打开谷歌页面 可以发现背景色已经被改成我们定义的灰色（#5d5d5d）了