React开发Chrome扩展调用chrome.runtime.getURL()遇crbug/1173575错误求助

使用React开发Chrome扩展时，点击弹窗按钮打开指定页面的新窗口，出现crbug/1173575, non-JS module files deprecated.错误，页面显示异常。移除createData中的url参数错误消失，但无法打开指定页面。当前核心代码如下：

/*global chrome*/
import './App.css';
import React, { Component, useEffect, useRef } from 'react';

let createData = {
  //type: 'panel',
  width: 350,
  height: 500,
  url: chrome.runtime.getURL('./src/newPage.html')
}

function App() {

  const ref = useRef(null);

  useEffect(() => {
    const handleClick = event => {

      let creating = chrome.windows.create(createData);
      creating.then(() => {
        console.log("The detached panel has been created");
      })
    };

    const element = ref.current;

    element.addEventListener('click', handleClick);

    return () => {
      element.removeEventListener('click', handleClick);
    }
  }, []);

  return (
    <body>
      <div>
        <h1>Tester Extension</h1>
      </div>

      <div>
        <button ref={ref}>Click</button>
      </div>
    </body>
  );

export default App;

解决方案 #

• 检查manifest.json资源访问权限：确保newPage.html及其依赖资源在web_accessible_resources中声明，Chrome需明确允许扩展内部资源被外部窗口访问。示例配置：

"web_accessible_resources": [
  {
    "resources": ["newPage.html", "static/js/*.js", "static/css/*.css"],
    "matches": ["<all_urls>"]
  }
]

注意路径要匹配实际打包后的文件结构，Create React App打包后资源会在static目录，而非src。

• 调整页面路径：不要直接指向src目录下的源码文件，React打包后src不会被包含在最终扩展包中。将newPage.html放在public目录，此时url改为chrome.runtime.getURL('/newPage.html')。

• 修正React组件DOM结构：组件返回内容不能是<body>标签，改用单个根容器包裹，避免DOM结构异常：

return (
  <div className="app-container">
    <div>
      <h1>Tester Extension</h1>
    </div>
    <div>
      <button ref={ref}>Click</button>
    </div>
  </div>
);

• 检查newPage.html内容：确保页面引入的JS/CSS路径正确，避免使用过时的模块引入方式。如果页面需要加载React内容，应引入打包后的入口JS文件，而非源码文件。

内容的提问来源于stack exchange，提问作者bw13300