Use extension message port for the communication between content script and extension

[lozy219]

It seems chrome.runtime.sendMessage from a page that's navigating away makes BFCache worse than using message port. Maybe this helps with the issue mentioned in https://github.com/GoogleChrome/web-vitals-extension/issues/117. I'm opening this PR for more discussion.

[tunetheweb]

I assume someone's tested it out? :)

Yes I tested it. Both to check new functionality works, and also that Chrome DevTools bfcache tester no longer complains.

[brendankenny]

Thanks @lozy219!

[tunetheweb]

@lozy219 just saw this post that apparently you worked on: https://developer.chrome.com/blog/bfcache-extension-messaging-changes?hl=en

Does that change this implementation? Do we need to add re-establish code below? I've tried testing with the flags in the article but not getting any complaints.

  // Set up extension message port with the service worker
  let port = chrome.runtime.connect();

  // Re-establish the port connection on bfcache restore
  window.addEventListener('pageshow', (event) => {
    if (event.persisted) {
      // The page is restored from BFCache, set up a new connection.
      port = chrome.runtime.connect();
    }
  });

[tunetheweb]

Note this extension only talks OUT from the page, to the extension service worker, and never the other way around. So maybe that's why it's not complaining and the code doesn't need to change?

[tunetheweb]

Actually I can repeat the failure and see we do need this. PR coming up!