花了好几天时间,终于完成了这个功能:
一个browser_action形式的chrome插件,提取用户输入的文本中的指定内容到输出文本框
文件:
manifest.json
app.js
popup.html
文件夹结构图:
文件内部结构详述:
manifest.json文件
{
"name": "My First CVE_EXCHANGE_Extension", 插件名字
"manifest_version": 2, manifest版本,必须为2
"version": "1.0", 插件版本
"description": "The EXTENSION for catch CVE from text...", 描述插件作用
"browser_action": { 插件形式是browser_action,点击按钮弹出形式
"default_icon": "cve.jpg", 插件用的图片名
"default_popup": "cve_exchange.html" 点击按钮弹出popup页面
},
"content_scripts": [{"matches": ["*://*/*"],"js": ["app.js"]}] 插件默认加载的js文件,貌似有好几种加载js脚本的形式,这里没有具体去了解
}
简陋的html文件:没有指定能够输入的最大字符串,也没有指定显示文本框的格式,更加没有样式(前端盲的典型操作。。。。)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>CVE_EXCHANGE plugin</h1>
<p>请输入要解析的字符串内容:</p>
<textarea id="in_text_1">请输入要解析的字符串内容</textarea>
<button id="btn" >执行解析</button>
<textarea id="out_text_1"></textarea>
<script src="app.js"></script> 这里删掉马上点击按钮无效,然后,把Js代码写在这个标签里,加载插件的时候会报错,unsafe_inline_script,大致这几个报错关键词吧
</body>
</html>
app.js文件
var a = document.getElementById("btn");//CHROME插件popup页面中click时间必须通过外部Js文件绑定该事件
a.onclick=function(){ //此处必须使用function,改成其他名称都不行,不认识
var x,rsl_text;
var pattern = /CVE-\d{1,4}-\d{1,10}/gi; //关键发挥作用的部分,以后还是做成表达式可输入框定制的好了,这里写死了。
//获取id=in_text_1输入的字符串内容
x = document.getElementById("in_text_1").value;
rsl_text = x.match(pattern);
document.getElementById("out_text_1").value = rsl_text; //貌似有好几种改节点值的方式,没有一个个试 innerHTML啥的
}
遇到的最耗时的问题:
搞不清楚怎么样才能使得点击按钮能够执行js代码,
1、chrome插件不能执行内嵌的js代码(js代码写在html script标签里),得引用外部js文件
<script src="app.js"></script>
2、点击按钮无效:
太坑了,要绑定click事件才行:
先定位
var a = document.getElementById("btn");
然后配置onclick事件
a.onclick=function(){click后执行的Js必须写在这个里面}
插件使用方式:
打开浏览器开发者调试模式,然后选择加载已解压的文件夹