check vue3 brachch: vue3

开发一个控制台面板插件需要一个脚本，调用 Chrome API，指定面板的 HTML 内容：

chrome.devtools.panels.create("Font Picker",
                              "FontPicker.png",
                              "Panel.html", // 面板的 HTML 内容
                              function(panel) { ... });

看起来这个模版目前好像不行。如果想要调试插件，可能要在每次修改后重新 build。请问后续会增加这方面的支持吗？或者有什么实现的思路吗？

如题，问下 chatgpt 原因给了一堆原因。直觉让我觉得是有更新了代码导致的无效，但是又感觉没有手段验证。希望能交流一下。
如果需要提供debug项目请告诉我。
ps: 过一段时间（2-5分钟）后 Service Worker 又会有效，没有其间没有进行任何操作。有效后热更新恢复。然后过段时间(2- 3分钟)又无效。

错误原因：

1. 清除缓存：在开发过程中，可能会出现缓存问题。您可以尝试清除浏览器缓存并重新加载扩展程序来查看是否解决了问题。

2. 文件路径错误：确保 Service Worker 注册文件的路径设置正确。请检查注册 Service Worker 的代码，并确保文件路径是正确的。

3. HTTPS 环境：Service Worker 需要在 HTTPS 环境下才能工作。如果您的扩展程序在非 HTTPS 环境下运行，Service Worker 将无效。

4. 范围（Scope）问题：Service Worker 的范围指定了它的作用域。确保 Service Worker 的范围设置正确，以使其包含您想要缓存的资源。

5. 生命周期问题：Service Worker 有自己的生命周期。如果您在 Service Worker 中执行了某些任务，但没有在正确的时间注销或更新 Service Worker，可能会导致它无效。

6. 版本更新问题：如果您对 Service Worker 进行了更改并发布了新的版本，但未正确更新 Service Worker，可能会导致旧的 Service Worker 仍然有效。

我不太明白为什么只有一些库（例如 Material UI、React 和 React Router）可以成功地拆分为单独的代码块。
而其他不能被拆分，从而导致background.js 和 contentScript.js不能立即执行。

此外，我还尝试使用 runtimeChunk 选项来将运行时代码提取到单独的代码块中，但是单独拆分运行时代码，也会导致background.js 和 contentScript.js不能立即执行。

我明白这个问题不是你的项目的问题，而是关于我对 Webpack 的使用理解不够深入。

代码分支 manifest-v3。

欢迎试用反馈。

Hi @tjx666 would like to know if there's any guide or similar to integrate react dev-tools to any chrome extension, ty!

最近一段时间在用这个脚手架开发插件，作为后端开发，很多前端的东西还是很懵逼的；

大佬有没有时间给折腾下开发环境的代理和跨域问题；

目前我的项目卡到这里啦；

插件有报错时，会满屏的错误提示。怎么给取消？

git clone [email protected]:tjx666/awesome-chrome-extension-boilerplate.git xxx
Cloning into 'xxx'...
Warning: Permanently added the RSA host key for IP address '140.82.112.4' to the list of known hosts.
[email protected]: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

使用 git 协议克隆要求权限，建议直接修改成 https 协议；

git clone https://github.com/tjx666/awesome-chrome-extension-boilerplate.git

在popup 定义 var back= chrome.extension.getBackGroundPage();
调用background 的方法出错了，找不到方法
back.test();

检查

• 这个问题在 master 分支存在
• 这个问题在 manifest-v3 分支存在
• 这个问题只在 yarn build 构建的产物中出现，通过 yarn start 构建的产物可以正常工作

基础信息

• 代码分支: master/manifest-v3
• Node 版本: v14.18.2
• Yarn 版本: 1.22.19

报错信息

Uncaught ReferenceError: React is not defined
    at Object.bc2f415eff8759b90940 (popup.js:17:6297)
    at i (popup.js:30:4550)
    at popup.js:30:6176
    at i.O (popup.js:30:4820)
    at popup.js:30:6208
    at popup.js:30:6214

复现步骤

下载项目并build插件

git clone --depth=1 --branch master [email protected]:tjx666/awesome-chrome-extension-boilerplate.git

cd awesome-chrome-extension-boilerplate

yarn install

yarn build

安装插件

• 1.Chrome 浏览器允许「开发者模式」
• 2.「加载已解压的扩展程序」选择 extension 目录

使用插件复现错误

• 1.安装插件后无法查看 popup 页面
• 2.在 popup 中 「右键」选择 「审查弹出内容」的 Console 中可以看到 报错信息

设置断点进行调试比使用Console.log更强大，是否有一种方法来实现它？我在谷歌进行了搜索，但都没有找到有用的信息。

RT

设置断点进行调试比使用Console.log更强大，是否有一种方法来实现它？我在谷歌进行了搜索，但都没有找到有用的信息。

刚接触，但是身边没有人能一起交流的。想知道是否有人对manifest v3感兴趣可以一起交流。
qq 897908053

先说我其实是使用这个模版https://github.com/lxieyang/chrome-extension-boilerplate-react
但看到你在官网有发问怎么激活react-devtools facebook/react#24844
你说你有加react-devtools在每个entry前了，但是不工作，后来你又发了一个commit 5d426a3
看起来是要自己加tag?
一路找到你这里的repo，又找到了这篇: #39
你又说加官网说的加entry，可是上面不是说不能工作了吗?

我自己是照了react官网作:
添加了依赖

加了 'react-devtools' 到每个entry最前面

我是先手动激活专案下的 npx react-devtools
然后跑专案
console出错Uncaught TypeError: hook.sub is not a function

怎么样都修不好啊…请教我还可能漏了什么吗?

问一下这个是webpack那个配置项有问题吗

Uncaught SyntaxError: Unexpected token 'else'
    at Object../node_modules/@ant-design/colors/lib/generate.js

yarn build是可以正常使用

如题，我已经在自己的实践中，在 popup 页面，将无状态组件修改为有状态组件啦，其他的还没有动手修改；