如何将Python谷歌搜索结果在浏览器扩展的HTML中展示？

核心前提：浏览器扩展无法直接运行Python代码 #

浏览器扩展基于JS/HTML/CSS环境，不能直接执行Python脚本，必须把Python搜索逻辑做成后端服务，通过API接口让扩展前端调用，再将结果渲染到HTML中。

步骤1：用Flask搭建后端搜索API #

基于你已有的谷歌搜索Python代码，整合到Flask框架里，提供一个接收搜索关键词、返回结果JSON的接口：

from flask import Flask, request, jsonify
from googlesearch import search
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # 允许跨域请求，适配浏览器扩展的跨域限制

@app.route('/search', methods=['GET'])
def get_search_results():
    query = request.args.get('q')
    if not query:
        return jsonify({'error': '请传入搜索关键词'}), 400
    
    results_list = []
    try:
        # 获取前10条搜索结果
        for item in search(query, num_results=10):
            results_list.append({
                'title': item.title,
                'url': item.url,
                'desc': item.description
            })
    except Exception as e:
        return jsonify({'error': str(e)}), 500
    
    return jsonify({'results': results_list})

if __name__ == '__main__':
    app.run(host='localhost', port=5000, debug=True)

先安装依赖：pip install flask googlesearch-python flask-cors

步骤2：扩展前端调用API并渲染结果 #

在扩展的弹窗HTML（比如popup.html）里添加搜索交互和结果展示区域：

<!DOCTYPE html>
<html>
<head>
    <style>
        body { width: 420px; padding: 12px; }
        #search-bar { width: 100%; padding: 8px; margin-bottom: 12px; box-sizing: border-box; }
        .result-card { margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #e0e0e0; }
        .result-title { font-weight: 600; margin-bottom: 4px; }
        .result-title a { color: #1a0dab; text-decoration: none; }
        .result-url { color: #006621; font-size: 13px; margin-bottom: 4px; display: block; }
        .result-desc { font-size: 14px; color: #545454; line-height: 1.4; }
    </style>
</head>
<body>
    <input type="text" id="search-bar" placeholder="输入关键词搜索...">
    <button id="search-btn">搜索</button>
    <div id="results-box"></div>

    <script>
        const searchBtn = document.getElementById('search-btn');
        const searchBar = document.getElementById('search-bar');
        const resultsBox = document.getElementById('results-box');

        searchBtn.addEventListener('click', async () => {
            const query = searchBar.value.trim();
            if (!query) {
                resultsBox.innerHTML = '请输入搜索关键词';
                return;
            }

            resultsBox.innerHTML = '搜索中...';
            try {
                const res = await fetch(`http://localhost:5000/search?q=${encodeURIComponent(query)}`);
                const data = await res.json();

                if (data.error) {
                    resultsBox.innerHTML = `错误：${data.error}`;
                    return;
                }

                // 渲染结果到页面
                let htmlStr = '';
                data.results.forEach(item => {
                    htmlStr += `
                        <div class="result-card">
                            <div class="result-title"><a href="${item.url}" target="_blank">${item.title}</a></div>
                            <a class="result-url" href="${item.url}" target="_blank">${item.url}</a>
                            <div class="result-desc">${item.desc}</div>
                        </div>
                    `;
                });
                resultsBox.innerHTML = htmlStr;
            } catch (err) {
                resultsBox.innerHTML = '无法连接到搜索服务，请确认后端已启动';
            }
        });
    </script>
</body>
</html>

步骤3：配置扩展manifest.json #

确保扩展允许访问本地后端API，在manifest.json中添加权限：

{
    "manifest_version": 3,
    "name": "谷歌搜索小工具",
    "version": "1.0",
    "action": {
        "default_popup": "popup.html"
    },
    "host_permissions": ["http://localhost:5000/*"]
}

测试流程 #

1. 启动Flask后端：运行写好的Python脚本
2. 在浏览器扩展管理页面，加载已解压的扩展文件夹
3. 点击扩展图标，输入关键词即可看到渲染后的搜索结果

关于之前的问题说明 #

• PyCharm中能运行是因为直接执行了Python代码，但浏览器扩展是前端环境，无法直接调用本地Python脚本，必须通过API接口交互。
• Flask完全满足需求，它轻量易搭建，适合这种小型后端服务。后续如果要发布，只需将Flask服务部署到云服务器，替换前端的API地址即可。

内容的提问来源于stack exchange，提问作者James Boland