chrome扩展之4(终结篇)：一步步跟我学开发一个表单填写扩展

上节课我们实现的是在google搜索框中输入内容，但是这个内容是在注入的js代码中定义的，我们的目的是当点击菜单项时，把菜单项的内容填写到google搜索框中。如下图GIF动画所示:

请看点击下面的缩略图片进行GIF动画演示。

上节课我们所实现的是当html文档加载完毕时就执行所注入的js代码，但是从上面的GIF动画所演示的效果来看是当用户点击了菜单时才会执行相关的js代码。这种效果是基于怎么样的一种方式实现的呢？那么我们就得来认识下chrome扩展的消息机制:

     当我们点击菜单项时发送一个消息到指定的页面-->在我们注入的js代码中建立一个消息监听的事件-->如果收到消息则执行相关的代码。下面说说消息机制需要用到的一些chrome api。

首先需要说明的是使用消息发送的api要取得权限，这又涉及到了manifest.json文件的设置。我们只需要在原来的基础上添加一个"permissions"字段,完整代码如下:

以下内容为程序代码:

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      "permissions":["tabs","http://www.google.com.hk/*"],
13     "content_scripts":[{
14         "matches":["http://www.google.com.hk/*"],
15         "js":["inject.js"],
16         "run_at":"document_end"
17     }]
18 }

发送消息的流程:

当点击菜单项时就获取特定窗口指定的标签，然后向这个标签发送一个消息。

chrome.tabs.getSelected(windowId, function(tab))

windowId 默认为当前窗口

function(tab)一个回调函数，即当获取到了指定的标签时需要调用的函数。tab参数是一个标签对象,每个标签有唯一的一个id(tab.id)。在这里的作用是结合chrome.tabs.sendRequest api向指定的标签发送一个消息。innerText表示消息的名称，这个可以随便定义的，你可以写作text,msg等等。This.innerText是一个字符串类型的消息内容。在这节课中是是选中的菜单项内容。 提示:如果你对js比较了解的话就知道下面用"{}"括起来的是表示一个对象，innerText表示这个对象的属性名称，This.innerText表示属性值

//这段代码是添加在popup.html文档中的

以下内容为程序代码:

1 function sendRequest(This){
2     chrome.tabs.getSelected(null,
3         function(tab){
4             chrome.tabs.sendRequest(tab.id,{innerText:This.innerText});
5         }
6     );
7 }

监听消息的api,这个api的大意是监听(addListener)chrme扩展(extension)中发来的消息,其中有一个回调函数：

function(request,sender,senderResponse)，其中request参数是发来的消息对象。sender参数是发送者，

senderResponse，回送一个消息给发送者。我们这节课只用到sender参数，所以我们不必理会其余两个参数。

//这段代码是添加在inject.js文档中的

以下内容为程序代码:

1 chrome.extension.onRequest.addListener(
2     function(request,sender,senderResponse){
3         var textBox=document.getElementById("lst-ib");
4         textBox.value=request.innerText;//从里可以看出如果发送的消息对象的属性是innerText，那么这里就得是request.innerText。
5     }
6 );

好的，这次的课程就到此结束，相信大家都能去写一个类似这样的扩展了，如果有问题请跟帖子回复，有复必回！

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

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

转载于:https://www.cnblogs.com/JiangHuakey/archive/2011/09/09/2172235.html