chrome扩展小工具——正则文字提取器(popup页面按钮点击触发Js无效)

花了好几天时间，终于完成了这个功能：

一个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文件：没有指定能够输入的最大字符串，也没有指定显示文本框的格式，更加没有样式（前端盲的典型操作。。。。）

CVE_EXCHANGE plugin

请输入要解析的字符串内容:

请输入要解析的字符串内容

执行解析

         这里删掉马上点击按钮无效，然后，把Js代码写在这个标签里，加载插件的时候会报错，unsafe_inline_script，大致这几个报错关键词吧

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文件

2、点击按钮无效：

太坑了，要绑定click事件才行：

先定位

var a = document.getElementById("btn");

然后配置onclick事件

a.onclick=function(){click后执行的Js必须写在这个里面}

插件使用方式：

打开浏览器开发者调试模式，然后选择加载已解压的文件夹

文件截图

---