【Chrome插件】Chrome插件修改教程

目錄

• 前述
• 准備工作
  • 需要使用的工具
  • 插件安裝與提取
    • 從谷歌商店提取
      • 下載&安裝
      • 提取插件安裝包
    • 直接下載crx
    • 注意事項！！！
• 修改--解鎖高級功能
  • 分析區別
  • 定位判斷代碼及修改
  • 測試是否成功
• 修改--漢化
  • 分類
  • 例子一：漢化提示語並自定義
  • 例子二：漢化部分設置
  • 例子三：重復部分漢化
  • 其他漢化例子展示
• 修改--布局
  • 給作者填坑
  • 強迫症患者
  • 其他修改（瞎改）
• 修改--雜項
• 修改--動態調試
  • popup（彈出頁面）
  • 植入到頁面的js
• 出現錯誤的處理方法
• 打包
• 參考資料
• 修改樣本

前述

1. 本文系本人於疫情期間在2020-7-8 17:50 發布於《吾愛破解》論壇【點我查看】，
   於本賬號為同一作者，今轉載整合與本博客

2. 教程所示僅為方法，本文所述版本存在一個嚴重bug，
   不適合用於日常使用，
   本人於2020年10月12日於吾愛破解論壇【點我查看】更新版本
   當時最新版已混淆，關鍵詞和流程均有大改動，
   需要動態調試（本文中有教程）
   可以下載比較

3. 本文僅為學習研究插件的修改與改善提供思路與方法演示，請勿用於非法用途！

准備工作

因為很多人需要，而且沒有在吾i 破解 論壇都沒有找到
那就我來拋磚引玉吧。

需要使用的工具

1. 腦子。

當然不是說大腦，是思維。
舉個例子吧，之前有人問我，為什么把支付失敗的字符串改成支付成功后，
只彈出成功，沒有效果。。。這個問題比較深奧，我無法解釋。（當時我就說我不會。）

2. 正確的上網方式（非必須）

你改插件，總不能改二手的吧。。。

3. js，HTML(H5)，CSS基礎(*)

這些很重要！巧婦難為無米之炊，萬丈高樓平地起，離不開。。。
吾愛。
咳咳

4. 習慣用的編輯器。

一個好的編輯器可以讓你事半功倍
當然理論上notepad也成，就是太費眼。
這里我推薦的兩款是notepad++和sublime
咳咳，至於前者，本來挺喜歡的（只對軟件本身），后來事情發生了就果斷卸載。。。
如果你確定滿足並且想一起研究的話，就繼續吧。

正式開始。

插件安裝與提取

從谷歌商店提取

因為我是Chrome的用戶（曾經的某6某忠實粉絲hhh勸退）
理論上Chromium內核的瀏覽器插件修改起來應該都差不多吧。

目標：Octotree
官網：octotree.io
Chrome插件下載地址（谷歌商店）：鏈接太長。。點我訪問

下載&安裝

谷歌商店一鍵安裝。

安裝

安裝完成（感覺這幾張都是廢圖。。。）

提取插件安裝包

chrome://extensions/管理頁面中，查看剛才安裝后的插件的ID

如圖所示，本例的ID是bkhaagjahfmjljalopjnoealnfndnagc（只需要看首尾就足夠了。）

好吧，我不知道Chrome下載的crx文件。。。放在哪里（可能是安裝后自動刪掉了？）
有知道的朋友可以回復告知一下。
訪問chrome://version

找到個人資料路徑，計算機里打開路徑。
插件所在文件夾在Chrome資料文件夾下的Extensions文件夾

比如本例：
看首幾位為：bkha

找到插件文件夾了。
打開該文件夾，

里面這個版本號所在的文件夾才是真正的插件文件夾（插件是需要打包才能成為crx文件的，本質上就是有經過簽名壓縮文件，后面會說怎么簽名打包）

復制這個版本號文件夾出來。

直接下載crx

有些瀏覽器或某些插件可以直接下載到crx或未封裝的插件

下載后直接解壓就好。

注意事項！！！

注意！和爆破exe一樣！最重要的就是勤備份！
注意！和爆破exe一樣！最重要的就是勤備份！
注意！和爆破exe一樣！最重要的就是勤備份！
不然一失足成千古恨。。。

修改--解鎖高級功能

獲取到目標文件的解壓文件就可以開始着手了
推薦、本文參考的文件在文末的列表里

分析區別

破解功能自然是因為功能上有差異。找到這個差異。
比如

試用會員過期提示升級的提示（源碼里稱之為廣告）

或是

剩余會員試用時間的顯示

亦或是

僅會員可以使用的提示。
當然還有很多情況，比如只有會員才會顯示的按鈕（官方示意圖可能會有關鍵詞）

定位判斷代碼及修改

推薦notepad++和sublime之一的原因就是他們支持文件夾中搜索關鍵詞（好吧，everything好像也可以，不過那不是編輯器。。）

例如試用會員還剩多長時間過期的提示
關鍵詞：remained，文件夾內搜索，發現只有content.js里有。

打開繼續搜索

發現只有一處（巧了，看一下前后文，應該是的day(s)也有了）
向前找判斷
這里因為打包的時候壓縮了，建議在新窗口美化一下（當然也可以直接修改。或是直接保存美化后的代碼。個人喜歡原汁原味）
當然有些lj網站美化后的代碼會出現問題。。比如

這樣。
因為瞎換行，把人家的字符串給拆了。。。

格式化后看起來就很（相對）清爽了。
一個方法，里面是判斷。
根據判斷找到
this._state === t.SUBSCRIPTION_OK
此處其實可以使用全局替換，把this._state === t.SUBSCRIPTION_OK改成true。
此處選擇方法分析，盡可能少改動。
搜索調用（這個沒有混淆，很方便找。如果混淆了一般都會動態調試，下面有動態調試的方法，可以參考一下）

這里一樣，因為很輕松就能知道SUBSCRIPTION_OK、SUBSCRIPTION_EXPIRED、TRIAL_EXPIRED是什么意思，直接改就行了。如果混淆了，需要動態調試。

搜索后得知_getTrialRemainingDays只有一處調用，因此直接賦值就好，不會有問題。

const a = this._getTrialRemainingDays(_);

改成

const a = 0;//此處改成0（試用剩余0天,試用期間有購買Pro的廣告）

接着是改this._state，因為多次調用該代碼，因此溯源。找this._state賦值的位置。
就在上面一行（格式化后的）

async _verifySubscription(e) {
const i = e || await extStore.get(a),
    o = this._decodeTokenPayload(i);
let s = t.UNAUTHENTICATED;
if (o) {
    const { expiredAt: e, subscriptionStatus: a, trialDays: i, createdAt: n } = o;
    if (Date.now() < e)
        if (a) switch (a) {
            case "EXPIRED":
                s = t.SUBSCRIPTION_EXPIRED;
                break;
            case "ACTIVE":
            case "CANCELLED":
                s = t.SUBSCRIPTION_OK
        } else s = Math.ceil((Date.now() - n) / 864e5) <= i ? t.SUBSCRIPTION_OK : t.TRIAL_EXPIRED
}
return s === t.UNAUTHENTICATED && await extStore.remove(a), s
}

老規矩，可以把判斷改掉。
我這里把除了SUBSCRIPTION_OK的賦值全都改了。

async _verifySubscription(e) {
const i = e || await extStore.get(a),
    o = this._decodeTokenPayload(i);
let s = t.UNAUTHENTICATED;
if (o) {
    const { expiredAt: e, subscriptionStatus: a, trialDays: i, createdAt: n } = o;
    if (Date.now() < e)
        if (a) switch (a) {
            case "EXPIRED"://把下面兩行過期的跳轉刪掉
            case "ACTIVE":
            case "CANCELLED":
                s = t.SUBSCRIPTION_OK
        } else s = Math.ceil((Date.now() - n) / 864e5) <= i ? t.SUBSCRIPTION_OK : t.SUBSCRIPTION_OK//這里把判斷前后改成一樣的就成
}
return s === t.UNAUTHENTICATED && await extStore.remove(a), s
}

當然全都刪掉然后改成

return t.SUBSCRIPTION_OK

也是可以的。
我個人習慣基於原代碼修改。

測試是否成功

把上面的代碼在原文件里對應修改。
保存后點擊

重新加載插件就修改完成了。

這里是成功破解了高級功能。
如果不成功返回繼續
如果報錯見出現錯誤的處理方法

修改--漢化

分類

上一次修改的時候對代碼進行了漢化，這次也不例外。
漢化的情況有多重。

1. 語言是寫死的（類似這次，是只有單一語言的）
2. 有多重語言包可以選擇，就是沒有中國的（差評）
3. 有中文的選項，但是只有部分是漢語，而且還有好多是錯的。

一般來說，
1是因為沒做多語言配置，在js里直接修改就好
2相對來說好改一點，找到語言包，修改就行（一般是json文件或是js內的json，且多為谷歌語言包，在插件目錄下的_locales文件夾下，有對應語言的語言包）
3一般和2情況類似，補充翻譯即可。（推薦BCompare 4，對比很方便，其他某插件的示意圖如下圖）

本插件是最不方便修改的寫死在js里的類型。一般需要所見即需譯，就是看到需要翻譯的，就去翻譯，而且翻譯的過程最好從特征詞句到一般詞語。
有強烈特征的一句話或是一個不常見的單詞先翻譯。比如settings，一般只要有設置的插件里會反復出現。這就不好定位了。

例子一：漢化提示語並自定義

舉個例子

第一次安裝完后打開會有如下提示，一句話，就很方便搜索到

那就直接修改好了。注意不要修改到關鍵詞，或是其他代碼，或是單雙引號，亦或是%1、$1、{1}這類的替換字符。

翻譯替換進去就行，這里我選擇谷歌翻譯，可能是日常習慣用谷歌搜索吧，而且比較喜歡Material Design風格吧。

雖然都是簡單的句子，我還是選擇機譯+校准。因為打字沒有復制粘貼快（所以碼教程是最痛苦的，不接受反駁）

當然，你也可以隨手扔一個“版權”之類的。。。雖然破解版只是技術的產物，是沒有版權可驗的。

修改完：

效果圖：

例子二：漢化部分設置

再舉個例子

因為我剛才卸載了，提示我要登錄。
改之，老規矩，搜索上面的關鍵詞unlock:

搜索后發現並沒有解鎖的列表，在${s}和${n}里。

向上翻一下，找到了該列表。

既然是破解版，那就可以隨心所欲的翻譯了。。。比如我是這么做的

對應的代碼部分：

例子三：重復部分漢化

漢化Settings設置的標題部分。有很多搜索項

可以

1. 勾選Aa區分大小寫。

2. 使用正則表達式，排除前后沒有的字符比如使用

   \WSettings\W
   

   匹配前后都是非字母和數字的Settings
   

   (這9處除了一個夜間模式匹配字符的正則表達式，其余的都是要漢化的)

3. 審查元素，找到前后文（包括類名、ID）
   比如
   

   很方便就可以精准定位到漢化的位置。

   

其他漢化例子展示

請下載插件（同時提供了修改后的和未修改的版本）

修改--布局

布局一般修改是CSS，JS甚至HTML，因此要都有所了解。

給作者填坑

老bug了。。無法滾動的bug修復了，但是界面還是不正常（左側多余，右側溢出）

在Chrome的控制台里一通摸索(瞎改)，

一般為CSS或CLASS的修改居多，需要有HTML、CSS等基礎

發現是

把transform和left屬性強制刪除，設置就行（unset）
在下面的class里找到設置右側屬性的類（本例中見下圖）

因為是!important強制屬性，所以只需要改一個就行。
修改部分如圖所示：

注：

1. 改法不唯一，只要能實現目的，且簡潔方便快捷實用，就是好方法。
2. 本方法因為沒有使用transform屬性，移動動畫會丟失。
   不想加animation動畫，又沒想到更好的方法。。。
   湊活用吧，反正主要不是看動畫的。

強迫症患者

tip竟然出現在左邊。。。
好難受看我改到下（上）面
分析class，tooltipped-w是左邊顯示，因此猜測w是指西邊。

觀察到上面Git部分有想要的樣式，
同理，炮制出tooltipped-sw（西南），改動前后的對比

注：Chrome在標簽上右鍵Force State可以設置當前狀態

改完代碼發現在右側的時候顯示正常，但是左側的時候就變了。
查看代碼發現因為有頁面方向的變換，對class進行了動態改變。
改js代碼吧。給每一個加上單獨的類（這里我使用的是tao）

效果（注：圖經過處理，為了方便看效果，部分間距增加了）

左右均正常。

其他修改（瞎改）

咳咳，反正html、css或js唄。
看着改好了。。。

修改--雜項

還有一些亂七八糟的東西可以修改，具體可以參考附錄中的第二個教程
比如右鍵，第一個是官網。
可以點擊后彈一個咱們的唔愛論壇官網，改改作者、簡介啥的

注！上述截圖因為方便說名，僅把更新鏈接刪掉了。真正操作的時候請刪除

或是卸載后再彈一下5愛的官網（下圖第一個框）
當然也可以像我上個版本一樣，第一次安裝的時候彈一下。

效果：

第一次安裝有彈窗：

同時點擊確定后有吾愛網站彈出

修改--動態調試

動態調試是最方便找到出問題的位置以及原因的辦法（雖然不一定能想到怎么解決。比如下圖）。

亦或是代碼被混淆的很厲害，又抽取了結構，平流抽象化了（AST）

注：AST又被稱為js預編譯，可以參考這里的介紹

還是以Octotree為例
假如我故意（一不小心）出了一個未知錯誤。

插件的錯誤也十分“委婉”，而且因為壓縮了，不方便看錯誤位置。
動態調試吧。
這里要分情況查看。

popup（彈出頁面）

就是點擊插件的按鈕，會有窗口彈出的。類似於下圖的ADblock插件

插件上右鍵-審查彈出窗口-(格式化)下斷點-重新加載

注：重新加載可以在console里輸入

location.reload(true)

重新加載。

植入到頁面的js

可以直接在console-Content Script-頁面的位置（如果有iframe的話）-插件名中格式化，下斷點等等。

注：推薦一個我剛發現的功能（可能有朋友早就知道了了吧。。）
在上圖藍色箭頭所示的方框的位置，是異常前下斷點，
系統會在出現異常並且沒有被捕捉的地方，在報錯前斷下。堆棧，數據都保存着，而且有報錯的信息，可以方便調試。

出現錯誤的處理方法

最簡單的辦法就是：

一直撤銷到不報錯為止，然后重做。
如果不行的話，請退回到備份版本。

如果重復好幾次，還是感覺沒問題，就需要動態調試了（參上文）。

打包

該改的都改完了，該填的坑也都填好了。
需要打包發布了（如果有賬號的話）
點擊上方的“打包擴展程序”，輸入擴展所在的文件夾
點擊打包擴展程序即可。
至於私鑰如果你不是第一次打包，上一次打包后會自動生成一個私鑰。你可以用這個私鑰重新打包（本質就類似安卓的簽名）

補充：

1. 每個私鑰都標志這一個獨立的插件，如果不同的插件用同一個私鑰簽名，會導致覆蓋。（慘痛教訓）
2. 因為Chrome的特性，無法直接安裝沒有在谷歌商店中發行的插件（除非簽名經過官方許可，並且有第三方進行安裝，比如下面的區別示意圖）
   

如果是分享zip版未打包的插件，推薦先打包后再重命名。
這樣可以保證插件數據不會丟失
更新的時候，因為有key系統會認為是在更新插件，不會導致多個版本共存
（5555我才知道，所以現在。。）

新版本舊版本共存了。。。也就是說舊版本的設置需要手動轉移到新版本（氣哭）

參考資料

有問題或是遇到奇怪的API可以查閱。

內容	鏈接	作用
GitHub翻譯版	點我	咳咳，不一定是最新的。 至少比英文原版方便吧
某網站分享的經驗和教程	點我	偏實戰吧，比較詳細 （雖然是轉的，但是原作者圖片都沒了）
圖靈的圖書版	點我	emmm沒啥特別的
官方教程	點我	最權威的官方教程 （純英語、正確的上網方式警告）
360漢化版(超級舊的版本)	點我	舊版本，很多圖都掛了

修改樣本

原crx

Chrome插件下載地址（谷歌商店）：
鏈接太長。。點我訪問

下載：

雲盤：
189雲盤：

https://cloud.189.cn/t/r2MJ3yaMVV3e
訪問碼：03ts
【原包】即為未修改版本，后綴改成zip即可
【樣品】即為修改后的版本，后綴改成zip即可
【教程】為PDF教程，后綴改成pdf即可
【crx】為修改打包后的crx樣本，后綴改成crx即可

藍奏雲：

樣品：
https://www.lanzoux.com/ihR3eef0yyh
密碼:ezpf

原包（zip）
https://www.lanzoux.com/itEFfef0z3c
密碼:b0ip

本教程PDF
https://www.lanzoux.com/iOkeHef0zti
密碼:c0cb

CRX版樣品
https://www.lanzoux.com/iAl1fef1c8f
密碼:hhy6

小站：
樣品：Octotree_cracked by 吾愛破解：濤之雨V5.2.1_0.zip
CRX版樣品：Octotree_cracked by 吾愛破解：濤之雨V5.2.1.crx
原版zip：Octotree
本教程PDF（最后的下載部分有改動，未同步）download.pdf