[feat] Option to let a userscript run upon page load via ajax

Normally, userscripts are run when a page is loaded. However, for single page applications (or sites that are partially like that), the model breaks down. Userscripts won’t be run when an user navigates to the appropriate page, typically via some ajax call.

E.g., for github.com, I’d want to create a script to tweak Issues tab (https://github.com/violentmonkey/violentmonkey/issues),

A native way to do so is to create a script that matches the issues’ URL. And it’d work when the browsers loads the page directly. However, it doesn’t work when users navigates to the page from another tab, say, from Code tab to Issues tab.

Currently, to address such cases, userscript developers could try different workarounds that might work for some cases, e.g., observing DOM changes (signaling ajax load), hacking history to observe changes, etc.

It’d be great if ViolentMonkey can reduce such burden.

Thoughts?

---

A rough proposal:

Provide a new meta, say, @runAtWebNavigation. If a script has such meta, ViolentMonkey will try to inject the script when users navigates to another page (usually by ajax).

• From an end user’s perspective, that usually means the URL is changed but there is no full loading of the new page.
• From an userscript developer perspective, he/she can largely write the script without worrying about ajax cases. [*]
• From a technical perspective, ViolentMonkey could possibly catch such events and inject scripts by using extension’s webNavigation API.

[*] Some tweaks might still be needed but considerably easier, e.g., if the script changes a site’s top-level header that remains unchanged after ajax-based navigation, it needs to ensure the changes aren’t applied again.

[tophf]

The userscript should have @run-at document-start for the history hack to be more reliable, otherwise the site may save a reference to the original prototype methods and use them directly. There’s a also a problem of content mode or Greasemonkey4/Firemonkey which use Userscripts API, for which you need wrappedJSObject.

const exportFunc = typeof exportFunction === 'function' ? exportFunction : (fn => fn)
const pageWindow = unsafeWindow.wrappedJSObject || unsafeWindow
const pageHistory = pageWindow.History.prototype
const origPush = exportFunc(pageHistory.pushState, pageWindow)
pageHistory.pushState = exportFunc(function () {
  origPush.apply(this, arguments)
  urlChange()
}, pageWindow)

const origRepl = exportFunc(pageHistory.replaceState, pageWindow)
pageHistory.replaceState = exportFunc(function () {
  origRepl.apply(this, arguments)
  urlChange()
}, pageWindow)

Note however, usually a dummy MutationObserver + url check is sufficient:

let lastUrl;
new MutationObserver(() => {
  if (location.href !== lastUrl) {
    urlChange(lastUrl, location.href);
    lastUrl = location.href;
  }
}).observe(document, {subtree: true, childList: true})

[tophf]

There’s a new standard web API https://web.dev/app-history-api/