Fix not loading when navigating from other pages on GitHub v0.2

GitHub uses pjax to speed up page loads. Since this replaces the native
browser navigation flow, it breaks content script loading. Fortunately,
pjax makes it easy for us to detect these synthetic load events, so we
can just process them ourselves.

Link: https://github.com/defunkt/jquery-pjax#reinitializing-pluginswidget-on-new-page-content

2 files changed, 35 insertions, 23 deletions

diff --git a/content.js b/content.js
index 153f5a5..1df4deb 100644
--- a/content.js
+++ b/content.js
@@ -1,23 +1,35 @@
-// ... / NixOS / nixpkgs / pull / <number> / ...
-const number = new URL(window.location.href).pathname.split('/')[4]
+function sprongulate() {
+  // Since GitHub is an SPA, we can't limit ourselves to only loading on
+  // specifically nixpkgs PRs, as synthetic browser navigation doesn't
+  // trigger content script loading. Thus, we have to load on all pages,
+  // and ensure we're on a nixpkgs PR before running.
+  const [, NixOS, nixpkgs, pull, number] = new URL(window.location.href).pathname.split('/')
+  if (NixOS !== 'NixOS' || nixpkgs !== 'nixpkgs' || pull !== 'pull') return
 
-// There are (at the time of writing) two contexts in which the PR
-// number is visible:
-//
-//   1. in the header (following the PR title)
-//   2. sufficiently far down that the header is no longer visible (at
-//   which point the header shrinks and affixes itself to the top of the
-//   page)
-//
-// These are actually two distinct elements, the visibility of which
-// are dependent on your scroll position. They also have completely
-// different (and nondescript) CSS selectors, so instead of looking for
-// them directly, we locate the immediately preceding PR title elements
-// (which do have a common CSS selector), and grab their next sibling.
-for (let node of document.querySelectorAll('.js-issue-title')) {
-  node = node.nextElementSibling
-  const a = document.createElement('a')
-  a.setAttribute('href', `https://nixpk.gs/pr-tracker.html?pr=${number}`)
-  node.replaceWith(a)
-  a.appendChild(node)
+  // There are (at the time of writing) two contexts in which the PR
+  // number is visible:
+  //
+  //   1. in the header (following the PR title)
+  //   2. sufficiently far down that the header is no longer visible (at
+  //   which point the header shrinks and affixes itself to the top of
+  //   the page)
+  //
+  // These are actually two distinct elements, the visibility of which
+  // are dependent on your scroll position. They also have completely
+  // different (and nondescript) CSS selectors, so instead of looking
+  // for them directly, we locate the immediately preceding PR title
+  // elements (which *do* have a common CSS selector), to find them.
+  for (let node of document.querySelectorAll('.js-issue-title')) {
+    node = node.nextElementSibling
+    const a = document.createElement('a')
+    a.setAttribute('href', `https://nixpk.gs/pr-tracker.html?pr=${number}`)
+    node.replaceWith(a)
+    a.appendChild(node)
+  }
 }
+
+// Once on first page load...
+sprongulate()
+
+// ...and once every time there is new page content.
+document.addEventListener('pjax:end', sprongulate)
diff --git a/manifest.json b/manifest.json
index 1fd731c..fbc8ba8 100644
--- a/manifest.json
+++ b/manifest.json
@@ -2,14 +2,14 @@
 	"manifest_version": 2,
 
 	"name": "Refined Nixpkgs",
-	"version": "0.1",
+	"version": "0.2",
 
 	"description": "Improve the experience for Nixpkgs maintainers",
 	"homepage_url": "https://anomalous.eu/projects/refined-nixpkgs",
 
 	"content_scripts": [
 		{
-			"matches": [ "https://github.com/NixOS/nixpkgs/pull/*" ],
+			"matches": [ "https://github.com/*" ],
 			"js": [ "content.js" ],
 			"run_at": "document_end"
 		}