chrome插件background.js向其他js文件传参

背景

插件的background.js是常驻逻辑，所以会有一些其他js文件被分离出去更好维护，这些js里面的逻辑可能需要tab页面的基本信息，比如页面的id，title，url等，所以需要把这些信息在background.js里面传递到其他js方法里。

逻辑代码

background.js

// 点击插件图标时
chrome.action.onClicked.addListener(function (tab) {
   // 注入脚本并执行 init 方法
   chrome.scripting.executeScript(
    {
      target: { tabId: currentTabId },
      files: ["injectScript.js"], // 首先注入脚本文件
    },
    function () {
      chrome.scripting.executeScript({
        target: { tabId: currentTabId },
        func:(tab)=> init(tab), 
        args:[tab]
      });
    }
  );
}

injectScript.js

function init(tab) {
  console.log("init初始化", tab);
  // 在这里就可以接收到background,js传递过来的tab信息了
  }

可以看到func里面传递了tab参数，args里面也传递了tab参数，两者必须都写，但是直接在background.js里调用方法的时候，就可以不用args传参了。

原因

func 参数的作用

func 是一个你想要在目标页面执行的函数。这个函数在目标页面的上下文中运行，而不是在 background.js 中运行。 因此，这个函数并不能直接访问 background.js 中的变量（如 tab），因为它运行在一个完全独立的执行环境（目标页面的环境）中。

args 参数的作用

args 是传递给 func 的参数数组，chrome.scripting.executeScript 通过 args 把后台环境的变量（如 tab）传递到目标页面的函数中。 args 是唯一能够从 background.js（或 service worker）向目标页面传递数据的方式。你必须通过 args 将数据传递给目标页面执行的 func。

为什么 args 和 init(tab) 传参都要存在？

当你在 background.js 中使用 chrome.scripting.executeScript 时，args 是用来将 tab 等后台数据传递到目标页面的机制。 而 func 函数需要接收这些参数并执行相应的逻辑，因此你必须在 init(tab) 中声明 tab 参数来接收 args 传递过来的数据。