Google Chrome 扩展程序中的网页抓取（JavaScript + Chrome API）

Question

使用 JavaScript 和其他可用技术从 Google Chrome 扩展程序中执行当前未打开的选项卡的网页抓取的最佳选项是什么。 也接受其他 JavaScript 库。

重要的是屏蔽抓取，使其表现得像正常的网络请求。没有 AJAX 或 XMLHttpRequest 的指示，例如 X-Requested-With: XMLHttpRequest

 或 

Origin

。

抓取的内容必须可以从 JavaScript 访问，以便在扩展程序中进行进一步操作和呈现，最有可能作为字符串。

任何 WebKit/Chrome 特定的 API 中是否有任何钩子可用于发出正常的 Web 请求并获取操作结果？

var pageContent = getPageContent(url); // TODO: Implement
var items = $(pageContent).find('.item');
// Display items with further selections

通过磁盘上的本地文件进行此工作的奖励点，用于初始调试。但如果这是唯一的一点就是停止解决方案，那么请忽略奖励积分。

Answer 1

尝试使用

XHR2responseType = "document"

并使用

我的

(new DOMParser).parseFromString(responseText, getResponseHeader("Content-Type"))

补丁依靠

text/html

。请参阅 https://gist.github.com/1138724，了解如何检测 responseType = "document

 支持的示例（同步检查从 

response === null

 blob 创建的对象 URL 上的 

text/html

）。

使用

Chrome WebRequest API 隐藏 X-Requested-With

 等标头。

Answer 2

自从提出这个问题以来，已经发布了很多工具。

artoo.js 就是其中之一。它是一段 JavaScript 代码，旨在在浏览器的控制台中运行，为您提供一些抓取实用程序。它也可以用作 chrome 扩展。

Answer 3

如果您对 Google Chrome 插件之外的东西感兴趣，请查看

phantomjs，它在后台使用 Qt-Webkit，并且像浏览器一样运行，包括发出 ajax 请求。您可以将其称为无头浏览器，因为它不会在屏幕上显示输出，并且可以在您执行其他操作时在后台正常工作。如果需要，您可以从它获取的页面中导出图像、pdf。它提供 JS 接口来加载页面、单击按钮等，就像在浏览器中一样。您还可以在您想要抓取的任何页面上注入自定义 JS（例如 jQuery），并使用它来访问 dom 并导出所需的数据。由于它使用 Webkit，它的渲染行为与 Google Chrome 完全一样。

另一种选择是使用 Aptana

Jaxer，它基于 Mozilla Engine，本身就是非常好的概念。它也可以用作简单的刮擦工具。

Answer 4

网页抓取在 Chrome 扩展中有点复杂。几点：

您运行内容脚本来访问 DOM。
后台页面（每个浏览器一个）可以向内容脚本发送和接收
• 消息。也就是说，您可以运行一个内容脚本来设置 RPC 端点并在后台页面上下文中触发指定的回调作为响应。
您可以在网页的所有框架中执行内容脚本，然后将文档树（由页面包含的 1..N 个框架组成）缝合在一起。
作为 S.K.建议，您的后台页面可以将数据作为 XMLHttpRequest 发送到某种在本地侦听的轻量级 HTTP 服务器。

Answer 5

我不确定仅使用 JavaScript 是否完全可能，但如果您可以为您的扩展程序设置专用的 PHP 脚本，使用 cURL 获取页面的 HTML，则 PHP 脚本可以为您抓取页面，并且您的扩展程序可以通过 AJAX 请求读取它。

然而，被抓取的实际页面并不知道这是一个 AJAX 请求，因为它是通过 cURL 访问的。

Answer 6

我认为你可以从这个

示例开始。

所以基本上你可以尝试使用扩展+插件组合。扩展可以访问 DOM（包括插件）并驱动该过程。插件会发送实际的 HTTP 请求。

我可以推荐使用 Firebreath 作为跨平台 Chrome/Firefox 插件平台，特别是看一下这个示例：

Firebreath - Making+HTTP+Requests+with+SimpleStreamsHelper

Answer 7

你就不能做一些 iframe 技巧吗？如果将 url 加载到专用框架中，则文档对象中就有 dom，并且可以进行 jquery 选择，不是吗？

Answer 8

// Import Crawlbase library
import Crawlbase from 'crawlbase';

// Function to perform web scraping of a not currently open tab
async function getPageContent(url) {
  try {
    // Use Crawlbase to make a normal web request and get the results
    const crawlbase = new Crawlbase();
    const pageContent = await crawlbase.fetch(url);

    // The scraped content is accessible from JavaScript as a string
    return pageContent;
  } catch (error) {
    console.error('Error fetching page content:', error);
    throw error;
  }
}

// Usage example
async function fetchDataAndManipulate(url) {
  try {
    const pageContent = await getPageContent(url);
    
    // Manipulate and present the content within the extension
    const items = $(pageContent).find('.item');
    
    // Display items with further selections
    console.log(items);
  } catch (error) {
    console.error('Error fetching and manipulating data:', error);
  }
}

// Example usage with a URL
const url = 'https://example.com';
fetchDataAndManipulate(url);

此代码利用 Crawlbase 库以模仿正常 Web 行为的方式发出 Web 请求，而无需指示 AJAX 或 XMLHttpRequest。抓取的内容可以作为 JavaScript 中的字符串进行访问，以便在扩展程序中进行进一步的操作和呈现。这里没有直接解决使其从磁盘上的本地文件工作的好处，但

Crawlbase是一个功能强大的库，如果需要，可以针对此类场景进行扩展。