本地Web应用如何与Chrome扩展交互？能否向Multi-highlight传递MySQL关键词？

当然可以实现！我给你梳理几个接地气的可行方案，完全适配你「输入URL+从MySQL取关键词+用Multi-highlight自动高亮」的需求，你可以根据自己的技术情况选：

方案1：自定义Chrome扩展 + 后端服务（推荐，完全匹配需求） #

这个方案能完美串起你的整个流程，步骤清晰易操作：

1. 搭个简单的后端接口

   • 用Python Flask或者Node.js Express写个轻量接口就行，核心功能就是连接MySQL数据库，把关键词查出来返回成JSON数组（比如["关键词1", "关键词2", ...]）。
   • 要是前端和后端不在同一域名下，记得配置跨域允许，不然调用接口会被浏览器拦截。

2. 开发极简Chrome扩展
   这个扩展主要做三件事：给你输入URL的地方、调用后端拿关键词、让Multi-highlight加载关键词并打开目标页面。

   • Popup页面：做个超简单的HTML界面，就一个URL输入框加个「打开并高亮」按钮就行。
   • 核心逻辑（popup.js）：
     • 监听按钮点击，先拿到你输入的URL。
     • 调用后端接口获取MySQL里的关键词数组。
     • 通过Chrome的chrome.storage.sync.set()方法，把关键词存入Multi-highlight用的存储键（你可以打开Chrome开发者工具→应用→同步存储，找到Multi-highlight的存储项，一般是类似multi-highlight:keywords的键，注意它的格式，可能是纯数组或者带颜色的对象数组，比如[{text: "关键词", color: "#ffeb3b"}]）。
     • 用chrome.tabs.create({url: 你的输入URL})打开目标页面，Multi-highlight会自动读取存储里的关键词并高亮。
   • 别忘了在扩展的manifest.json里声明必要权限：storage、tabs，还有后端接口的host_permissions。

3. 确认Multi-highlight的存储格式
   提前打开Chrome开发者工具看一眼Multi-highlight的存储结构，确保你存的关键词格式和它一致，不然扩展识别不了哦。

方案2：Tampermonkey油猴脚本 + 后端接口（轻量备选） #

要是不想开发完整的Chrome扩展，油猴脚本是更省事的选择：

• 写个油猴脚本，在脚本的UI面板里加个URL输入框（或者直接在你常用的某个网页上嵌入输入框）。
• 点击按钮后，调用后端接口拿关键词，然后通过GM_setValue()或者申请权限后操作chrome.storage.sync，把关键词设置成Multi-highlight能识别的格式。
• 用window.open()或者chrome.tabs.create()打开目标URL，Multi-highlight会自动触发高亮。

方案3：本地脚本（适合个人自用，无需部署） #

如果你只是自己本地用，不用搞线上服务，用Python或Node.js写个脚本就行：

• 脚本里先连接MySQL把关键词查出来。
• 用Chrome DevTools Protocol控制Chrome打开指定URL，然后注入一段JS代码模拟Multi-highlight的高亮逻辑（或者直接调用它的内部方法，能找到的话更省事）。
• 给你个Python示例（用pyppeteer库）：

import pyppeteer
import mysql.connector

# 从MySQL读取关键词
db = mysql.connector.connect(host="localhost", user="你的用户名", password="你的密码", database="你的数据库")
cursor = db.cursor()
cursor.execute("SELECT keyword FROM 关键词表")
keywords = [row[0] for row in cursor.fetchall()]

# 启动Chrome并高亮关键词
async def highlight_target_page():
    browser = await pyppeteer.launch(headless=False)
    page = await browser.newPage()
    await page.goto("你输入的目标URL")
    # 注入高亮脚本
    highlight_script = """
        function highlightKeywords(keywords) {
            keywords.forEach(keyword => {
                const regex = new RegExp(keyword, 'gi');
                document.body.innerHTML = document.body.innerHTML.replace(regex, match => `<span style="background-color: yellow; color: black;">${match}</span>`);
            });
        }
    """
    await page.evaluate(highlight_script)
    await page.evaluate(f"highlightKeywords({keywords})")

import asyncio
asyncio.run(highlight_target_page())

小提醒 #

• 直接用Multi-highlight存储键的话，一定要和它的格式完全匹配，不然扩展读不出来。
• 后端接口记得加简单的权限控制，别随便让人调用。
• 要是Multi-highlight更新后改了存储格式，你可能得微调代码适配一下。

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