chrome擴展小工具——正則文字提取器(popup頁面按鈕點擊觸發(fā)Js無效)

花了好幾天時間蚯舱,終于完成了這個功能:

一個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)試模式剑按,然后選擇加載已解壓的文件夾


文件截圖




?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末疾就,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子艺蝴,更是在濱河造成了極大的恐慌猬腰,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,427評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件猜敢,死亡現(xiàn)場離奇詭異姑荷,居然都是意外死亡盒延,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,551評論 3 395
  • 文/潘曉璐 我一進店門鼠冕,熙熙樓的掌柜王于貴愁眉苦臉地迎上來添寺,“玉大人,你說我怎么就攤上這事懈费〖坡叮” “怎么了?”我有些...
    開封第一講書人閱讀 165,747評論 0 356
  • 文/不壞的土叔 我叫張陵憎乙,是天一觀的道長票罐。 經(jīng)常有香客問我,道長寨闹,這世上最難降的妖魔是什么胶坠? 我笑而不...
    開封第一講書人閱讀 58,939評論 1 295
  • 正文 為了忘掉前任君账,我火速辦了婚禮繁堡,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘乡数。我一直安慰自己椭蹄,他們只是感情好,可當我...
    茶點故事閱讀 67,955評論 6 392
  • 文/花漫 我一把揭開白布净赴。 她就那樣靜靜地躺著绳矩,像睡著了一般。 火紅的嫁衣襯著肌膚如雪玖翅。 梳的紋絲不亂的頭發(fā)上翼馆,一...
    開封第一講書人閱讀 51,737評論 1 305
  • 那天,我揣著相機與錄音金度,去河邊找鬼应媚。 笑死,一個胖子當著我的面吹牛猜极,可吹牛的內(nèi)容都是我干的中姜。 我是一名探鬼主播,決...
    沈念sama閱讀 40,448評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼跟伏,長吁一口氣:“原來是場噩夢啊……” “哼丢胚!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起受扳,我...
    開封第一講書人閱讀 39,352評論 0 276
  • 序言:老撾萬榮一對情侶失蹤携龟,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后勘高,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體峡蟋,經(jīng)...
    沈念sama閱讀 45,834評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡浮定,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,992評論 3 338
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了层亿。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片桦卒。...
    茶點故事閱讀 40,133評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖匿又,靈堂內(nèi)的尸體忽然破棺而出方灾,到底是詐尸還是另有隱情,我是刑警寧澤碌更,帶...
    沈念sama閱讀 35,815評論 5 346
  • 正文 年R本政府宣布裕偿,位于F島的核電站,受9級特大地震影響痛单,放射性物質(zhì)發(fā)生泄漏嘿棘。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,477評論 3 331
  • 文/蒙蒙 一旭绒、第九天 我趴在偏房一處隱蔽的房頂上張望鸟妙。 院中可真熱鬧,春花似錦挥吵、人聲如沸重父。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,022評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽房午。三九已至,卻和暖如春丹允,著一層夾襖步出監(jiān)牢的瞬間郭厌,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,147評論 1 272
  • 我被黑心中介騙來泰國打工雕蔽, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留折柠,地道東北人。 一個月前我還...
    沈念sama閱讀 48,398評論 3 373
  • 正文 我出身青樓萎羔,卻偏偏與公主長得像液走,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子贾陷,可洞房花燭夜當晚...
    茶點故事閱讀 45,077評論 2 355

推薦閱讀更多精彩內(nèi)容

  • chrome擴展開發(fā)入門教程 最近在開發(fā)chrome插件缘眶,看到一篇非常適合入門的教程,特記錄一下 注:轉(zhuǎn)載 本文首...
    謝大見閱讀 6,433評論 1 25
  • Chrome擴展開發(fā) 標簽(空格分隔): Chrome擴展 1髓废、寫在前面 Chrome插件是一個用Web技術(shù)開發(fā)...
    記憶的時間差閱讀 6,033評論 0 15
  • 接上 關(guān)于HTML/HTML5(一)http://www.reibang.com/p/33fc7840c079 學...
    Amyyy_閱讀 791評論 0 4
  • 前端開發(fā)面試題 面試題目: 根據(jù)你的等級和職位的變化巷懈,入門級到專家級,廣度和深度都會有所增加慌洪。 題目類型: 理論知...
    怡寶丶閱讀 2,587評論 0 7
  • 寧嬰第一次看到陳亮的時候就喜歡上了他顶燕,每天晚上都會躲在被窩里欣賞偷拍他的照片凑保。 又是一天晚上,寧嬰正在意淫著陳...
    心照不宣的小魚閱讀 764評論 0 4