从零做一个会读网页的浏览器：AI浏览器入门与源码实战

发布人：慈云数据-客服中心发布时间：2小时前阅读量：0

AI浏览器新手入门指南｜附源码

随着大模型能力的快速发展，“AI浏览器”逐渐成为一个热门方向。它并不是传统意义上只负责打开网页、展示内容的浏览器，而是在浏览器的基础能力之上，叠加了人工智能能力，例如网页内容总结、网页问答、自动提取信息、辅助搜索、自动填写表单、网页内容翻译、任务规划与执行等。

对于新手来说，AI浏览器看起来很复杂：既涉及浏览器技术，又涉及大语言模型，还可能涉及网页解析、插件开发、前端界面、后端接口等内容。但实际上，如果从最小可用版本开始，我们完全可以用较少的代码搭建一个“简易AI浏览器”，帮助我们理解它的基本原理。

本文将从零开始介绍AI浏览器的核心概念、实现思路、技术选型，并附上一份可运行的入门级源码示例，适合初学者学习和二次开发。

一、什么是AI浏览器？

AI浏览器可以理解为：

一个能够理解网页内容，并通过AI帮助用户完成阅读、搜索、分析和操作任务的智能浏览器。

传统浏览器的核心功能是：

输入网址；
请求网页；
渲染页面；
提供标签页、书签、下载、历史记录等功能。

而AI浏览器在此基础上增加了智能能力，例如：

自动总结当前网页内容；
根据网页内容回答问题；
提取网页中的关键数据；
对网页内容进行翻译；
生成阅读笔记；
判断网页可信度；
根据用户指令执行简单任务；
结合搜索引擎完成信息聚合。

举个例子，当你打开一篇很长的技术文章时，传统浏览器只能展示内容，而AI浏览器可以帮你：

“用300字总结这篇文章，并列出适合新手学习的重点。”

当你打开一个商品详情页时，AI浏览器可以帮你：

“提取商品价格、优惠信息、用户评价优缺点，并告诉我是否值得购买。”

这就是AI浏览器的价值。

二、AI浏览器的典型应用场景

AI浏览器并不是一个单一产品形态，而是一类能力集合。常见应用场景包括以下几类。

1. 网页内容总结

这是最常见、最容易实现的AI浏览器功能。

用户打开网页后，AI自动读取网页正文，并生成摘要，例如：

一句话总结；
三段式总结；
要点列表；
面向小白的解释；
面向专业人士的分析。

这种能力特别适合阅读新闻、论文、技术博客、政策文件和行业报告。

2. 网页问答

网页问答是指用户可以针对当前网页提问，例如：

这篇文章主要讲了什么？
作者的核心观点是什么？
文中提到的三个方法分别是什么？
这篇文章有没有给出具体案例？
适合初学者阅读吗？

实现方式通常是：

抓取网页文本；
将文本传给大语言模型；
用户输入问题；
模型基于网页内容回答。

如果网页内容非常长，还可以引入分块、向量检索、RAG等技术。

3. 智能搜索与信息整合

AI浏览器可以把搜索引擎结果进行二次加工，不只是展示一堆链接，而是帮用户：

汇总多个网页观点；
对比不同来源信息；
生成结构化结论；
标注信息来源；
给出推荐阅读顺序。

比如搜索“AI浏览器是什么”，AI浏览器可以自动阅读多个网页，然后生成一份结构清晰的说明文。

4. 自动化网页操作

更高级的AI浏览器可以具备“网页代理”能力，也就是让AI像人一样操作网页，例如：

点击按钮；
输入文字；
选择下拉框；
提交表单；
下载文件；
抓取页面数据。

这一类能力通常需要结合浏览器自动化工具，例如：

Playwright；
Selenium；
Puppeteer；
Chrome DevTools Protocol。

不过对新手来说，不建议一开始就做复杂网页自动化，最好先从网页总结和问答做起。

三、AI浏览器的基本架构

一个入门级AI浏览器通常可以拆分为以下几个模块：

用户输入网址
    ↓
网页请求模块
    ↓
网页内容解析模块
    ↓
正文提取与清洗
    ↓
AI模型处理
    ↓
结果展示

如果做成更完整的产品，可以进一步扩展为：

前端界面
    ↓
后端服务
    ↓
网页抓取服务
    ↓
内容解析服务
    ↓
大模型服务
    ↓
数据库 / 缓存 / 向量库

其中最核心的是三个部分：

网页获取：根据URL获取网页HTML；
内容解析：从HTML中提取可读文本；
AI处理：调用大模型进行总结、问答或分析。

四、技术选型建议

对于新手来说，建议使用Python实现第一个版本，因为Python生态成熟、代码量少、上手快。

本文示例使用以下技术：

技术	作用
Python	主要开发语言
requests	请求网页内容
BeautifulSoup	解析HTML
Streamlit	快速搭建网页界面
OpenAI兼容接口	调用大语言模型
python-dotenv	管理环境变量

当然，你也可以用其他技术栈：

前端：Vue、React、Next.js；
后端：FastAPI、Flask、Node.js；
浏览器插件：Chrome Extension；
自动化：Playwright、Selenium；
本地模型：Ollama、LM Studio、vLLM。

为了降低学习门槛，本文选择最轻量的方案：Streamlit + Python脚本。

五、项目功能说明

我们要实现的入门级AI浏览器具备以下功能：

输入一个网页URL；
自动抓取网页内容；
提取网页标题和正文；
点击按钮生成网页摘要；
支持针对网页内容提问；
在页面上展示AI回答。

它不是完整意义上的Chrome或Edge浏览器，但已经具备AI浏览器的核心雏形：读取网页 + 理解内容 + 与用户交互。

六、项目目录结构

建议创建如下目录：

ai-browser-demo/
├── app.py
├── requirements.txt
├── .env
└── README.md

每个文件的作用如下：

文件	说明
app.py	主程序源码
requirements.txt	项目依赖
.env	存放API Key等配置
README.md	项目说明文档

七、安装依赖

首先创建项目目录：

mkdir ai-browser-demo
cd ai-browser-demo

然后创建虚拟环境：

python -m venv venv

激活虚拟环境。

macOS / Linux：

source venv/bin/activate

Windows：

venv\Scripts\activate

创建 requirements.txt：

streamlit
requests
beautifulsoup4
python-dotenv
openai

安装依赖：

pip install -r requirements.txt

八、配置环境变量

在项目根目录创建 .env 文件：

OPENAI_API_KEY=你的API_KEY
OPENAI_BASE_URL=https://api.openai.com/v1
OPENAI_MODEL=gpt-4o-mini

如果你使用的是其他兼容OpenAI格式的模型服务，也可以修改 OPENAI_BASE_URL 和 OPENAI_MODEL。

例如某些本地模型服务可能类似：

OPENAI_API_KEY=ollama
OPENAI_BASE_URL=http://localhost:11434/v1
OPENAI_MODEL=qwen2.5

具体取决于你使用的模型服务是否支持OpenAI兼容接口。

九、完整源码：app.py

下面是一个可直接运行的入门版AI浏览器源码。

import os
import re
import requests
import streamlit as st
from bs4 import BeautifulSoup
from dotenv import load_dotenv
from openai import OpenAI

# =========================
# 1. 加载环境变量
# =========================

load_dotenv()

API_KEY = os.getenv("OPENAI_API_KEY")
BASE_URL = os.getenv("OPENAI_BASE_URL", "https://api.openai.com/v1")
MODEL = os.getenv("OPENAI_MODEL", "gpt-4o-mini")

client = OpenAI(
    api_key=API_KEY,
    base_url=BASE_URL
)


# =========================
# 2. 网页抓取函数
# =========================

def fetch_html(url: str) -> str:
    """
    根据URL请求网页HTML
    """
    headers = {
        "User-Agent": (
            "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) "
            "AppleWebKit/537.36 (KHTML, like Gecko) "
            "Chrome/120.0.0.0 Safari/537.36"
        )
    }

    response = requests.get(url, headers=headers, timeout=15)
    response.raise_for_status()

    # 尝试设置正确编码
    if response.encoding == "ISO-8859-1":
        response.encoding = response.apparent_encoding

    return response.text


# =========================
# 3. 网页正文提取函数
# =========================

def clean_text(text: str) -> str:
    """
    清洗文本，去除多余空白字符
    """
    text = re.sub(r"\s+", " ", text)
    return text.strip()


def extract_content(html: str) -> dict:
    """
    从HTML中提取标题和正文
    """
    soup = BeautifulSoup(html, "html.parser")

    # 删除无关标签
    for tag in soup(["script", "style", "noscript", "iframe", "svg"]):
        tag.decompose()

    # 提取标题
    title = ""
    if soup.title and soup.title.string:
        title = clean_text(soup.title.string)

    # 优先提取article标签内容
    article = soup.find("article")
    if article:
        body_text = article.get_text(separator=" ")
    else:
        # 如果没有article，则提取body文本
        body = soup.find("body")
        body_text = body.get_text(separator=" ") if body else soup.get_text(separator=" ")

    body_text = clean_text(body_text)

    return {
        "title": title,
        "content": body_text
    }


# =========================
# 4. 文本截断函数
# =========================

def truncate_text(text: str, max_chars: int = 12000) -> str:
    """
    防止网页内容过长，超过模型上下文限制
    """
    if len(text) <= max_chars:
        return text
    return text[:max_chars] + "\n\n[内容过长，已截断]"


# =========================
# 5. 调用AI模型
# =========================

def ask_ai(system_prompt: str, user_prompt: str) -> str:
    """
    调用OpenAI兼容接口
    """
    if not API_KEY:
        return "错误：请先在 .env 文件中配置 OPENAI_API_KEY。"

    response = client.chat.completions.create(
        model=MODEL,
        messages=[
            {
                "role": "system",
                "content": system_prompt
            },
            {
                "role": "user",
                "content": user_prompt
            }
        ],
        temperature=0.3
    )

    return response.choices[0].message.content


def summarize_page(title: str, content: str) -> str:
    """
    总结网页内容
    """
    system_prompt = """
你是一个专业的网页阅读助手，擅长从网页文本中提取关键信息。
请用中文回答，要求结构清晰、表达准确，不要编造网页中没有的信息。
"""

    user_prompt = f"""
请阅读以下网页内容，并生成一份高质量中文摘要。

网页标题：
{title}

网页正文：
{truncate_text(content)}

请按照以下格式输出：

## 一句话总结
用一句话概括网页核心内容。

## 核心要点
用项目符号列出3到6个关键要点。

## 适合人群
说明这篇内容适合哪些读者。

## 阅读建议
给出简短阅读建议。
"""

    return ask_ai(system_prompt, user_prompt)


def answer_question(title: str, content: str, question: str) -> str:
    """
    基于网页内容回答用户问题
    """
    system_prompt = """
你是一个严谨的网页问答助手。
你只能根据用户提供的网页内容回答问题。
如果网页内容中没有相关信息，请明确说明“网页中未提供相关信息”，不要凭空猜测。
请用中文回答。
"""

    user_prompt = f"""
网页标题：
{title}

网页正文：
{truncate_text(content)}

用户问题：
{question}

请基于网页内容回答问题。
"""

    return ask_ai(system_prompt, user_prompt)


# =========================
# 6. Streamlit界面
# =========================

st.set_page_config(
    page_title="AI浏览器 Demo",
    page_icon="🤖",
    layout="wide"
)

st.title("🤖 AI浏览器 Demo")
st.caption("输入网页URL，让AI帮你总结网页、回答问题。")

if "page_title" not in st.session_state:
    st.session_state.page_title = ""

if "page_content" not in st.session_state:
    st.session_state.page_content = ""

if "current_url" not in st.session_state:
    st.session_state.current_url = ""

url = st.text_input(
    "请输入网页URL",
    placeholder="例如：https://example.com/article"
)

col1, col2 = st.columns([1, 4])

with col1:
    fetch_button = st.button("读取网页", type="primary")

if fetch_button:
    if not url.strip():
        st.warning("请输入有效的网页URL。")
    else:
        try:
            with st.spinner("正在读取网页内容..."):
                html = fetch_html(url.strip())
                data = extract_content(html)

                st.session_state.page_title = data["title"]
                st.session_state.page_content = data["content"]
                st.session_state.current_url = url.strip()

            st.success("网页读取成功！")

        except Exception as e:
            st.error(f"网页读取失败：{e}")

if st.session_state.page_content:
    st.divider()

    st.subheader("网页信息")
    st.write(f"**URL：** {st.session_state.current_url}")
    st.write(f"**标题：** {st.session_state.page_title or '未识别到标题'}")
    st.write(f"**正文长度：** {len(st.session_state.page_content)} 字符")

    with st.expander("查看提取到的网页正文"):
        st.write(st.session_state.page_content[:5000])

    st.divider()

    st.subheader("AI总结")

    if st.button("生成网页摘要"):
        with st.spinner("AI正在总结网页内容..."):
            summary = summarize_page(
                st.session_state.page_title,
                st.session_state.page_content
            )
        st.markdown(summary)

    st.divider()

    st.subheader("网页问答")

    question = st.text_input(
        "请输入你想问的问题",
        placeholder="例如：这篇文章的核心观点是什么？"
    )

    if st.button("提交问题"):
        if not question.strip():
            st.warning("请输入问题。")
        else:
            with st.spinner("AI正在思考..."):
                answer = answer_question(
                    st.session_state.page_title,
                    st.session_state.page_content,
                    question.strip()
                )
            st.markdown(answer)

十、运行项目

在项目根目录执行：

streamlit run app.py

运行成功后，浏览器会自动打开类似地址：

http://localhost:8501

你可以输入一个网页URL，例如：

https://example.com

然后点击“读取网页”，再点击“生成网页摘要”，即可看到AI生成的网页总结。

十一、代码核心逻辑讲解

1. 网页请求

response = requests.get(url, headers=headers, timeout=15)

这里使用 requests 请求网页。为了减少被网站拒绝访问的概率，我们设置了 User-Agent，模拟普通浏览器访问。

需要注意的是，有些网站有反爬虫机制，或者内容由JavaScript动态渲染，这种情况下 requests 可能拿不到完整正文。如果要处理动态网页，可以改用 Playwright。

2. HTML解析

soup = BeautifulSoup(html, "html.parser")

BeautifulSoup可以把HTML转换成可查询的对象结构。我们可以通过它删除无关标签，提取标题、正文等内容。

示例中优先提取 article 标签，因为很多新闻、博客、文档网站会把正文放在 article 中。如果没有 article，就退而求其次提取 body。

3. 文本清洗

网页文本中经常包含大量换行、空格、菜单项、版权信息等内容。示例中使用正则表达式做了基础清洗：

text = re.sub(r"\s+", " ", text)

这一步虽然简单，但对模型理解内容很有帮助。

如果想进一步优化，可以增加：

删除导航栏文本；
删除页脚；
删除重复句子；
提取正文密度最高的区域；
使用 readability-lxml 等正文提取库。

4. AI总结

summary = summarize_page(title, content)

总结功能的关键是提示词设计。我们在Prompt中明确要求模型输出：

一句话总结；
核心要点；
适合人群；
阅读建议。

这比简单地说“总结一下”效果更稳定，也更适合产品化。

5. 网页问答

网页问答的关键原则是：只基于网页内容回答，不要胡编乱造。

因此系统提示词中写了：

如果网页内容中没有相关信息，请明确说明“网页中未提供相关信息”

这是构建可靠AI应用时非常重要的约束。

十二、新手常见问题

1. 为什么有些网页读取失败？

可能原因包括：

URL不正确；
网站禁止爬虫访问；
网站需要登录；
网站内容由JavaScript动态加载；
网络连接超时；
SSL证书问题。

解决方法：

换一个网页测试；
增加请求头；
使用Playwright模拟真实浏览器；
对需要登录的网站使用Cookie；
做异常处理和重试机制。

2. 为什么提取到的正文很乱？

因为不同网站HTML结构差异很大，有些网页包含导航、广告、推荐文章、评论区等内容。基础版本只做了简单提取，难免会混入噪音。

优化方案包括：

使用 readability-lxml；
根据标签密度提取正文；
删除常见无关区域，如 nav、footer、aside；
针对特定网站写解析规则；
使用AI二次清洗正文。

3. 网页太长怎么办？

大语言模型通常有上下文长度限制。如果网页太长，直接全部传给模型可能失败或费用较高。

常见处理方法：

截断文本；
分段总结；
先局部总结，再汇总总结；
使用向量数据库做检索问答；
使用长上下文模型。

本文示例采用最简单的截断方式，适合入门学习，但生产环境建议使用分块处理。

4. 能不能做成浏览器插件？

可以。Chrome浏览器插件通常由以下部分组成：

manifest.json：插件配置；
content script：读取当前网页内容；
background service worker：处理后台逻辑；
popup.html：插件弹窗界面；
后端API：调用大模型。

插件版AI浏览器的优势是可以直接读取用户当前正在浏览的网页，不需要用户复制URL。但开发复杂度比Streamlit版本更高。

十三、进一步升级方向

当你完成这个Demo后，可以从以下方向继续扩展。

1. 增加历史记录

可以把用户访问过的网页、摘要结果、问答记录保存到SQLite数据库中，方便之后查看。

可增加字段：

URL；
网页标题；
正文摘要；
创建时间；
问答记录。

2. 支持网页翻译

增加一个“翻译当前网页”按钮，将英文网页翻译成中文，或者将中文网页翻译成英文。

提示词示例：

请将以下网页内容翻译成自然流畅的中文，保留标题层级和列表结构。

3. 支持多网页对比

用户输入多个URL，AI分别读取内容，然后进行对比分析。

适合场景：

商品对比；
新闻观点对比；
技术方案对比；
政策文件对比；
竞品分析。

4. 接入向量数据库

如果你想让AI浏览器支持长文档问答，可以加入向量数据库，例如：

FAISS；
Chroma；
Milvus；
Weaviate；
pgvector。

基本流程是：

网页正文
  ↓
文本分块
  ↓
生成Embedding
  ↓
存入向量数据库
  ↓
用户提问
  ↓
检索相关片段
  ↓
交给大模型回答

这就是常见的RAG架构。

5. 使用Playwright处理动态网页

很多现代网页使用React、Vue、Next.js等框架，页面内容需要浏览器执行JavaScript后才会出现。此时可以用Playwright。

安装：

pip install playwright
playwright install

示例：

from playwright.sync_api import sync_playwright

def fetch_dynamic_html(url: str) -> str:
    with sync_playwright() as p:
        browser = p.chromium.launch(headless=True)
        page = browser.new_page()
        page.goto(url, wait_until="networkidle")
        html = page.content()
        browser.close()
        return html

将原来的 fetch_html 替换成这个函数，就可以获取动态渲染后的页面HTML。

十四、AI浏览器产品设计建议

如果你想把这个Demo继续做成真正的产品，可以重点关注以下几点。

1. 用户体验要简单

AI浏览器不应该让用户学习复杂操作。理想体验应该是：

打开网页；
点击AI按钮；
自动生成结果；
用户继续追问。

越简单，越容易被用户接受。

2. 输出结果要结构化

不要只输出一大段文字。更好的方式是：

摘要；
要点；
表格；
结论；
风险提示；
推荐操作。

结构化结果更容易阅读，也更像一个成熟产品。

3. 注意隐私与安全

AI浏览器可能读取用户正在浏览的网页内容，因此必须重视隐私：

不要默认上传敏感页面；
对密码、Token、手机号等信息做过滤；
明确告知用户数据会如何处理；
尽量支持本地模型；
对API Key进行安全管理。

4. 避免AI幻觉

AI可能会编造不存在的信息。降低幻觉的方法包括：

明确要求基于网页内容回答；
对答案引用原文片段；
对不确定内容说“不确定”；
不让模型回答网页外的问题；
使用RAG检索相关片段。

十五、总结

AI浏览器的本质，是把传统网页浏览能力和大语言模型理解能力结合起来。它不是简单地“给浏览器加一个聊天框”，而是让AI真正参与到信息获取、阅读理解、内容分析和任务执行的过程中。

对于新手来说，学习AI浏览器不必一开始就追求复杂功能。本文提供的Demo已经覆盖了最核心的流程：

输入URL；
抓取网页；
提取正文；
调用大模型；
生成摘要；
基于网页内容问答。

掌握这个流程后，你就可以继续扩展浏览器插件、网页自动化、RAG问答、多网页分析、智能搜索等高级能力。

如果你正在学习AI应用开发，这个项目非常适合作为入门练手项目。它代码量不大，但涵盖了网页抓取、文本处理、Prompt设计、模型调用和界面展示等多个关键知识点。只要在此基础上持续迭代，你完全可以做出一个属于自己的AI浏览器工具。

文章标签： AI浏览器网页总结网页问答源码示例

上一篇：从零做一个能总结网页的 AI 浏览器助手：新手教程+完整源码

下一篇：第一次用AI浏览器？这份零基础上手指南帮你少走弯路

更多栏目

新闻动态

文档中心

下载中心

目录结构

全文

产品与服务

新闻帮助

生态合作

了解我们