大家好,我前夕.最近,我分享了個人開發的微信讀書網頁插件,這個小項目意外收穫了眾多用戶的喜愛. 這讓我意識到技術作品能跨越專業界限,幫助到有需要的人.受此激勵,我決定對插件進行全面重構與優化 ...
背景
20天前, 發佈了一篇文章講述我自己寫的瀏覽器插件, 幫助自己在閱讀微信讀書網頁端的時候解放雙手的故事. 主要核心點就是自動閱讀. 本次發佈做了很多更新, 先睹為快!
當時我就是寫著玩的, 一個非常小眾場景的小眾需求, 卻沒有想到使用的人還挺多的. 期間有2個人讓我印象非常深刻.
這個世界不只有程式員
路人甲
一個類似花開富貴頭像的老哥+了我好友, 說是無法安裝插件. 於是就有了以下對話.
到這我真愣住了. 這是啥意思? 讓我寫個微信讀書app嗎? 於是我就追問
原來他不懂技術啊. 我以為是同行呢. 隨後我就遇到了第二個路人
路人乙
我發佈插件沒幾天就有人到了項目倉庫給我提issue
都會提issue了, 這總是同行了吧?
居然又不是. 我才意識到, 我隨手寫的插件居然能幫助到很多外行. 說實話, 這時候我有點成就感了. 我相信大家一定經歷過這個心理狀態, 就是用自己的技術幫別人解決了很剛需的痛點.
大刀闊斧重構
既然那麼久多需要這款插件, 那我可得好好打磨打磨了.
從龍珠換成高科技的機器人
Before
之前是一顆龍珠, 滑鼠hover會亮一下. 這裡用龍珠沒有任何含義, 單純實在不知道該放什麼.
After
這次我換成了科技感十足的機器人, 更有'助手'的感覺.
枚舉像素替換為百分比調整
Before
對於頁面寬度設置, 枚舉了幾個常用的尺寸. 而這種方式有個弊端, 就是在大顯示器上, 2000px也許是最大值了, 而對於筆記本尺寸2000px則可能出現了滾軸.
After
百分比的設置更適合不同的顯示器設備. 當你設置為百分百時, 任意尺寸的設備都是滿屏的體驗.
適配雙欄
這個就沒有Before了, 因為我開發的時候還沒有這玩意. 前不久官方纔推出的雙欄模式
所謂雙欄, 則是頁面不再以滾動的方式閱讀, 而是和紙質書籍一樣翻頁閱讀. 那麼就不存在自動閱讀的場景了, 只有翻頁. 為此我做了兩件事情.
- 雙欄模式也支持設置屏占比. 也就是百分比的設置也對雙欄模式生效.
- 翻頁不只是方向鍵可用, 滾軸、wasd都可使用.
修複海量bug
因個人水平和精力有限, 無法覆蓋所有測試場景. 比如在有些書籍下, 滾軸無法使用等嚴重問題. 這些問題在這次大重構中都得到了充分的驗證與修複. 如果還有什麼問題, 歡迎留言或者聯繫我.
獨一無二的logo
在商店輸入"微信讀書助手"關鍵詞, 能查到一堆差不多logo的
因為這就是微信讀書官方的logo. 本來也沒啥, 但是當各個插件都開始使用這個logo的時候, 就有點真假美猴王的味道了.
我選擇用AI生成了一個類似的logo, 插件名字上也帶上了我自己的標識.
上架更多商店
在一開始我只上架了火狐和谷歌. 谷歌不多說, 標配產品. 而火狐並不是因為有多好用, 而是我這麼多年一直習慣除了開發以外的場景都用火狐. 其他瀏覽器商店, 我壓根就沒考慮.
而普通人, 用chrome的比例其實並不高, 360、edge、safari等, 市占率並不低. 因為普通人並不知道什麼叫瀏覽器相容, 只知道電腦里有啥瀏覽器就用啥. 我的這款產品並不是針對程式員的, 為了幫助到更多的人, 我開始上架360、edge等. 但是不得不說, 審核是真的慢, 不同的廠商有不同的慢法.
火狐瀏覽器
每個版本我都會上架. 但是都0.0.8了, 現在上架的版本中最新版卻是0.0.4
360瀏覽器
審核中, 一個版本也沒能上線
Edge瀏覽器
審核中, 也是一個版本都沒能上線
谷歌瀏覽器
還真別說, 谷歌就是谷歌, 審核的真挺快的.
非常棘手的bug
在之前的版本中存在一個非常複雜的bug, 在極個別情況下, 滾動滾軸時頁面反覆跳躍. 這個bug的根本原因是微信讀書存在一個特殊的場景, 在後續我會專門開篇講述這個bug的前因後果以及為什麼無法修複.
商店地址
- Chrome: 微信讀書助手 - 前夕
- Firefox: 微信讀書助手 - 前夕
- 360: 審核中
- Edge: 審核中
我是前夕, 專註於前端和成長. 公眾號: 前夕小課堂
轉載需註明出處
