Auto Fill Not Working After URL Change in SPA/PWA

[mean-cj]

Hello @dharmesh-hemaram

It looks like Autofill doesn’t work on websites built with JS frameworks (e.g., Vue/React, SPA/PWA).

In cases when the screen and browser URL change via a JS router—without a full page browser refresh—or when the URL changes using history.pushState() / history.replaceState(), Autofill doesn’t re-run.

Would it be possible to handle history state changes and trigger Autofill again?

I’m not sure if you’re already using events handle like these to re-run Autofill:

window.addEventListener('popstate', (event) => {
  console.log('Navigated to', window.location.href, 'with state', event.state);
});

window.addEventListener('hashchange', () => {
  console.log('URL changed:', window.location.href);
});

// Chrome extension API:
chrome.webNavigation.onHistoryStateUpdated.addListener((details) => {
  // re-run Autofill here
});

chrome.history.onVisited.addListener(function(result) {
  console.log('Visited URL: ' + result.url);
});

Thank you!

[dharmesh-hemaram]

Please refer Dhruv-Techapps/acf-docs#349

[mean-cj]

Hello @dharmesh-hemaram

Today I tested chrome.history.onVisited.addListener() in service_worker.js and found that it can handle cases where the URL address changes. I believe we can use this to trigger Autofill again whenever the URL changes.

This could allow Autofill to support Vue/ReactJS and SPA/PWA sites.

From my latest tests, Autofill doesn’t seem to run when the "URL changes" via history.pushState() or history.replaceState().

[dharmesh-hemaram]

Thanks for sharing your findings! We’ll look into this and see how we can leverage it to improve Autofill support for Vue/ReactJS and SPA/PWA sites.

[mean-cj]

You can also use this method to handle URL changes, but it will track them in more detail.

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if ( changeInfo.status === "complete") {
      console.log("onUpdated", tab.url);
  }
 });

   "permissions": [
      "tabs"
   ],