Chrome扩展：如何在Popup中调用Helper.js内的函数

1. 让Popup.js直接访问Helper.js的函数 #

采用ES模块方式实现跨脚本引用：

• 修改popup.html，引入模块类型的脚本：

  <!-- popup.html -->
  <script type="module" src="./helper.js"></script>
  <script type="module" src="./popup.js"></script>
  

• 在helper.js中导出目标函数：

  // helper.js
  export function removeTags(str) {
    // 你的函数实现逻辑
    return str.replace(/<[^>]+>/g, '');
  }
  

• 在popup.js中导入函数：

  // popup.js
  import { removeTags } from './helper.js';
  
  // 现在可以直接在popup里调用removeTags了
  // 比如：console.log(removeTags('<p>test</p>'));
  

2. 将removeTags传入chrome.scripting.executeScript执行 #

由于executeScript的函数参数会在目标页面的独立上下文运行，不能直接传递Popup上下文的函数引用，分两种场景处理：

场景A：removeTags是无依赖的纯函数 #

直接利用函数序列化特性传递：

// popup.js中handleChat点击事件内
async function handleChat() {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  const targetStr = "需要处理的带标签字符串";
  
  const result = await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    func: removeTags, // 直接传入函数，Chrome会自动序列化注入
    args: [targetStr] // 传给removeTags的参数
  });
  
  // 处理返回结果
  console.log(result[0].result);
}

场景B：removeTags依赖其他Helper函数或逻辑复杂 #

先注入整个helper.js到页面上下文，再调用函数：

// popup.js中handleChat点击事件内
async function handleChat() {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  const targetStr = "需要处理的带标签字符串";
  
  // 第一步：注入helper.js到目标页面
  await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    files: ['./helper.js']
  });
  
  // 第二步：调用页面上下文中的removeTags
  const result = await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    func: (str) => removeTags(str),
    args: [targetStr]
  });
  
  console.log(result[0].result);
}

注意事项 #

• 如果使用场景B，无需在manifest.json的web_accessible_resources中配置helper.js，chrome.scripting.executeScript的files参数可直接访问扩展内资源。
• 确保manifest.json中已声明必要权限：

  {
    "permissions": ["scripting", "tabs"]
  }
  

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