chrome组件开发--填表组件简单例子

最新推荐文章于 2024-06-24 09:36:06 发布

xiejx618

最新推荐文章于 2024-06-24 09:36:06 发布

阅读量4.4k

点赞数 2

分类专栏： javascript 文章标签： chrome

本文链接：https://blog.youkuaiyun.com/xiejx618/article/details/38542467

版权

javascript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个利用Chrome扩展程序实现的自动化表单填写工具，通过配置分隔符、字段ID和对应值，点击按钮即可自动填充表单信息，简化了大量重复输入的工作。适用于快速处理多人参与的大型表单任务。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要参考开发指导(在大陆想打开,必要时,翻墙!):https://developer.chrome.com/extensions/devguide

这周末公司组织旅游,那边发过来了一个填表页的页面,填的信息多,我们人数也不少.如果一个字段一字段复制,我觉得是比较麻烦事.我想是否有一个可以自动填写的工具.于是萌发了怪想法.开发完最后的效果如下图

1.split就是分隔符;
2.keys就是填写的字段id,id之间以上面选择的分隔符来分隔;
3.values就是要填写的字段值,值之间以上面选择的分隔符来分隔;
填好三个东西,点一下填写,那页面的值就会被填充进去.当然对于具体某个表单和已知的来源数据,改一下代码,只需要填values就好,填写也用change事件监听好了,按钮也省了!

一.开发

1.manifest.json

{
    "manifest_version": 2,
    "name": "MyApplication",
    "version": "1.0",
    "browser_action": {
        "default_title": "click me",
	"default_icon":"icon.png",
	"default_popup":"popup.html"
    },
    "permissions":["tabs", "http://*/*", "https://*/*"]
}

2.popup.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
body { overflow: hidden; margin: 0px; padding: 0px; background: white; }
.tbRow { display:table-row; width:200px; }
.tbCell { display:table-cell }
.tbName { text-align:right; vertical-align:middle; }
.tbValue { }
#names { width:300px; }
#values { width:300px; height:200px; }
</style>
<script type="text/jscript" src="popup.js"></script>
</head>
<body>
<div class="tbRow">
  <div class="tbCell tbName">split:</div>
  <div class="tbCell tbValue">
    <input type="radio" id="split0" name="split" value="|" checked="checked"/>|
      <input type="radio" id="split1" name="split" value=":"/>:
      <input type="radio" id="split2" name="split" value=","/>,
  </div>
</div>
<div class="tbRow">
  <div class="tbCell tbName">keys:</div>
  <div class="tbCell tbValue">
    <input type="text" id="names" name="names"/>
  </div>
</div>
<div class="tbRow">
  <div class="tbCell tbName">values:</div>
  <div class="tbCell tbValue">
    <textarea type="text" id="values" id="values"></textarea>
  </div>
</div>
<div class="tbRow">
  <div class="tbCell tbName"></div>
  <div class="tbCell tbValue">
    <input id="btnFill" type="button" value="填写"/>
  </div>
</div>
</body>
</html>

3.popup.js

function btnFillListener(){
	/*分隔符*/
	var splits=document.getElementsByName("split");
	var seperate='|';
	for(var i=0;i<splits.length;i++){
		if(splits[i].checked){
			seperate=splits[i].value;
			break;
		}
	}
	/*所有字段id,id之间以分隔符分隔*/
	var names=document.getElementById("names").value;
	/*所有字段value,value之间以分隔符分隔*/
	var values=document.getElementById("values").value;
	/*将param对象发送到handle.js*/
	var param={"seperate":seperate,"names":names,"values":values};
	chrome.tabs.executeScript(null, {
		code: "var param="+JSON.stringify(param)+";"
	}, function(){
		chrome.tabs.executeScript(null, {
			file:"handle.js"
		});
	});
}
document.addEventListener('DOMContentLoaded',function(){
	document.getElementById("btnFill").addEventListener('click',btnFillListener);
});

4.handle.js

var seperate=param.seperate;
var names=param.names.split(seperate);
var values=param.values.split(seperate);
if(names.length==values.length){
	for(var i=0;i<names.length;i++){
		var element=document.getElementById(names[i]);
		if(element){
			element.value=values[i];
		}
	}
}else{
	console.log('data err');
	
}

因为不够人性化,所以只对程序猿有些作用!

源码:http://download.youkuaiyun.com/detail/xiejx618/7751187