Chrome 扩展输入滞后

Question

我正在创建的 Chrome 扩展在弹出窗口中有一个表单。在输入文本区域或输入时，延迟非常严重（每次击键 2-3 秒）。

真正奇怪的是，如果以下情况为真，它只会有一个非常糟糕的滞后：

1. Chrome 在单独的显示器上运行（例如，我使用 Apple LED Cinema Display（27 英寸））。奇怪的是，只有我的普通笔记本电脑和我办公室笔记本电脑中的每个人都可以正常工作。

2. 输入位于弹出窗口的上半部分（如屏幕的上半部分）

3. 它在 MacO 上运行

延迟是由 background.js 脚本引起的，删除 manifest.json 的后台部分可以消除延迟。有谁知道为什么会发生这种情况，以及如何在不删除 background.js 文件的情况下消除延迟？

//index.js

/*global chrome*/
import React, {Fragment, Component} from 'react';
import ReactDOM from 'react-dom'; 

class App extends Component {

    render(){

      return (
        <div className="App">
        <input style={{marginTop: '400px'}} placeholder="I have a horrible lag"></input>
      </div>
      )
    }

}

ReactDOM.render(<App />, document.getElementById('root'));


// manifest.json
{
  "manifest_version": 2,
  "name": "extension",
  "author": "me",
  "version": "1.0.1",
  "description": "description",
  "browser_action": {
    "default_popup": "index.html"
  },
  "background": {
    "scripts": ["background.js"],
    "persistent": false
   },
   "permissions": ["tabs"],

   "web_accessible_resources" : ["*.html"]
}


// background.js
console.log("background.js is running")

我没有收到错误消息。如果我将 '400px' 替换为 '100px' 我不会有延迟

先感谢您

更新：此错误是在https://bugs.chromium.org/p/chromium/issues/detail?id=971701创建的

Answer 1

对于那些仍在为这个问题苦苦挣扎的人，我将重新发布一个我最终找到的已删除的答案，它完美地解决了问题\n尽管这是一个解决方法，但由于该错误是在两年前报告的，并且没有解决办法，我们应该了解如何解决接受它 \xc2\xaf_(\xe3\x83\x84)_/\xc2\xaf:

\n

\n

我们在 usebubbles.com 上的 Chrome 扩展程序的生产过程中遇到了这个问题，并通过在 MacOS 上的辅助显示器上打开时强制重新绘制弹出窗口来解决该问题。

\n

只需将以下内容添加到 popup.html 中包含的 JavaScript 文件的顶部：

\n

\n

/**\n * Temporary workaround for secondary monitors on MacOS where redraws don't happen\n * @See https://bugs.chromium.org/p/chromium/issues/detail?id=971701\n */\nif (\n  // From testing the following conditions seem to indicate that the popup was opened on a secondary monitor\n  window.screenLeft < 0 ||\n  window.screenTop < 0 ||\n  window.screenLeft > window.screen.width ||\n  window.screenTop > window.screen.height\n) {\n  chrome.runtime.getPlatformInfo(function (info) {\n    if (info.os === 'mac') {\n      const fontFaceSheet = new CSSStyleSheet()\n      fontFaceSheet.insertRule(`\n        @keyframes redraw {\n          0% {\n            opacity: 1;\n          }\n          100% {\n            opacity: .99;\n          }\n        }\n      `)\n      fontFaceSheet.insertRule(`\n        html {\n          animation: redraw 1s linear infinite;\n        }\n      `)\n      document.adoptedStyleSheets = [\n        ...document.adoptedStyleSheets,\n        fontFaceSheet,\n      ]\n    }\n  })\n}\n

\n