时间戳

首页 > 解决方案 > 使用 Chrome 扩展程序覆盖事件

javascript - 使用 Chrome 扩展程序覆盖事件

问题描述

我正在构建一个 Chrome 扩展程序，但在尝试覆盖将运行扩展程序的页面上的一些 JavaScript 事件时遇到了一些麻烦。

我用 HTML 构建了一个样机页面，如下所示：

document.querySelector('#f').onclick = function() {
  document.body.innerHTML += 'you clicked';
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <button id='f'>click me</button>
</body>

</html>

该扩展程序应该更改 onclick 事件。所以这里我们有内容脚本：

document.querySelector('#f').onclick = function() {
  document.body.innerHTML += 'it is the extension';
}

但相反，这两个功能彼此独立执行-innerHTML单击按钮时添加的是you clickedit is the extension. 为什么这两个函数都执行了，我该如何解决这个问题？

提前致谢。

标签： javascripthtmlgoogle-chrome-extension

解决方案

您的脚本在与页面上下文中运行的脚本不同的上下文中运行。

如MDN所述：

内容脚本获得 DOM 的“干净”视图。这表示：

  • 内容脚本看不到页面脚本定义的 JavaScript 变量。
  • 如果页面脚本重新定义了内置 DOM 属性，则内容脚本会看到该属性的原始版本，而不是重新定义的版本

因此，实际上您的代码并没有重新定义onClick属性，而是添加了一个事件侦听器，因此您需要通过将脚本注入<script>元素来使其作为“页面脚本”运行。

使用我为此目的构建的实用程序的可能解决方案：

await runInPageContext(() => {
  document.querySelector('#f').onclick = function() {
    document.body.innerHTML += 'it is the extension';
  }
});

推荐阅读