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

Question

我有一个 webextension，firefox，但我认为这也适用于 chrome，它执行（chrome.tabs.executeScript，在 background.js) browserAction.onClicked 侦听器上的内容脚本。此内容脚本或多或少地使用页面中的一些数据在当前选项卡上创建了一个 dom element。这个元素内部有一些 html 代码，一切都运行顺利——除了我试图让它的 语法突出显示 。现在，有几个不同的库可以执行此操作（Prism、HighlightjS、Rainbow 和其他一些库）。

如果我没记错的话，这些库的总体思路是在 <code> div 上调用 colorify 或某些此类函数，然后使用 css sheet 高亮那个语法。我已经尝试了很多方法来获取 both/either 相关的 js 或 css 脚本到页面上:

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

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

我也尝试通过 manifest 加载它（这也是我尝试使用 css):

"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["content_scripts/highlight.pack.js"],
    "css" : ["content_scripts/solarized-light.css"]
  }
],

在任何一种情况下，我都尝试了一些方法将 this/these 库加载到内容脚本中，该内容脚本正在执行上述主要提升（在页面上创建 div）：

我试过简单地让库，例如 Prism 做它的事情（通过将我的 <code> 放在 <pre> 中并给它适当的 className ，甚至从内容脚本中手动调用它：

var Prism = { highlightElement: function() {} };
window.addEventListener('load', () => {var Prism = window.Prism; });

或者更简单地说

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

或最简单的：

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

我的部分问题，也是我气馁的原因，是当我打开 inspector/debugger 时，有时我会看到 js 文件 sourced，但我无法从 console 调用任何函数。而且，css 文件似乎从未获得来源。

所以我想要做的基础是在我的 内容脚本 中调用第三方 javascript 库并获取 css sheet 从我的 webextension 到 activeTab 我的内容脚本正在修改。

我应该如何包含这些库？
如何调试内容脚本，以测试如何使用库？

Answer 1

所以@Xan 帮助我们在 Firefox 控制台的内容脚本中使用断点来调试它。

我运行后台脚本，执行内容脚本
我的 manifest 包含语法高亮显示所必需的 css。我也可以在此处包含 js 文件，但我将其添加到 background.js 作为我执行的内容 (chrome.tabs.executeScript()) 这样一来，如果我需要它，它只是运行。（否则它会一直运行。
在检查器调试选项卡中，我在主要内容脚本中放置了一个断点
在断点内，我能够使用控制台调用语法高亮库，就好像它是一个全局变量一样。

从那里我能够测试如何调用脚本等。我最终调用了 highlightjs 的 hljs 对象 而没有 a window 说明符。只需在我的内容脚本中调用：

hljs.highlightBlock(myDiv);

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

Calling a JS library in my Content Script - WebExtension

javascript

syntax-highlighting

google-chrome-extension

firefox-addon-webextensions