chrome扩展之3：一步步跟我学开发一个表单填写扩展

这节课实现的效果如下图所示:

我们先想一想，怎么样才可以在搜索框上输入内容呢，当然可以手动输入^_^，除了这个之外呢?

如果您有这个页面的后台编辑权限就可以直接修改这个页面的内容。当然，这个页面是google的，

我们没有这个权限。虽然我们没有后台的权限，但我们可以获取到前台的权限，比如我们可以把这个文档

保存到本地，然后编辑。不过这不是我们想要的，我们有更好的方法。这个方法是什么呢?就是注入javascript，

意思就是让某个页面执行我们定义的一段javascript代码。那么这个页面你就可以随心所欲地修改了。

那么下面我们就说说注入的方法，javascript的注入是由manifest.json文件定义的，只要在上节课的

manifest.json文件中添加一个"content_scripts"字段即可，详细说明及代码如下:

以下内容为程序代码:

1 {
2     "name":"Hello Chrome",
3     "version":"1.0.0",
4     "icons":{
5         "48":"icon.png"
6     },
7     "browser_action":{
8         "default_title":"Hello browser action",
9         "default_icon":"action.png",
10         "popup":"popup.html"
11     },
12     "content_scripts":[{
13         "matches":["http://www.google.com.hk/*"],
14         "js":["inject.js"],
15         "run_at":"document_end"
16     }]
17 }

"matches"字段表示要注入到哪些页面，我们这个扩展是作用于http://www.google.com.hk,

所以这个字段的值就如上代码所示，我们还注意到上面所示的值有一个星号"*"，这个符号的作用

是匹配任意以"http://www.google.com.hk/"开头的URL。所以我们注入的代码不紧是对

"http://www.google.com.hk"

而且也对"http://www.google.com.hk/imghp?hl=zh-CN&tab=wi&q=%E5%9C%A8google%E6%90%9C%E7%B4%A2%E6%A1%86%E4%B8%AD%E8%BE%93%E5%85%A5%E5%86%85%E5%AE%B9"

有效。

"js"字段显而易见的，表明注入的是哪个js文件。

"run_at"字段所表示的是javascript注入的时机，这里的时机是"document_end"，表示在文档装载完毕时进行注入。

好的，我们编辑完了manifest.json文件，现在让我们添加一个名为inject.js的文件，代码如下所示:

以下内容为程序代码:

1 var e=document.getElementById("lst-ib");
2 e.value="在google搜索框中输入内容";

这节课完成的工程下载:http://files.cnblogs.com/JiangHuakey/1.2browser_action.zip

在笔者的chrome论坛上也可以找到该文章:http://www.chinachrome.net/dispbbs.asp?boardid=2&id=13&page=1&star=1