Question

我有一个 webextension ，firefox，但我认为这也适用于chrome，它执行chrome.tabs.executeScript，在background.js中调用{} { {1}}听众。此内容脚本或多或少使用页面中的一些数据在当前选项卡上创建dom 元素。这个元素里面有一些 html代码，一切都很顺利 - 除了我试图让语法突出显示。现在，有一些不同的库可以做到这一点（Prism，HighlightjS，Rainbow和其他一些）。

如果我没弄错的话，使用这些库的一般想法是在browserAction.onClicked div上调用colorify或某些此类函数，然后使用 css sheet 突出显示该语法。我尝试了很多方法来将相关的 js 或 css 脚本同时输入页面：

，<code>以及executeScript中的内容脚本，在这种情况下，我会在background.js中的background声明中包含此脚本：< / p>

manifest.json

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

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

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

我尝试过简单地让"content_scripts": [ { "matches": ["<all_urls>"], "js": ["content_scripts/highlight.pack.js"], "css" : ["content_scripts/solarized-light.css"] } ],这样的库（通过将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

我的部分问题，以及为什么我气馁，当我打开检查器/调试器时，有时我会看到 js 文件来源，但我赢了无法通过控制台调用任何功能。而且， css 文件似乎永远不会获得。

所以我要做的基础是在我的内容脚本中调用第三方javascript库，并从我的 webextension 中获取css表到window.hljs.initHighlightingOnLoad(); // or hljs.initHighlightingOnLoad();我的内容脚本正在修改。

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

Answer 1

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

我运行后台脚本，执行内容脚本
我的清单包含语法突出显示所需的css。我也可以在这里包含js文件，但是我将它添加到background.js作为我执行的内容（chrome.tabs.executeScript()）所以这样它只在我需要时运行。（否则它会一直运行。
在检查器调试标签中，我在主内容脚本中放置了一个断点
在断点内部，我能够使用控制台调用语法高亮库，就像它是一个全局变量一样。

从那里我可以测试如何调用脚本等。我最终调用了highlightjs的{{1}}对象而没有一个hljs说明符。只需在我的内容脚本中调用：

window

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

1 个答案: