如何将关键事件监听器添加到谷歌文档答案

【问题标题】：How to add key event listener to google docs如何将关键事件监听器添加到谷歌文档
【发布时间】：2021-08-31 14:33:51
【问题描述】：

我正在开发一个禁用退格的 chrome 扩展；它在谷歌文档中不起作用。 https://github.com/tuminzee/disable-backspace

manifest.json

    "name": "Disable Backspace",
    "version": "0.1",
    "manifest_version": 3,
    "description": "A chrome extension which disables backspace key",
    "icons": {
      "128" : "icon128.png",
      "48" : "icon48.png",
      "16" : "icon16.png"
    },
    "content_scripts": [
      {
          "matches": [
            "*://*/*"
          ],
          "js": [
              "main.js"
          ]
      }
    ],
    "permissions": [
      "input"
    ]
  }

main.js

document.addEventListener("keydown", function(event) {
  console.log(event);
  if(event.which == 8 || event.keyCode == 8 || event.code == "Backspace" ){
      event.preventDefault();
  }
});

警告

The page delivered both an 'X-Frame-Options' header and a 'Content-Security-Policy' header with a 'frame-ancestors' directive. Although the 'X-Frame-Options' header alone would have blocked embedding, it has been ignored

如果您有任何与此相关的资源，请分享。提前谢谢你。

screenshot of console

【问题讨论】：

标签： google-chrome-extension google-docs content-security-policy keyevent x-frame-options

【解决方案1】：

该页面同时提供了一个“X-Frame-Options”标头和一个带有“frame-ancestors”指令的“Content-Security-Policy”标头。尽管单独的“X-Frame-Options”标头会阻止嵌入，但它已被忽略

这只是一个警告，javascript 未被阻止。
X-Frame-Options 和 Content-Security-Policy: frame-ancestors ... HTTP 标头执行相同的操作 - 阻止嵌入到未列入白名单的 iframe。
但最后一个更灵活，所以X-Frame-Options obsoletes 赞成Content-Security-Policy: frame-ancestors ... 如果两者都存在。因此出现此警告。 contacts.google.com 发布两个标头以实现浏览器向后兼容性。
由于contacts.google.com 负责这些标头，因此您无能为力。无视就好。

在研究 contacts.google.com 时，我发现它发布了另一个 CSP 标头 - Content-Security-Policy: require-trusted-types-for 'script';：

请检查开发工具中的网络选项卡，您是否观察到此 HTTP 标头以响应 contacts.google.com。

此标头强制使用 Trusted Types API 访问 contacts.google.com 页面上的一些 XSS DOM 易受攻击的接收器。
正如测试显示addEventListener() 是not block，但可能受信任的类型会阻止插入扩展脚本本身。

【讨论】：