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

Question

我见过一些 WebExtensions 和 Chrome 扩展，它们改变了前端代码并向该网站添加了一些按钮，例如这里的这个：

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

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

Answer 1

除其他外，扩展程序可以定义内容脚本（Chrome docs、MDN docs）。

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

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

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