零web基础想学写浏览器拓展插件,有没有比较系统的课程指南呢?

如题。。。
想做一个符合自己需要的插件。

零基础这个问题我可以解决,我就是带零基础入门的。

扩展我不太会,不过也许影响不大……但是带着非常精确的目标可能不太好学(就是心里想着要砸一个钉子,那看啥都像锤子,这样容易忽略一些东西的本质。

但你也说了想系统学习,大概你也知道这个过程不会太短,并有相应的心理准备。做一些前端入门推荐:

1 Like

可以说说你想要达成的功能?这样能让论坛的各位更好的给你提出建议。

技术上来说,浏览器插件的主要语言基本上就是 JavaScript 了(可能也有 TypeScript)。现在 Chrome 和 Firefox 都在迁移到 Web Extension Manifest v3,各家浏览器都有对应的开发者文档。

组成上来说,浏览器插件大概可以分为以下几个部分(不是具体术语,只是大概描述,基于个人理解):

  • 背景页(可以把插件需要一直运行的脚本放在这里)
  • 交互窗口(例如点击扩展图标出现的窗口,用户能与之交互)
  • 浏览器集成(例如右键菜单,插件图标上的数字提示…)
  • 外部应用程序(可能你的扩展需要一些浏览器本身提供不了的功能,例如和外部下载工具的联动)

课程上可能没有比较系统的教程,但是基本上对着 API 写写改改还是能弄出个能用的东西的。

另外,如果只是想要在页面上实现特定功能,除了浏览器扩展也有其他的道路,例如:

2 Likes

我打算做一个磁贴式书签启动器。

  1. 开机低内存后台运行(外挂程序?),随时双击win键或者其他快捷键触发。

  2. 类似win10磁贴的界面,但收纳的是浏览器书签

  3. 每个网站磁贴可以调节大小,位置,分组,类似win10磁贴。

  4. 可以从浏览器书签批量或者单独导入,导入时可以选择是否包含分类结构

  5. 新增书签时,可以选择是否添加磁贴

  6. 书签删除时,同步删除该磁贴

  7. 也是最难实现的部分,支持rss的页面,在磁贴动态显示rss信息,就像WP8的动态磁贴一样

  1. 开机运行,Chrome 的扩展可以后台运行,关闭浏览器都不关闭程序,能不能快捷键呼出不太清楚。(API 部分我不了解
  2. 界面如果用网页做的话就都归为基础部分了
  3. 同上
  4. 扩展应该可以读取书签内容。如果是独立程序应该也可以
  5. 这个可能做不到,因为浏览器大概没提供对应的 API,但是大概可以借助额外的方式实现(就是换个添加书签的入口,比如添加一个专门的右键菜单
  6. 同 4
  7. 不难,定时读一下 RSS 信息并解析就行了,解析应该有专门的库去做。

不用考虑扩展了. 臣(扩)妾(展)做不到的.

除了阮一峰,還有廖雪峰、張鑫旭,都是挺不錯的前端博主。我有時覺的,看他們的博客就夠了…

哪一点做不到呢?

匿名太麻烦了,每句话都要等审核,不匿名了,我问的问题 (  ̄﹏ ̄)╯

感觉这不是扩展,而是一个独立的桌面端应用程序。

我看好多拓展都能设定快捷键呼出。
应该可以吧

看具体情况,快捷键分应用内快捷键和全局快捷键,显然他需要的是全局快捷键,但是扩展好像用的都是应用内快捷键。

然后如果浏览器关闭,只有后台服务的时候是不是还能快捷键呼出……

这些文档没读过,所以不确定

查了下文档,全局快捷键应该是可以做到的,不过需要浏览器本体是打开状态,如果浏览器关闭了就用不了了。

chrome.commands - Chrome Developers

By default, commands are scoped to the Chrome browser. This means that when the browser does not have focus, command shortcuts are inactive. Beginning in Chrome 35, extension developers can optionally mark a command as “global”. Global commands also work while Chrome does not have focus.

默认情况下,命令(此处指快捷键)是限制在 Chrome 浏览器内的。这意味着如果浏览器失去焦点(不在前台窗口),快捷键不会生效。从 Chrome 35 开始,扩展开发者可以选择将一个命令设定为「全局」。全局命令在 Chrome 没有焦点时依然生效。

1 Like

哈哈,我就是为了写脚本,写扩展学的js,css
写的第一个油猴脚本现在已经有两千多用户了:laughing:

1 Like

之前还真看到一篇文章,不过我不是程序员,不清楚文章质量

1 Like

看起来是能实现的。

  1. 扩展程序可以设置成后台持续运行(background 权限),实际上就是开启自动启动浏览器、关闭浏览器后只是关闭了界面,程序并没有退出 Declare permissions - Chrome Developers
  2. 扩展程序是可以读书签的 bookmarks.getTree() - Mozilla | MDN
  3. 使用 DOM API 是可以做到这些功能的 文档对象模型 (DOM) - Web API 接口参考 | MDN
  4. 同 2,扩展程序提供了读取书签的接口,所以是能做到导入功能的
  5. 扩展程序能在用户创建书签时通知你的代码,这样你就能在用户创建书签后提示用户是否要创建磁贴,所以这个功能也是可以做到的 bookmarks.onCreated - Mozilla | MDN
  6. 扩展程序同样提供了删除书签的通知 bookmarks.onRemoved - Mozilla | MDN
  7. RSS 我不太熟,但是做 RSS 的扩展程序很多,所以我觉得肯定也是能做到的

如果你想要做到这些:

  1. 第一步,学习 JavaScript
  2. 第二步,学习 HTML 和 CSS 基础
  3. 第三步,学习如何用 JavaScript 操作 DOM
  4. 第四步,阅读 Chrome Extension API

这是一个比较漫长的过程,不过只要肯花时间肯定能做到的,加油

3 Likes

chrome官方就有文档,
360也有

我是看这篇学的,, 因为有JavaScript的基础, 所以感觉能看懂
【干货】Chrome插件(扩展)开发全攻略 - 我是小茗同学 - 博客园 (cnblogs.com)

1 Like

推荐一个 Chrome扩展及应用开发 (ituring.com.cn)
零基础,要看的东西很多

1 Like