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

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

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

chrome扩展之4(终结篇)：一步步跟我学开发一个表单填写扩展
上节课我们实现的是在google搜索框中输入内容,但是这个内容是在注入的js代码中定义的,我们的目的是当点击菜单项时,把菜单项的内容填写到google搜索框中.如下图GIF动画所示: 请看点击下面的缩 ...
基于Ext Core的包含校验功能的表单提交扩展Ext.ux.submit
近期因为工作需要,需要使用 Ext Core ,但是目前 Core 的扩展太少了,尤其是基于表单验证及提交的,基本没有,如果使用 Ext 本身的功能,那么库大小又增加不少.在研究了 Ext.form. ...
Bootstrap 表单的扩展控件
除了基本的控件,作为对 HTML 表单控件的补充,Bootstrap 还为表单额外提供了一些非常实用的扩展控件. 输入框的前置和后置组件,是非常实用的控制控件.利用输入框的前置和后置组件,可以在输入框 ...
easyUI表单验证扩展
插件EasyuiEValidate.js代码内容: $.extend($.fn.validatebox.defaults.rules, { CHS: { validator: function (va ...
写一个简单易用可扩展vue表单验证插件(vue-validate-easy)
写一个vue表单验证插件(vue-validate-easy) 需求目标:简单易用可扩展如何简单开发者要做的写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...
快速开发一个PHP扩展
快速开发一个PHP扩展作者:heiyeluren 时间:2008-12-5 博客:http://blog.csdn.net/heiyeshuwu 本文通过非常快速的方式讲解了如何制作一个PHP 5. ...
go语言编写php扩展,[原创]快速开发一个PHP扩展-Go语言中文社区
快速开发一个PHP扩展本文通过非常快速的方式讲解了如何制作一个PHP 5.2 环境的扩展(PHP Extension),希望能够在图文的方式下让想快速学习的朋友了解一下制作过程. 需求:比如开发一个 ...
php7扩展开发教程,Linux下PHP7扩展开发入门教程1：扩展开发流程
本文将会基于PHP7开发一个最简单的扩展,随便取个名learn_ext,编译生成一个learn_ext.so文件,最终调用可以在php中调用learn_ext扩展中的函数来输出一个hello worl ...
解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题一般的浏览器input和button的高度不一致问题...
解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题如果我们把一个表单设置位 autofocus ,这时这个表单在获取焦点后就会产生淡黄色的背景,我们就是使用!importa ...

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

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

最新文章

热门文章