Chrome 扩展程序引用/调用内容脚本中的其他脚本函数

Chrome Extension referencing/calling other script functions from a content script

本文关键字：脚本 其他 函数 程序 扩展 引用 调用 Chrome      更新时间：2023-09-26

>我有一个内容脚本，里面有很多函数，我希望能够将这些功能拆分成其他脚本

从内容脚本调用其他脚本是否需要任何魔法

我的清单包含两个脚本

"content_scripts": [
  {
    "matches": [
      "*://*/*"
    ],
    "js": [
      "content.js",
      "other.js"
    ]
  }
]

我的内容脚本工作正常

但是，如果我将一个函数放在另一个.js文件中并逐步执行它，我在 other.js 中引用的任何内容都是未定义的

这里有什么我应该知道的吗？

编辑：

这只是一个简单的例子，Test 函数应该在内容脚本加载时运行

内容脚本.js

Test();

其他.js;

function Test(){
  return true;
}

谷歌告诉我未捕获的引用错误，未定义测试

根据内容脚本上的文档：

js：要注入到匹配页面中的 JavaScript 文件列表。它们按照它们在此数组中出现的顺序注入。

在您的情况下，content.js将首先注入并尝试在加载other.js之前执行other的Test()函数）。

请注意，根据您的清单，两个脚本都将在"document_idle"加载，因此即使content.js已注册Test()在加载页面后运行的调用，它仍应立即运行（因为页面已加载。
如果您希望在加载页面内容之前注入脚本，请修改清单：

"content_scripts": {
    ...
    "run_at": "document_start"

只是为了给任何寻找有关其他脚本的答案的人添加更多内容，以及扩展脚本访问的其他方法。

您可以使用 chrome.extension 方法以及 chrome.runtime 通信方法访问扩展的其余脚本。

  1. 若要从扩展中获取所有脚本的数组，可以使用 extension.getViews 方法。

  2. 您还可以使用 getBackgroundPage 方法获取后台脚本或特定背景脚本。

  3. 另一种选择是使用消息传递通过 runtime.sendMessage 方法传递脚本的内容，并使用另一个脚本上的事件侦听器来侦听 runtime.onMessage，允许脚本从发送脚本接收数据。

  4. 除了上一个选项之外，您还可以使用消息传递来接收来自另一个活动扩展的脚本，该扩展通过 runtime.sendMessage 发送，但这次使用带有 runtime.onMessageExternal 的事件侦听器（不能在内容脚本中使用）。

我希望这对某人有所帮助，就像它早些时候对我有帮助一样。

相关文章：