Deny load.. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension. IT IS LISTED

Question

I am trying to inject a React Component within an iFrame into the active tab. I'm doing this successfully, but not able to get the CSS to load properly.

I am getting this error:

When I click the link to the /pageInject.css file in the extension directory, it opens in a new tab and the script I have written is there.

I'm fairly certain I have it listed properly for a manifest V3 extension... see below.

{
  "manifest_version": 3,
  "name": "Chrome Extension with React & Webpack",
  "options_page": "options.html",
  "background": { "service_worker": "background.bundle.js" },
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon-34.png"
  },
  "chrome_url_overrides": {
    "newtab": "newtab.html"
  },
  "icons": {
    "128": "icon-128.png"
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*", "<all_urls>"],
      "js": ["contentScript.bundle.js"],
      "css": ["content.styles.css", "pageInject.css"]
    }
  ],
  "devtools_page": "devtools.html",
  "permissions": ["storage"],
  "web_accessible_resources": [
    {
      "resources": ["pageInject.css", "icon-128.png", "icon-34.png"],
      "matches": []
    }
  ]
}

I am trying to do something similar to this article. I downloaded the repo from that post and was able to load it fine. I mirrored the code in my project but am not getting the same result for some reason.

Here's the component that is getting successfully injected into the page (minus css). It looks a little crazy because I'm using redux-persist as well in addition to the Frame library, but the relevant code should be contained within the tag.

/* pageInject.css */
import React from 'react';
import { render } from 'react-dom';

// Redux imports
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import reducers from '../../reducers';
import { persistStore, persistReducer } from 'redux-persist';
import createChromeStorage from 'redux-persist-chrome-storage';
import { PersistGate } from 'redux-persist/integration/react';

import Frame, { FrameContextConsumer } from 'react-frame-component';

import InjectedComponent from './InjectedComponent';

const container = document.createElement('div');
container.id = 'my-extension-root';

const body = document.querySelector('body');

const storage = createChromeStorage(window.chrome, 'sync');

const config = {
  key: 'root',
  storage,
};

const persistedReducer = persistReducer(config, reducers);

let store = createStore(persistedReducer);
let persistor = persistStore(store);

// Ran into issue where injection was recognizing 2 documents and 2 bodies, therefor injecting into chrome extension popup.html as well as the current page.
if (body.id !== 'extPopup') {
  document.body.appendChild(container);
  render(
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        {/* iFrame is necessary to prevent CSS collision. Read more here: https://itnext.io/create-chrome-extension-with-reactjs-using-inject-page-strategy-137650de1f39  */}

        <Frame
          initialContent={}
          head={[
            <link
              type="text/css"
              rel="stylesheet"
              href={chrome.runtime.getURL('pageInject.css')}
            ></link>,
          ]}
        >
          <FrameContextConsumer>
            {({ document, window }) => {
              return (
                <InjectedComponent
                  document={document}
                  window={window}
                  isExt={true}
                />
              );
            }}
          </FrameContextConsumer>
        </Frame>
      </PersistGate>
    </Provider>,
    container
  );
}

Anyone know what I am missing here?