JS `Chrome Extension` `CRX` 文件解包与代码分析

各位观众老爷，晚上好！我是今晚的主讲人，代号“代码挖掘机”，今天咱们聊聊Chrome扩展这个小玩意儿，以及怎么把它扒个精光，看看里面都藏着些什么宝贝。

开场白：Chrome扩展，不止是快捷方式

Chrome扩展，英文名叫Chrome Extension，听起来好像很高大上，但说白了，它就是个能让你的浏览器变得更强大的小插件。它可以帮你拦截广告，管理密码，甚至还能在你浏览网页的时候偷偷摸摸地执行一些“不可描述”的任务。

当然，咱们今天不是来讨论这些“不可描述”的任务的，咱们是来学习怎么解剖它，看看它到底是怎么实现这些功能的。

第一部分：CRX文件，扩展的“身份证”

Chrome扩展的文件格式是.crx。你可以把它想象成一个压缩包，里面装着扩展的所有代码、图片、脚本等等。就像一个包裹，里面装满了惊喜（或者惊吓）。

1.1 获取CRX文件

获取CRX文件的方法有很多，最常见的就是从Chrome网上应用商店下载。但是，直接下载下来的并不是.crx文件，而是一个Chrome安装链接。我们需要一些小技巧才能拿到真正的.crx文件。

方法一：开发者模式
1. 在Chrome浏览器中，输入chrome://extensions/并回车，进入扩展程序管理页面。
2. 打开右上角的“开发者模式”开关。
3. 找到你想要下载的扩展，复制它的ID。
4. 构建下载链接：https://clients2.google.com/service/update2/crx?response=redirect&os=win&arch=x64&nacl_arch=x86-64&prodversion=9999.0.9999.0&prodchannel=unknown&prodextralifecycle=AdBlock&x=id%3D[扩展ID]%26uc (将[扩展ID]替换为实际的扩展ID)。
5. 将构建好的链接粘贴到浏览器地址栏并回车，即可下载.crx文件。
方法二：使用扩展程序

有一些Chrome扩展程序专门用来下载其他扩展，比如“CRX Download”。安装这类扩展后，就可以直接从Chrome网上应用商店下载.crx文件了。
方法三：直接从网站下载

有些扩展程序的开发者会直接在其网站上提供.crx文件下载。

1.2 CRX文件结构

一个.crx文件，其实就是一个被特殊处理过的ZIP压缩包。它的结构大致如下：

结构	描述
CRX Header	CRX文件的头部信息，用于标识文件类型。
Public Key	扩展的公钥，用于验证签名。
Signature	扩展的签名，用于验证文件是否被篡改。
ZIP Archive	包含了扩展的所有文件。

第二部分：解包CRX，一探究竟

既然.crx文件本质上是个ZIP包，那我们就可以直接用解压软件（如7-Zip、WinRAR等）把它解压出来。

2.1 解压CRX文件

将.crx文件重命名为.zip文件（例如，my_extension.crx改为my_extension.zip）。
使用解压软件打开.zip文件，并将其解压到你喜欢的目录下。

解压完成后，你会看到一堆文件，这些就是扩展的所有代码和资源了。

2.2 扩展文件结构解析

解压后的文件通常包含以下内容：

manifest.json：这是扩展的“身份证”，描述了扩展的名称、版本、权限、脚本、图标等等信息。
JavaScript文件（.js）：这是扩展的核心代码，实现了扩展的各种功能。
HTML文件（.html）：这是扩展的界面，比如弹出窗口、选项页面等等。
CSS文件（.css）：这是扩展的样式表，用于美化界面。
图片文件（.png、.jpg等）：这是扩展的图标和资源。

第三部分：代码分析，挖掘“宝藏”

解包之后，我们就可以开始分析扩展的代码了。最重要的文件就是manifest.json和JavaScript文件。

3.1 manifest.json解析

manifest.json文件是一个JSON格式的文件，它定义了扩展的所有元数据。让我们来看一个简单的例子：

{
  "manifest_version": 3,
  "name": "My Awesome Extension",
  "version": "1.0",
  "description": "This is a simple Chrome extension.",
  "permissions": [
    "activeTab",
    "storage"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  }
}

manifest_version: 指定Manifest文件的版本，目前推荐使用3。
name: 扩展的名称，会在Chrome网上应用商店和扩展程序管理页面显示。
version: 扩展的版本号。
description: 扩展的描述，会在Chrome网上应用商店显示。
permissions: 扩展需要的权限。常见的权限包括：
- activeTab: 允许扩展访问当前活动的标签页。
- storage: 允许扩展使用Chrome的存储API来保存数据。
- cookies: 允许扩展访问和修改cookie。
- tabs: 允许扩展访问和管理标签页。
- webRequest 和 webRequestBlocking: 允许扩展拦截和修改网络请求。
background: 定义扩展的后台脚本。service_worker 指向一个 JavaScript 文件，该文件会在后台运行，负责处理扩展的事件和逻辑。
action: 定义扩展的图标和弹出窗口。
- default_popup: 指定点击扩展图标时显示的HTML文件。
- default_icon: 指定扩展图标的路径。

3.2 JavaScript代码分析

JavaScript代码是扩展的核心，它实现了扩展的各种功能。分析JavaScript代码可以帮助我们了解扩展的工作原理。

background.js (Service Worker)
```
chrome.runtime.onInstalled.addListener(() => {
  console.log("Extension installed!");
});

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: () => {
      alert("Hello from my extension!");
    }
  });
});
```
这段代码是一个简单的后台脚本。
- chrome.runtime.onInstalled.addListener(): 在扩展安装后执行的回调函数。
- chrome.action.onClicked.addListener(): 在用户点击扩展图标时执行的回调函数。
- chrome.scripting.executeScript(): 在指定的标签页中执行JavaScript代码。

popup.html

<!DOCTYPE html>
<html>
<head>
  <title>My Popup</title>
  <style>
    body {
      width: 200px;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>Hello from Popup!</h1>
  <button id="myButton">Click Me</button>
  <script src="popup.js"></script>
</body>
</html>

这是一个简单的弹出窗口。

<h1>Hello from Popup!</h1>: 显示一段文字。
<button id="myButton">Click Me</button>: 一个按钮。
<script src="popup.js"></script>: 引入JavaScript文件。

popup.js

document.getElementById("myButton").addEventListener("click", () => {
  alert("Button clicked!");
});

这段代码为弹出窗口中的按钮添加了点击事件监听器。

3.3 调试扩展程序

Chrome 提供了强大的开发者工具来调试扩展程序。

打开 chrome://extensions/ 页面。
确保 “开发者模式” 已启用。
找到你的扩展程序，点击 “详细信息”。
在 “详细信息” 页面中，你可以查看扩展程序的 ID、权限等信息。
点击 “背景页” 链接，打开扩展程序的后台页面。
在后台页面中，你可以使用开发者工具来调试扩展程序的 JavaScript 代码。

第四部分：安全分析，防患于未然

分析Chrome扩展的代码不仅仅是为了学习，更重要的是为了安全。一些恶意扩展可能会窃取你的个人信息，篡改你的网页内容，甚至控制你的浏览器。

4.1 关注权限

在安装扩展之前，一定要仔细查看扩展需要的权限。如果一个扩展需要访问你的所有网页数据，而它的功能仅仅是一个简单的计算器，那就要小心了。

4.2 代码审计

对于一些安全性要求较高的场景，可以对扩展的代码进行审计，查找潜在的安全漏洞。例如，是否存在跨站脚本攻击（XSS）、跨站请求伪造（CSRF）等问题。

4.3 常见安全风险

XSS (Cross-Site Scripting): 如果扩展程序没有正确地过滤用户输入，可能会导致 XSS 漏洞。攻击者可以通过 XSS 漏洞在你的网页上执行恶意 JavaScript 代码。
CSRF (Cross-Site Request Forgery): 如果扩展程序没有正确地验证请求的来源，可能会导致 CSRF 漏洞。攻击者可以通过 CSRF 漏洞冒充你执行一些操作。
数据泄露: 扩展程序可能会不小心泄露你的个人信息，例如用户名、密码、Cookie 等。
恶意代码: 一些扩展程序可能包含恶意代码，例如广告软件、间谍软件等。

第五部分：实战演练，破解一个简单的扩展

为了让大家更好地理解，我们来破解一个简单的扩展，看看它是如何工作的。

5.1 目标扩展

我们选择一个名为“Page Color Changer”的扩展，它的功能是改变网页的背景颜色。

5.2 解包

首先，我们按照前面的步骤，下载并解包Page Color Changer的.crx文件。

5.3 分析manifest.json

{
  "manifest_version": 3,
  "name": "Page Color Changer",
  "version": "1.0",
  "description": "Changes the background color of the current page.",
  "permissions": [
    "activeTab",
    "scripting",
    "storage"
  ],
  "action": {
    "default_popup": "popup.html"
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

可以看到，这个扩展需要activeTab、scripting和storage权限。

5.4 分析popup.html

<!DOCTYPE html>
<html>
<head>
  <title>Color Changer</title>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <h1>Change Background Color</h1>
  <input type="color" id="colorPicker" value="#ffffff">
  <button id="changeColor">Change</button>
  <script src="popup.js"></script>
</body>
</html>

这个HTML文件包含一个颜色选择器和一个按钮。

5.5 分析popup.js

document.getElementById("changeColor").addEventListener("click", () => {
  const color = document.getElementById("colorPicker").value;

  chrome.scripting.executeScript({
    target: { tabId: chrome.tabs.getCurrent().id },
    function: (color) => {
      document.body.style.backgroundColor = color;
    },
    args: [color]
  });

  chrome.storage.sync.set({ color: color });
});

chrome.storage.sync.get("color", (data) => {
  if (data.color) {
    document.getElementById("colorPicker").value = data.color;
  }
});

这段JavaScript代码实现了以下功能：

当用户点击“Change”按钮时，获取颜色选择器的值。
使用chrome.scripting.executeScript()在当前标签页中执行JavaScript代码，改变背景颜色。
使用chrome.storage.sync.set()将颜色保存到Chrome存储中。
在页面加载时，从Chrome存储中读取颜色，并设置颜色选择器的值。

5.6 分析总结

通过分析，我们可以知道这个扩展的工作原理：

用户在弹出窗口中选择颜色。
扩展程序将颜色发送到当前标签页。
当前标签页的背景颜色被改变。
颜色被保存到Chrome存储中，以便下次使用。

第六部分：总结与展望

今天，我们一起学习了Chrome扩展的解包与代码分析。从获取.crx文件，到解压文件，再到分析manifest.json和JavaScript代码，我们一步步地揭开了Chrome扩展的神秘面纱。

Chrome扩展是一个强大的工具，它可以帮助我们定制浏览器，提高工作效率。但是，我们也需要注意安全风险，选择可信的扩展，并定期检查已安装的扩展。

未来，Chrome扩展将会更加智能化、个性化，也会更加注重安全和隐私保护。希望今天的分享能够帮助大家更好地了解Chrome扩展，并能够开发出更加优秀、安全的扩展程序。

感谢大家的收听！我是代码挖掘机，下次再见！

发表回复 取消回复

发表回复取消回复