Javascript 如何创建向特定站点添加额外信息的Chrome扩展？

我在一个叫做BoardGameArrena的棋盘游戏平台上玩纸牌游戏

现在我想有一个卡片跟踪器助手，它可以告诉我一个名为“Papayoo”的游戏的剩余卡片。整个日志在玩游戏时可用，所以应该是一个非常简单的Chrome扩展，对吗

所有相关操作都发生在页面的右侧：

如果我使用“另存页面为”的“查看页面源代码”，我会看到上面这样的空模板，这有点奇怪，但是

在游戏期间被填充，我可以使用“检查”功能看到条目出现。但是，对于动态填充的字段来说，这可能是意料之中的（我不是web开发人员）

无论如何，下面是我对Chrome扩展的hello world尝试：

manifest.json

{
“名称”：“Papayoo助手”，
“说明”：“BGA平台的Papayoo游戏助手”，
“版本”：“1”，
“清单版本”：2，
“内容脚本”：[
{
“匹配项”：[“http://boardgamearena.com/*/papayoo*“]，
“js”：[“tracker.js”]
}
]
}

游戏的一个示例URL是，所以我假设它应该与我的规则匹配

tracker.js

document.getElementById（“右侧第二部分”）.innerHtml=“Hello world！”+this.innerHtml；

它应该在我的“Hello world！”前面加上现有元素

我通过访问

chrome://extensions/

并选择“装入未包装的物品”

它不工作，因为没有显示任何内容，这会导致以下问题：

如何调试该行为，并查看为何无法加载该行为

如何调整它以自动更新（或至少频繁更新）

我想逻辑应该是一旦扩展本身开始工作，就在

中迭代元素

谢谢

匹配

• 它应该是

  https

  而不是

  http

• 这是一个单页应用程序站点，当您导航时，它不会从服务器重新加载页面，因此您需要在整个站点上运行内容脚本，然后在代码中显式查看更改的URL路径
• 它还应该包括像

  en

  这样的子域，因此我们将添加

  *。

  以匹配主站点及其子域
• 要检测URL中的更改，请参阅

结果:

“匹配项”：[“https://*.boardgamearena.com/*”]

innerHtml

• innerHtml

  应该是

  innerHtml

• 不要使用

  =

  或

  +=

  分配另一个站点的

  innerHTML

  ，因为它会删除从JavaScript附加的所有事件侦听器，从而破坏其功能。而是使用

  insertAdjacentHTML

  或通过document.createElement或一些js库显式构建DOM

要调试，请使用内置的devtools，有很多教程。首先确保内容脚本列在devtools UI中（在这种情况下，由于上面解释的原因，它们不会出现），然后在代码中的某个位置设置断点并重新加载选项卡，查看触发时会发生什么

要重复执行某些操作，可以使用计时器，例如

setInterval

和

setTimeout

。另一种方法是使用

MutationObserver

对站点的更改做出反应