chrome extension for displaying related issues inline

[danielroe]

No description provided.

[nickytonline]

I can work on this. I've built out extensions before.

[nickytonline]

Since this is essentially a separate project from the main project @danielroe, can I create a pnpm workspace in this project for the browser extension? For the time being, I'm working off a project on my own account just to get things moving.

[danielroe]

totally up to you! I'm happy with converting this to a workspace

or if you prefer keeping it in a separate repo in your account that's fine too!

[nickytonline]

I think it makes sense to make it a monorepo. I can set that up as part of my PR.

Also, small progress, but I'll work more on this early next week. I've worked on the Refined GitHub browser extension and they run into this issue occasionally as well, but sometimes part of the browser extension breaks because the GitHub UI gets updated. It's just a fact of life for this type of browser extension.

That's a long way of me saying I mount the Vue app in the browser extension just after the issue header. Happy to move it elsewhere, but I think it makes more sense at the top because if there are a lot of comments, it would mean scrolling all the way down to see if there were similar issues.

I've used a <details /> element for the time being as there may be many similar issues, but it could also just be a non-collapsible list. There's a bit of content layout shift as we're injecting our stuff client-side which is why I opted for the <details /> element.

One thing to note is that GitHub.com is a Rails app and they use Turbolinks. This means that if you navigate throughout GitHub and then navigate to an issue page, the browser extension won't load the UI since the DOMContentLoaded event has already fired. This is why we listen to the turbo:load custom event as well.

For hard-reloads of an issue page, initializeApp() gets called when the browser extension loads on the page.

  // Listen for Turbo navigation events
  document.addEventListener('turbo:load', () => {
    console.log('[vitesse-webext] Turbo navigation detected')
    initializeApp()
  })

  // Initial check if we're coming from a full server-side page load
  initializeApp()

Progress is here atm, https://github.com/nickytonline/unsightdotdev-webext, until I create a monorepo branch.

[danielroe]

this is pretty exciting!

I also (locally) have a duplicates endpoint which seems to be very good at actually detecting dupes