Question

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

真正奇怪的是，只有满足以下条件，它的延迟才会非常严重：

Chrome正在单独的显示器上运行（例如，我使用Apple LED Cinema Display（27英寸））。奇怪的是，只有我的普通笔记本电脑和办公室笔记本电脑中的每个人都可以正常工作。
输入位于弹出窗口的上半部分（如屏幕的上半部分）
它在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

对于那些仍在为这个问题苦苦挣扎的人，我将重新发布一个我最终找到的已删除答案，它完美地解决了问题即使这是一种解决方法，但是由于该错误是在 2 年前报告的并且没有修复，我们应该学习如何忍受它¯_(ツ)_/¯:

<块引用>

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

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

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

Chrome扩展程序输入滞后

1 个答案: