如何在chrome.scripting.executeScript中执行外部函数updateFunc？

你编写的代码如下：

chrome.scripting.executeScript({
    target: { tabId },
    func: scrapData,
    args: [
      variable1,
      variable2,
      updateFunc, // <- 此处为外部函数
    ],
  });

const scrapExperience = (variable1, variable2, updateFunc) => {
   console.log('works?')

   const variable3 = updateFunc(variable1, variable2);
   if (variable3) { 
      // 执行操作
   }
}

执行后页面冻结、无日志输出的核心原因是：chrome.scripting.executeScript的args参数仅支持JSON可序列化的值，函数无法被序列化传递，强行传递会导致序列化流程异常，进而阻塞页面。

解决方法 #

方法1：将updateFunc内联到目标函数中

把updateFunc的逻辑直接整合到scrapExperience内部，或者让scrapExperience在定义时就能访问到updateFunc，这样注入时无需传递函数参数：

// 定义updateFunc
const updateFunc = (a, b) => {
  // 你的业务逻辑
  return a * b;
};

// 让scrapExperience直接访问updateFunc
const scrapExperience = (variable1, variable2) => {
   console.log('works?');
   const variable3 = updateFunc(variable1, variable2);
   if (variable3) { 
      // 执行操作
   }
};

// 调用executeScript时只传可序列化的参数
chrome.scripting.executeScript({
  target: { tabId },
  func: scrapExperience,
  args: [variable1, variable2]
});

方法2：通过文件注入共享函数

如果updateFunc需要在多个地方复用，可以将它和scrapExperience一起放在单独的JS文件中（比如content-utils.js），然后通过files参数注入整个文件：

// content-utils.js 内容
const updateFunc = (a, b) => {
  // 你的业务逻辑
  return a + b;
};

const scrapExperience = () => {
   console.log('works?');
   // 直接使用同文件中的updateFunc
   const variable3 = updateFunc(/* 这里可以直接获取页面变量或通过其他方式传参 */);
   if (variable3) { 
      // 执行操作
   }
};

// 调用scrapExperience
scrapExperience();

然后在扩展中注入该文件：

chrome.scripting.executeScript({
  target: { tabId },
  files: ['content-utils.js']
});

关键说明 #

chrome.scripting.executeScript注入的函数会在目标页面的独立上下文中执行，无法直接引用扩展后台或其他上下文的函数。必须确保函数本身在注入时是完整的，或者通过文件注入让函数在目标上下文中可访问。

内容的提问来源于stack exchange，提问作者dm-mal