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

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

chrome扩展之3：一步步跟我学开发一个表单填写扩展
这节课实现的效果如下图所示: 我们先想一想,怎么样才可以在搜索框上输入内容呢,当然可以手动输入^_^,除了这个之外呢? 如果您有这个页面的后台编辑权限就可以直接修改这个页面的内容.当然,这个页面是go ...
基于Ext Core的包含校验功能的表单提交扩展Ext.ux.submit
近期因为工作需要,需要使用 Ext Core ,但是目前 Core 的扩展太少了,尤其是基于表单验证及提交的,基本没有,如果使用 Ext 本身的功能,那么库大小又增加不少.在研究了 Ext.form. ...
Bootstrap 表单的扩展控件
除了基本的控件,作为对 HTML 表单控件的补充,Bootstrap 还为表单额外提供了一些非常实用的扩展控件. 输入框的前置和后置组件,是非常实用的控制控件.利用输入框的前置和后置组件,可以在输入框 ...
[洪流学堂]Hololens开发入门篇3：使用基本功能开发一个小应用
本文首发于"洪流学堂"公众号. 洪流学堂,让你快人几步本教程基于Unity2017.2及Visual Studio 2017 本教程编写时间:2017年12月4日本文内容提要 ...
【实战篇】使用fabric.js 快速开发一个图片编辑器
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群本文由作者@愚坤(秦少卫)投稿授权分享,项目源码已开源,感兴趣的可以点击源码地址学习下最近 ...
easyUI表单验证扩展
插件EasyuiEValidate.js代码内容: $.extend($.fn.validatebox.defaults.rules, { CHS: { validator: function (va ...
第十四篇表单控件 - 购物车页面
上一篇内容已经简单的介绍了表单控件以及表单控件的绑定,有登录界面输入的用户信息(userInfo)是否需要启动 "记住" 功能,"记住" 是一个记录登录状态, ...
初学HTML代码笔记3终结篇之列表和表单(pink老师)
一.代码部分 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
分步表单_表单设计-掌握表单设计方法（表单体验篇）
全篇阅读大概需要15min,对表单设计不熟悉的同学看完后肯定会有不少的收获~~~ 说到表单其实在生活中可以接触到各种各样的表单,比如:驾照申请表.体检表.银行开户需要填写的表等等,这些都是表单,主要目 ...

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

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

最新文章

热门文章