TSX 文件不会通过清单 v3 default_popup 字段加载（chrome 扩展）

Question

I'm attempting on building a small extension, but I'm having an issue to get the "default_popup" page to load my UI.我正在尝试构建一个小型扩展，但在获取“default_popup”页面以加载我的 UI 时遇到问题。

I have the following manifest.json file:我有以下 manifest.json 文件：

{
  "permissions": ["storage", "tabs"],
  "name": "Chrome plugin for  issues report",
  "description": "A issues report tool as a Chrome plugin",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "./background.js"
  },

  "action": {
    "default_popup": "index.html",
    "default_title": "issue report"
  },
  "icons": {
    "16": "j-icon.png",
    "48": "j-icon.png",
    "128": "j-icon.png"
  }
}

which is direction me as a default UI screen (under default_popup) to my index.html file, which is the following:这是将我作为默认 UI 屏幕（在 default_popup 下）引导到我的 index.html 文件，如下所示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/juno-icon.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>Issue Report</title>
  </head>

  <body>
    <div id="root"></div>
    <script src="index.tsx"></script>
  </body>
  <!-- </html> -->
</html>

notice i'm directing to "index.tsx" file as my script, which is the one that is responsible for running the App.tsx component, which runs all other UI components (.tsx files which work without any issue independently from the extension).请注意，我正在将“index.tsx”文件作为我的脚本，这是负责运行 App.tsx 组件的脚本，该组件运行所有其他 UI 组件（.tsx 文件，它们可以独立于扩展名正常工作).

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter, createBrowserRouter } from 'react-router-dom';


const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(
  <BrowserRouter>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </BrowserRouter>
);
reportWebVitals();

Though, whenever I try to click on the extension's icon, an empty small window opens:但是，每当我尝试单击扩展程序的图标时，都会打开一个空的小 window：

I'm a bit confused.我有点困惑。 I have tried also to place the tag header in different locations, such as in tag, then in tag.. still no work.我也尝试过将标签 header 放在不同的位置，例如在标签中，然后在标签中……仍然没有用。

Any idea as for why it won't load my UI components?知道为什么它不会加载我的 UI 组件吗？

Cheers!干杯!

Answer 1

The issue was that in the beginning I have been giving the extension (load unpacked) the manifest.json folder.问题是一开始我一直在给扩展名（加载解压） manifest.json 文件夹。

Apparently, it seems that after doing npm run build , there's a need to provide it with the build folder which is being created in the project's folder.显然，似乎在执行npm run build之后，需要为其提供在项目文件夹中创建的 build 文件夹。

I hope this helps out for people, as I haven't seen any information about it and I was watching more than 4 different tutorials on the matter.我希望这对人们有所帮助，因为我还没有看到任何关于它的信息，而且我正在观看超过 4 个不同的教程。

Good luck!祝你好运！

TSX 文件不会通过清单 v3 default_popup 字段加载（chrome 扩展）

问题描述

1 个解决方案

解决方案1
0 2022-12-02 12:03:05

TSX 文件不会通过清单 v3 default_popup 字段加载（chrome 扩展）

问题描述

1 个解决方案

解决方案1 0 2022-12-02 12:03:05

解决方案1
0 2022-12-02 12:03:05