How to create a Chrome extension that adds extra information to a specific site?

Question

I play card games on a board game platform called BoardGameArena.

Now I'd like to have a card tracker-helper that would inform me about the remaining cards for one of the games called "Papayoo". The entire log is available while playing the game so should be a pretty straightforward Chrome extension, right?

All of the relevant action happens on the right side of the page:

<div id="right-side-second-part">
  <div id='logs_wrap'>
    <div id='logs'>
      <div id='seemorelogs'><a id='seemorelogs_btn'href='#' onclick='return false'></a></div>
    </div>
  </div>
</div>

It's a bit weird that I see an empty template like above if I do "View Page Source" of "Save Page As", but the <div id='logs_wrap'> is being populated during the game, and I can see the entries appear using the "Inspect" functionality. But maybe that's expected for the fields that are being populated dynamically (I'm not a web developer).

Anyway, here is my hello world attempt for a Chrome extension:

manifest.json

{
"name":"Papayoo Helper",
"description":"Papayoo game helper for the BGA platform",
"version":"1",
"manifest_version":2,
"content_scripts": [
    {
      "matches": ["http://boardgamearena.com/*/papayoo*"],
      "js": ["tracker.js"]
    }
  ]
}

an example URL of the game is https://boardgamearena.com/7/papayoo?table=122356466 so I assume it should be matched by my rule.

tracker.js

document.getElementById("right-side-second-part").innerHtml = "<div id='tracker'>Hello world!</div>" + this.innerHtml;

and it should prepend my "Hello world!" to the existing element.

I load the extension by visiting chrome://extensions/ and selecting "Load unpacked".

It doesn't work as nothing is displayed, which leads to the following questions:

1. How to debug the behavior and see why it doesn't get loaded?
2. How to adjust it to update automatically (or at least frequently)?

I guess the logic will be simply to iterate elements within <div id='logs'> once the extension itself is working.

Thanks!

Answer 1

1. matches

   • It should be https not http
   • This is a Single Page Application site which doesn't reload pages from server when you navigate so you need to run the content script on the entire site and then watch for the changed URL path explicitly in your code.
   • It should also include the subdomains like en so we'll add *. to match both the main site and its subdomains.
   • To detect the change in URL see this answer

   Result: "matches": ["https://*.boardgamearena.com/*"]

2. innerHtml

   • innerHtml should be innerHTML
   • Don't assign innerHTML of another site using = or += as it removes all the event listeners attached from JavaScript thus breaking its functionality. Instead use insertAdjacentHTML or explicitly build DOM via document.createElement or some js library.

3. To debug, use the built-in devtools, there are many tutorials. First make sure the content scripts are listed in devtools UI (in this case they won't be for reasons explained above) then set a breakpoint in the code somewhere and reload the tab, see what happens when it triggers.

4. To repeatedly do something you can use timers e.g. setInterval and setTimeout. Another approach is to use MutationObserver to react to site's changes.