演示視頻發(fā)布地址：【全網(wǎng)首發(fā)！原創(chuàng)右鍵識別二維碼瀏覽器插件-嗶哩嗶哩】 https://b23.tv/t0OnUS4

大家好，今天來分享一個自己做的可以在瀏覽器中右鍵識別二維碼的插件

0.注意事項(xiàng)

up主首次編寫瀏覽器插件，還有很多不足

本插件識別過程全在本地進(jìn)行，不會上傳云端，請放心使用

但這個識別工具也不能識別所有的二維碼

如果二維碼美化過也有可能導(dǎo)致識別結(jié)果出現(xiàn)一些錯誤字符，還請注意

1.背景介紹

一直想有一個PC端方便的二維碼掃描工具

雖然可以用一款叫QR_code的軟件，但感覺還不夠方便

想要那種可以在瀏覽器沖浪時隨時可以掃描的工具

但是找了找好像沒有這種工具，生成二維碼的工具倒是很多

所以就自己摸索著寫了一個瀏覽器插件滿足這個需求

2.插件安裝

下載地址我會放到簡介和評論區(qū)

用gitee下載會比github稍快一些：

● gitee：https://gitee.com/ithundersword/chrome_qrcode_decode_extension/releases/download/1.0.0/chrome_qrcode_decode.zip

● github：https://github.com/thunder-sword/chrome_qrcode_decode_extension/files/9945309/chrome_qrcode_decode.zip

下載好之后進(jìn)入chrome的擴(kuò)展管理

然后打開右上角的開發(fā)者模式，一定要打開不然無法安裝

打開之后刷新，然后將下載好的壓縮包拖入chrome即可安裝成功

此時右上角的插件列表便已加入這個插件，說明安裝成功

此時可以將那個壓縮包刪除掉了

3.演示效果

然后我們來看看效果

都知道chrome可以直接將網(wǎng)頁網(wǎng)址直接生成二維碼來分享，但是卻沒有掃描工具

我們來生成一個測試一下

生成好之后對這個圖片右鍵選中，可以發(fā)現(xiàn)菜單欄中多了一個“識別二維碼”的選項(xiàng)

識別成功時則會跳出彈出，這里成功了

此插件也支持中文，但是有些變形二維碼會識別失敗

還有些二維碼可能會出現(xiàn)一些錯誤字符

這是我技術(shù)力的問題，遇到這類二維碼還是用手機(jī)微信掃吧

我們隨便搜一些二維碼來測試一下

成功的概率還是有些感人的，能成功掃描的基本上還是方方正正沒有變化的那些二維碼

4.本地掃描

除此之外，點(diǎn)擊右上角的插件圖標(biāo)便可支持本地掃描

掃描結(jié)果如果有鏈接則可直接點(diǎn)擊

這里順便再測試一下中文掃描，之前生成了一個二維碼

識別成功了

當(dāng)然你也可以把它拖入瀏覽器中打開后再右鍵菜單掃描

這些操作都是可以的

5.結(jié)語

那么以上便是本視頻的全部內(nèi)容了

感謝你能夠看到現(xiàn)在

這期視頻真的耗費(fèi)了我很多精力

如果你覺得還不錯，請務(wù)必點(diǎn)個贊支持一下這個快要禿頭了的up主

如果你喜歡我的視頻

歡迎點(diǎn)贊和關(guān)注我

之后會給大家?guī)砀嘤腥び杏玫膬?nèi)容

拜拜~

6.補(bǔ)充

一些說明和護(hù)盾（doge）：

（1）技術(shù)相關(guān)說明：

1. 此插件對于canvas渲染的img還沒什么辦法，因?yàn)閏hrome的api不能直接識別出canvas，type為image時不包含它，而用all時我也沒找到獲取到element實(shí)體的方法，所以我不會……如果有大佬能指導(dǎo)下的話非常歡迎；

2. 代碼核心部分進(jìn)行了混淆，以免引起一些不必要的麻煩，但調(diào)用部分沒有處理，可以隨意diy。