I am working on a Chrome extension for my company. For fun, and just because I like easter eggs and I like to work an extra mile to always give a good experience for my users, I thought about replacing the Running Dinosaur game on the offline page by something branded for our company as a fun surprise. I like to develop 2D games sometimes, and I'd have fun doing this.

I migrated the Chrome extension to the manifest v3 recently (I will write a medium article on this as it was quite challenging and I had to find so many hacks to keep our extension working).

I was thinking about using the chrome.scripting.executeScript API. What I tried so far is to add a listener on a new tab opening using this API chrome.tabs.onUpdated.addListener and look for the status: 'complete'. Then use the executeScript this way:

chrome.tabs.onUpdated.addListener((tabId, changes, tab) => {
  if (tab.status === 'complete') {
    if (!navigator.onLine) {
      chrome.scripting.executeScript({
        target: {
          tabId,
        },
        files: [
          '/static/js/easter.js',
        ],
      });
    }
  }
});

In my script for now I just console.log('loaded') to check if my script is properly injected. When I am online, the script loads successfully on the tabs, but when I switch to offline mode (using the developer network tab or actually disconnecting the wifi), the script fails to load and I get this error in the tab's console even though, the host_permissions seems to be configured properly in the manifest.json file:

Unchecked runtime.lastError: Cannot access contents of the page. Extension manifest must request permission to access the respective host.

I am not sure why it throws this error and I was wondering if anybody had the same issue and if you managed to solve this.

Thank you for your help!