改变网站前端的Web扩展/插件

Question

我看过一些WebExtensions和Chrome扩展程序可以更改前端代码，并为该网站添加一些按钮，例如此处：

红色按钮没有LinkedIn功能，它是在添加Chrome扩展程序后出现的。

他们是怎么做到的？有哪些方法可以做到这一点？究竟是什么叫它？

Answer 1

扩展程序可以定义内容脚本（Chrome docs，MDN docs）。

它们是与网页代码一起执行（但不在同一上下文中）的JavaScript代码片段，更重要的是 - 可以访问页面的DOM。

通过修改页面的DOM，他们可以向页面添加UI元素，其事件随后由内容脚本的代码提供服务 - 并且可以在扩展中的任何其他位置触发操作。

请注意，它是扩展程序中唯一可以通过这种方式修改页面的部分。