花了好幾天時間蚯舱,終于完成了這個功能:
一個browser_action形式的chrome插件,提取用戶輸入的文本中的指定內(nèi)容到輸出文本框
文件:
manifest.json
app.js
popup.html
文件夾結(jié)構(gòu)圖:
文件內(nèi)部結(jié)構(gòu)詳述:
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>請輸入要解析的字符串內(nèi)容:</p>
<textarea id="in_text_1">請輸入要解析的字符串內(nèi)容</textarea>
<button id="btn" >執(zhí)行解析</button>
<textarea id="out_text_1"></textarea>
<script src="app.js"></script>? ? ? ? ?這里刪掉馬上點擊按鈕無效,然后钻洒,把Js代碼寫在這個標簽里奋姿,加載插件的時候會報錯,unsafe_inline_script素标,大致這幾個報錯關(guān)鍵詞吧
</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;? //關(guān)鍵發(fā)揮作用的部分糯钙,以后還是做成表達式可輸入框定制的好了粪狼,這里寫死了。
//獲取id=in_text_1輸入的字符串內(nèi)容
x = document.getElementById("in_text_1").value;
rsl_text = x.match(pattern);
document.getElementById("out_text_1").value = rsl_text;? ?//貌似有好幾種改節(jié)點值的方式任岸,沒有一個個試 innerHTML啥的
}
遇到的最耗時的問題:
搞不清楚怎么樣才能使得點擊按鈕能夠執(zhí)行js代碼再榄,
1、chrome插件不能執(zhí)行內(nèi)嵌的js代碼(js代碼寫在html script標簽里)享潜,得引用外部js文件
<script src="app.js"></script>
2困鸥、點擊按鈕無效:
太坑了,要綁定click事件才行:
先定位
var a = document.getElementById("btn");
然后配置onclick事件
a.onclick=function(){click后執(zhí)行的Js必須寫在這個里面}
插件使用方式:
打開瀏覽器開發(fā)者調(diào)試模式剑按,然后選擇加載已解壓的文件夾