开发Chrome扩展时弹窗显示小白方块，控制台报错的含义及解决方法？

你控制台触发的是未定义函数类的引用错误，结合弹窗仅显示极小白色方块的现象，原因非常明确：
你编写的所有绘图代码全部依赖p5.js框架的全局API，但扩展文件中从未引入p5.js库文件。浏览器原生JavaScript环境不内置fill()、ellipse()、triangle()、text()、random()、floor()这些绘图方法，脚本执行到第一行代码时就会因为找不到对应函数直接中断，后续所有绘图逻辑都不会运行，最终页面没有任何内容渲染，就会收缩到Chrome扩展弹窗的默认最小尺寸，显示成一块空白白块。

• 绘图逻辑完全依赖p5.js生态，但没有在popup.html中引入对应库文件
• 弹窗页面没有设置固定宽高，无内容填充时会自动收缩到最小显示尺寸
• manifest中配置的content.js和popup的运行逻辑完全无关，不会影响弹窗渲染效果
• 不要尝试用远程CDN链接引入p5.js，Chrome扩展的默认内容安全策略会直接拦截所有外部来源的脚本加载，触发新的CSP合规报错

1. 将p5.js的压缩版本（p5.min.js）下载到扩展本地根目录，和manifest.json放在同一层级
2. 修改popup.html的基础结构，调整后的模板参考：

   <!DOCTYPE html>
   <html>
   <head>
     <!-- 本地引入p5库，必须放在自定义脚本之前 -->
     <script src="p5.min.js"></script>
     <style>
       /* 给弹窗设置固定尺寸，避免缩成空白白块 */
       body {
         margin: 0;
         width: 400px;
         height: 400px;
       }
     </style>
   </head>
   <body>
     <script>
       // 原有绘图逻辑无需改动，p5库加载完成后会自动挂载所有全局方法
       fill(0, 0, 0);
       ellipse(200, 200, 375, 375);
       // ...其余原有占卜逻辑原样保留即可
     </script>
   </body>
   </html>
   

3. 回到Chrome扩展管理页重新加载解压的扩展项目，弹窗就会正常渲染完整的占卜球内容

补充提示：如果直接全局执行p5方法遇到时序类报错，可以把原有绘图逻辑套入p5的setup()函数中，保证画布初始化完成后再执行绘图操作。

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