tjx666 / awesome-chrome-extension-boilerplate

Use react + typescript + webpack to enhance your chrome extension development experience

awesome-chrome-extension-boilerplate's Issues

optimization.splitChunks配置的问题

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

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

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

不考虑支持一下mv3吗

可以，挺有用的

React devtools integration

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

有人想一起交流下Mv3的制作吗

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

请教如何激活react-devtools 还是有问题

先说我其实是使用这个模版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

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

大佬， manifest_version怎么升级到3

close

RT

Vue3 Version

check vue3 brachch: vue3

README 中 git clone 地址修改

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

Uncaught ReferenceError: React is not defined

检查

• 这个问题在 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 中可以看到 报错信息

start 后修改src里面的文件 生成对应的html文件不会添加js 静态资源

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

mv2就要取消支持啦 大佬什么时候能抽空封一个mv3 跪求

如何在VSCode中设置断点来调试React扩展？

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

yarn start下使用antd组件报错

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

yarn build是可以正常使用

请问 devtools extension 控制台插件可以用这个模版开发吗？

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

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

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

能否在脚手架中，将无状态组件修改为有状态组件，方便开发数据管理

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

Manifest V3 Plan

代码分支 manifest-v3。

欢迎试用反馈。

background.js is not executed in the production build

支持 webpack dev server 代理和 API mock

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

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

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

ts 内popup 如何与background通信呢？

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

如何在VSCode中设置断点来调试React扩展？

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

错误提示怎么不满屏提示？

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

引入 antd v4 异常，大佬能否给导入下

大佬 有兴趣搞一个Vue版本的么

开发过程中会提示 Service Worker （无效）然后热更新就无效了

如题，问下 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 仍然有效。