如何将JS与Wasm文件内容读取为变量？Chrome扩展开发疑问

嘿，这个问题做毕业论文的话肯定得搞清楚——我之前帮人做过类似的Chrome扩展，刚好能给你梳理清楚可行的方案：

浏览器的同源策略确实会给跨域资源读取带来限制，但Chrome扩展拥有特殊的权限体系，只要配置得当，不管是同域还是跨域的JS/WASM文件，都能读取内容并转成变量分析。

一、同域JS/WASM：直接读取毫无压力 #

如果资源和当前页面是同域的，两种简单方法就能拿到内容：

方法1：遍历页面DOM中的脚本标签 #

直接在content script里找到页面的<script>标签，提取src后用fetch获取内容：

// content.js 中的代码
document.querySelectorAll('script[src]').forEach(async (script) => {
  const resourceUrl = script.src;
  // 验证是否同域
  if (new URL(resourceUrl).origin === window.location.origin) {
    try {
      const response = await fetch(resourceUrl);
      let content;
      // 区分JS和WASM的读取方式
      if (resourceUrl.endsWith('.wasm')) {
        content = await response.arrayBuffer(); // WASM是二进制文件，用ArrayBuffer存储
      } else {
        content = await response.text();
      }
      // 现在content就是文件内容，可以做分析（比如检查特定字符串X）
      if (typeof content === 'string' && content.includes('X')) {
        console.log(`在同域文件${resourceUrl}中找到目标字符串！`);
      }
    } catch (err) {
      console.error(`读取同域资源失败：${err}`);
    }
  }
});

方法2：用webRequest API拦截请求 #

这种方法能捕获所有同域资源请求，包括动态加载的（比如通过import()加载的JS）：

// background.js 中的代码（Manifest V3）
chrome.webRequest.onCompleted.addListener(
  async (details) => {
    // 筛选JS/WASM文件
    if (details.url.endsWith('.js') || details.url.endsWith('.wasm')) {
      // 验证同域
      if (new URL(details.url).origin === new URL(details.initiator).origin) {
        const response = await fetch(details.url);
        const content = details.url.endsWith('.wasm') 
          ? await response.arrayBuffer() 
          : await response.text();
        
        // 这里可以对content做任意分析
        console.log(`捕获到同域资源：${details.url}`);
      }
    }
  },
  { urls: ["<all_urls>"] },
  ["responseBody"]
);

二、跨域JS/WASM：借助扩展权限突破限制 #

跨域资源的核心问题是浏览器的同源策略，但Chrome扩展可以通过配置权限绕过这个限制，步骤如下：

1. 先配置扩展权限 #

在manifest.json中添加host_permissions（允许访问目标跨域域名）和必要的权限：

{
  "manifest_version": 3,
  "name": "JS/WASM分析工具",
  "version": "1.0",
  "permissions": ["webRequest", "activeTab"],
  // 允许访问所有域名，或者指定具体域名比如"https://*.cdn.com/*"
  "host_permissions": ["<all_urls>"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "background": {
    "service_worker": "background.js"
  }
}

注意：Manifest V3是当前Chrome扩展的标准，尽量用这个版本开发。

2. 用webRequest API拦截跨域请求的响应 #

这是最可靠的方法，能捕获所有跨域的JS/WASM请求，包括动态加载的资源：

// background.js 中的代码
chrome.webRequest.onCompleted.addListener(
  async (details) => {
    // 只处理JS和WASM文件
    if (!details.url.endsWith('.js') && !details.url.endsWith('.wasm')) return;

    try {
      // 用扩展权限发起请求，不受页面同源策略限制
      const response = await fetch(details.url, {
        // 可选：带上页面的Referer，避免被服务器防盗链拦截
        headers: { "Referer": details.initiator }
      });

      let content;
      if (details.url.endsWith('.wasm')) {
        content = await response.arrayBuffer();
        // 如果需要分析WASM中的字符串，可以转成文本：
        // const textContent = new TextDecoder().decode(content);
      } else {
        content = await response.text();
      }

      // 执行你的分析逻辑，比如检查特定字符串X
      if (typeof content === 'string' && content.includes('X')) {
        console.log(`在跨域文件${details.url}中找到目标字符串！`);
        // 可以把结果发送给content script，在页面上展示
        chrome.tabs.sendMessage(details.tabId, {
          type: "TARGET_FOUND",
          url: details.url,
          content: content.slice(0, 100) // 发送部分内容示例
        });
      }
    } catch (err) {
      console.error(`读取跨域资源失败：${err}`);
    }
  },
  { urls: ["<all_urls>"] },
  ["responseBody"]
);

3. 注意事项 #

• 部分网站会设置CSP（内容安全策略），但扩展的请求不受页面CSP的限制，不用担心被拦截。
• 对于blob:或data:URL加载的资源，webRequest同样能捕获到，读取方式和普通URL一致。
• 如果遇到防盗链的资源，手动在fetch请求中添加Referer头（如上例）基本能解决问题。

三、极少数无法读取的场景 #

几乎所有公开的JS/WASM资源都能通过上述方法读取，但有两种极端情况可能拿不到内容：

• 资源服务器设置了非常严格的IP白名单，只允许特定IP访问；
• 资源是通过加密协议传输且需要特殊凭证（比如客户端证书），这种情况扩展也无法绕过。

不过对于毕业论文的场景来说，这些极端情况大概率不会遇到，上述方案足够覆盖绝大多数需求。

内容的提问来源于stack exchange，提问作者Micheal Toru