Javascript 在我的内容脚本中调用JS库-WebExtension

我有一个webextension，firefox，但我认为这也适用于chrome，它在

browserAction.onClicked

侦听器上执行（

chrome.tabs.executeScript

，在

background.js

中调用）一个内容脚本。此内容脚本或多或少地使用页面中的一些数据在当前选项卡上创建一个dom元素。这个元素内部有一些html代码，一切都很顺利——只是我试图突出显示它的语法。现在，有几个不同的库可以做到这一点（Prism、HighlightjS、Rainbow和其他一些库）

如果我没有弄错的话，这些库的一般想法是在

div上调用
colorify
或类似的函数，然后使用css表突出显示该语法。我已经尝试了很多方法来将相关的js或css脚本都源代码化到页面上：

例如，
executeScript
以及我的
background.js
中的内容脚本，在这种情况下，我将在
background
声明的
manifest.json
中包含此脚本：

chrome.tabs.executeScript(null, {
  file: "/content_scripts/highlight.pack.js"
});
chrome.tabs.executeScript(null, {
  file: "/content_scripts/my_content_script.js"
});

我还尝试通过清单加载它（这也是我尝试使用css）：

或者更简单地说

window.hljs.initHighlightingOnLoad();
// or
hljs.initHighlightingOnLoad();

或者最简单的是：

hljs.highlightBlock(myDiv);

我的问题的一部分，也是我之所以感到沮丧的原因，是当我打开inspector/debugger时，有时我会看到js文件源代码，但我无法从控制台调用任何函数。而且，css文件似乎从未获得来源

因此，我希望做的基本工作是在我的内容脚本中调用第三方javascript库，并将css表从我的webextension来源到
activeTab
我的内容脚本正在修改中

我应该如何包括图书馆
如何调试内容脚本，以测试如何使用库
因此@Xan在Firefox控制台的内容脚本中使用了一个断点来调试它

我运行了后台脚本，它执行内容脚本
我的清单包含语法高亮显示所需的css。我也可以在这里包含js文件，但我将其添加到
background.js
中，作为我执行的东西（
chrome.tabs.executeScript（）
），这样它只在需要时运行。（否则它将一直运行
在inspectorDebugging选项卡中，我在主内容脚本中放置了一个断点
在断点内，我能够使用控制台调用语法突出显示库，就好像它是一个全局变量一样
从那里我可以测试如何调用脚本等。我最终调用了
highlightjs
的
hljs
对象，没有
窗口
说明符。只需在我的内容脚本中调用：

Rainbow.color(div, function() {
  document.body.appendChild(div);
}
// or 
window.Rainbow.color( //... etc

“我的问题的一部分，也是我为什么感到沮丧的原因，是当我打开inspector/debugger时，有时我会看到js文件的源代码，但我无法从控制台调用任何函数。”默认情况下，您会得到页面上下文，即。控制台上方有一个下拉列表（默认为“顶部”）切换。看看这是否有助于调试。在控制台中，我看到一个下拉列表，但没有“top”，而不是错误和警告。但无论如何，我已经确保所有内容都已选中。我将继续浏览firefox提供的调试器/检查器/和其他工具，感谢当前版本的Chrome链接，它看起来像是哦，对不起，我忘了它是关于firefox的。不用担心！该链接很好，但主要是关于向用户发送消息的这也适用于调用其他内容脚本吗？我无法在控制台中调用任何东西，即使我看到那里的highlight.js。。。
window.hljs.initHighlightingOnLoad();
// or
hljs.initHighlightingOnLoad();

hljs.highlightBlock(myDiv);