Manifest V3浏览器扩展如何调用外部API实现搜索框输入联想功能

Manifest V3 对内容安全策略做了更严格的限制，不允许在script-src中添加外部远程域名，也禁止页面端动态注入外部脚本执行，因此原来的JSONP方案无法直接使用。你可以通过将请求转发到后台service worker处理的方式实现需求，步骤如下：

1. 调整manifest.json配置 #

新增host权限用于跨域请求，配置基础CSP规则并声明后台service worker：

{
  "manifest_version": 3,
  // 扩展名称、版本等基础配置省略
  "host_permissions": ["https://suggest.finditnowonline.com/*"],
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'"
  },
  "background": {
    "service_worker": "background.js"
  }
}

2. 编写background.js请求逻辑 #

在service worker中监听前端发送的联想词查询消息，发起请求后将结果返回给前端：

// background.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type !== 'FETCH_SUGGEST_WORDS') return;
  const { searchValue } = message;
  // service worker配置host权限后可直接发起跨域请求，无需使用JSONP
  fetch(`${process.env.SUGGESTED_WORDS_URL}${encodeURIComponent(searchValue)}`)
    .then(res => res.json())
    .then(data => sendResponse({ success: true, data }))
    .catch(err => sendResponse({ success: false, msg: err.message }));
  // 异步返回结果必须return true保持消息通道开放
  return true;
});

3. 改造React侧请求逻辑 #

将原来的JSONP请求替换为向后台发送消息的逻辑，可额外添加防抖逻辑减少输入过程中的无效请求：

useEffect(() => {
  const fetchSuggestedWords = async () => {
    try {
      const res = await chrome.runtime.sendMessage({
        type: 'FETCH_SUGGEST_WORDS',
        searchValue
      });
      if (res.success) {
        const suggestedWordsArray = res.data;
        setSuggestedWords(suggestedWordsArray[1].slice(0, 10));
      }
    } catch {
      console.log('error fetching suggested results');
    }
  };

  if (searchSuggestedWords && searchValue.trim()) {
    // 300ms防抖可根据需求调整
    const timer = setTimeout(fetchSuggestedWords, 300);
    return () => clearTimeout(timer);
  }
}, [searchValue])

• 目前Chrome已经全面停止Manifest V2扩展的上架、更新推送，Firefox也已完成Manifest V3的核心能力支持，后续会逐步淘汰V2版本。如果你的扩展需要长期在官方应用商店上架维护，必须升级到V3。
• Manifest V3采用service worker替代原来的持久化后台页，内存占用更低，安全规则更严格，且现有能力已经覆盖绝大多数扩展的开发需求。
• 如果你当前的扩展没有依赖Manifest V2独有特性（比如持久化后台运行、unsafe-eval执行动态代码等），完全可以直接升级，你当前的业务场景不存在兼容障碍。

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