将参数传递给 chrome.scripting.executeScripts 执行的文件脚本？（清单 v3）

Question

我正在开发一个 chrome 扩展（manifest v3），并且想将参数传递给我在chrome.scripting.executeScripts. 但是，文档提到仅在指定参数args时才有效func。

我发现了Manifest v2 的类似问题chrome.tabs.executeScript，使用它有一个解决方案，但我无法在清单 v3 中使用类似的方法。

脚本与func（工作）

// popup.js
chrome.scripting.executeScript({
    target: { tabId: tabId, allFrames: false },
    args: [eleID, type, offsetHeight + 10],
    func: scrollToTarget
});

function scrollToTarget(eleID, type, headerHeight = 40) {
   console.log({eleID, type, headerHeight);
}

---

不工作

脚本与files

这是与清单 v2类似的方法chrome.tabs.executeScript

// popup.js
chrome.scripting.executeScript({
    target: { tabId: tabId, allFrames: false },
    code: `var eleID = '${eleID}'; var type = '${type}'; var headerHeight = ${offsetHeight};`
}, function () {
    chrome.scripting.executeScript({
        target: { tabId: tabId, allFrames: false },
        files: ['./executeScript.js'],
    });
});

执行Scrupt.js

scrollToTarget(eleID, type, headerHeight);

function scrollToTarget(eleID, type, headerHeight = 40) {
   console.log({eleID, type, headerHeight);
}

Answer 1

选项1

MV3 中的executeScript 没有code参数，因此您需要使用重写它func并将参数设置为window（或其别名self）的属性，这与出于所有实际目的进行的全局声明相同var（假设您不使用world: 'MAIN'）。

chrome.scripting.executeScript({
  target: {tabId},
  args: [{eleID, type, headerHeight: offsetHeight + 10}],
  func: vars => Object.assign(self, vars),
}, () => {
  chrome.scripting.executeScript({target: {tabId}, files: ['./executeScript.js']});
});

选项2

或者，您可以让注入的文件声明函数而不调用它们：

// executeScript.js
function scrollToTarget(eleID, type, headerHeight = 40) {
  console.log(eleID, type, headerHeight);
}

然后，您将在注入文件后调用该函数：

chrome.scripting.executeScript({target: {tabId}, files: ['./executeScript.js']}, () => {
  chrome.scripting.executeScript({
    target: {tabId},
    args: [eleID, type, offsetHeight + 10],
    func: (...args) => scrollToTarget(...args),
  });
});