想写一个 Chrome 插件应该如何学习 JS

[ggp1ot2]

RT 。

如果目标是写一个稍微复杂一点的 chrome ，应该如何学习 JS 。

或者有没有好一点的学习 JS 路线。

有没有交互式的学习 JS 方式，例如学习 git 的网站 Learn Git Branching 那样。

个人认为很多教程上来就扣定义，什么变量类型、对象、函数之类的，学起来很枯燥。我更喜欢的是在学习中了解如何应用，我之前学习其他语言都是直接 GitHub 找个项目跑起来然后魔改，遇到不会的或者报错去搜解决方案，这样在不断解决 bug 的过程中强化能力。

但是这样有一个问题就是，我只能大概看懂代码，但是无法从 0 去写，例如给我一个 css 样式，我可以去改成任何我想要的，但是让我从 0 写，我却很难完成。

但是 JS 我也尝试在 Python 爬虫 、写 web 页面的时候偶尔用过，也是和上面说的一样，就是别人的模版拿过来，改部分参数，我可以通过面向 stackoverflow 完成，但是现在我想写一个 chrome 插件，貌似要从 0 开始，我很难完成。

不知道有没有什么好的学习方式，如果是啃一个文档或者书的话，我有点抗拒，我更愿意上来就动手！

[viewrules]

https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html

[leedarmau]

https://scrimba.com/dashboard#overview

这是我觉得最好的教程。作为一个从设计转行到前端的人，你可以相信我的推荐

[ggp1ot2]

@leedarmau #2 非常感谢，一般来说，转行朋友推荐的会更加实用一点，因为确实帮助转行了 hhh

[WinkeyLin]

零编程基础，因为想写签到脚本才自学的 JS ，基本就是看别人的项目 + 红宝书（微信读书）+ 谷歌，一边写一边学，再配合 Github Copilot 有奇效🤣

[eason1874]

我开发过好多个 chrome 扩展，基本上用不到什么 JS 高级特性，比写网页简单多了。你只要懂脚本语言的基础就够了，变量、类型、函数、数学运算、逻辑运算 if else

然后了解两件事，一是事件，在什么时候允许什么代码是通过绑定事件来实现；二是异步，也就是 Promise ，扩展操作大多是异步的，就是说返回值不是执行结果，你需要通过回调函数的方式去获得结果，或者用 async/await 语法

chrome 官方文档和例子

https://developer.chrome.com/docs/extensions/mv3/devguide/
https://github.com/GoogleChrome/chrome-extensions-samples

[ggp1ot2]

@eason1874 #5 非常感谢，其实我觉得，不论对于什么编程语言来说，变量、类型、函数、数学运算、逻辑运算 if else 这些基础本质上都一样，无非是表达方式不一样。

但是 js 让我感觉，和很多语言都不一样，我看过一些源码，上来就是 async 之类的

[shiyuu]

我也想写一个 chrome 插件，就是右键选中网页的元素之后可以发送到企业微信
类似 send-to-telegram
https://chrome.google.com/webstore/detail/send-to-telegram-for-goog/dgblfklicldlbclahclbkeiacpiiancc
https://github.com/phguo/Send-to-Telegram-Chrome-extension

[meetalpha]

https://www.youtube.com/playlist?list=PLC3y8-rFHvwg2-q6Kvw3Tl_4xhxtIaNlY
Youtube 上播放量最高的 chrome 扩展开发教程，我看了一遍，确实讲得很好，而且语速也可以不开字幕看。

全程不包含 html css js 语法等基础内容。

涉及知识包括：
chrome 本地存储
选项页
调用通知
右键菜单
设置角标

扩展对特定页面生效
修改页面

如何 debug 扩展

我打算做一个扩展用于 YouTube 增强，YouTube 有些布局和功能，做得不是很友好。