本文介绍使用 flask 框架将 python 后端计算或爬取的数据（如 google 搜索结果）安全、高效地渲染到 html 页面中，包含路由定义、模板渲染和基础结构示例。
本文介绍使用 flask 框架将 python 后端计算或爬取的数据（如 google 搜索结果）安全、高效地渲染到 html 页面中，包含路由定义、模板渲染和基础结构示例。
在 Web 开发中，Python 本身无法直接操作浏览器 DOM，因此需借助 Web 框架实现“后端生成数据 → 前端展示”的标准流程。Flask 是轻量、易上手的 Python Web 框架，非常适合此类场景——例如你开发的浏览器扩展后端服务，需要将 Google 搜索获取的标题与链接动态呈现为可点击的 HTML 列表。
✅ 核心步骤概览
- 安装 Flask：pip install flask
-
组织项目结构：
your_project/ ├── app.py # 主应用文件 └── templates/ └── results.html # HTML 模板（支持 Jinja2 语法） - 编写后端逻辑（app.py）：
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/search')
def search():
# 示例：模拟获取搜索结果（实际中可调用 requests + BeautifulSoup 或 Google Custom Search API）
results = [
{"title": "Flask Documentation", "url": "https://flask.palletsprojects.com/"},
{"title": "Jinja2 Template Guide", "url": "https://jinja.palletsprojects.com/"},
{"title": "Python Web Development with Flask", "url": "https://realpython.com/flask-by-example/"}
]
return render_template('results.html', results=results)- 创建模板（templates/results.html）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>搜索结果</title>
<style>
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; margin: 2rem; }
a { color: #0066cc; text-decoration: none; }
a:hover { text-decoration: underline; }
li { margin: 0.5rem 0; }
</style>
</head>
<body>
<h1>? 搜索结果（共 {{ results|length }} 条）</h1>
{% if results %}
<ul>
{% for item in results %}
<li>
<a href="{{ item.url }}" target="_blank">{{ item.title }}</a>
</li>
{% endfor %}
</ul>
{% else %}
<p>暂无结果，请检查搜索逻辑或网络连接。</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11526" title="Python Hardener"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="Python Hardener" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11526" title="Python Hardener">Python Hardener</a>
<p>通过完整的安全审查、代码整洁重构、健壮的错误处理、正确的日志记录以及完整的文档字符串覆盖，强化 Python 脚本。</p>
</div>
<a href="/xiazai/skill11526" title="Python Hardener" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
{% endif %}
</body>
</html>⚠️ 注意事项
- 安全性：若 results 包含用户输入或外部数据，务必对 HTML 内容进行转义（Jinja2 默认开启自动转义，{{ item.title }} 是安全的；如需渲染富文本，显式使用 |safe 并自行过滤 XSS 风险）。
-
跨域限制：浏览器扩展通常运行在 chrome-extension:// 协议下，直接访问 http://localhost:5000/search 可能触发 CORS 错误。建议在扩展 manifest 中配置 "permissions": ["http://localhost/*"]，并在 Flask 中启用 CORS（pip install flask-cors）：
from flask_cors import CORS CORS(app) # 允许所有来源（开发阶段），生产环境请限制 origin
- 替代方案提示：若无需完整 Web 服务（如仅本地一次性生成报告），可考虑 jinja2 直接渲染静态 HTML 文件，或使用 pandas.DataFrame.to_html() 快速导出表格。
通过以上方式，你就能将 Python 程序的结构化输出（列表、字典等）无缝注入 HTML，并保持前后端职责清晰、代码可维护性强。
