Question

所以..我正在构建一个chrome扩展程序，它包含一个简单的弹出页面，当您单击扩展程序的图标时会出现该页面。该弹出页面包含一些简单的HTML，CSS和JQuery代码。没什么。

JS似乎运行良好，但是当我在JS上进行交互时，CSS悬停，过渡和动画效果非常迟滞了（最长5秒的延迟）外接显示器。

其他所有程序运行都很好，我可以看到Javascript正在按预期执行。就是上面提到的CSS渲染问题。

有趣的是，如果我将相同的浏览器窗口拖到笔记本电脑的本机屏幕上，问题就消失了。一切运行顺利。将同一窗口拖到我的2个外接显示器和Bam中的任何一个上！落后城市...

我已经在朋友的计算机上进行了测试，他有同样的问题。在本机屏幕上运行良好，在外部显示器上运行缓慢。到目前为止，该问题似乎仅在Mac上发生。通过排除过程，我知道问题不是由显示器本身引起的，与视频输入电缆无关。我只能在连接到Macbook Pro（2015年初）和朋友的Macbook Pro（2014年初）的外接显示器上观察到此错误。

我尝试过（但没有帮助）的事情：

通过Chrome设置禁用“硬件加速”
将Chrome恢复为默认设置
监视系统性能（CPU和内存使用率均远低于限制）
监视Chrome Task Manager（扩展程序使用的内存最少，并且延迟测试和非延迟测试之间没有明显的CPU使用差异）
在chrome：// flags中切换一堆设置
切换各种电缆（HTMI，DVI和VGA）

是否想知道是否有人遇到过类似问题？这个怪异的外部监视器滞后问题困扰了我整整一周，我一无所获：（

Github回购到演示项目-> https://github.com/peachteaboba/chrome_extension_bug_demo

-----------------------------更新--------------------- ----

我已查明该错误的根源。显然，如果您在manifest.json中包含background.js文件，则弹出窗口会滞后。如果您不包括后台脚本，那么滞后将消失。

manifest.json（原始版本）

{
  "manifest_version": 2,
  "name": "Chrome Extension Bug Demo v2",
  "description": "Chrome Extension Bug Demo v2",
  "version": "2.00",
  "author": "",
  "browser_action": {
    "default_icon": "images/bug.png",
    "default_title": "Chrome Extension Bug Demo v2",
    "default_popup": "popup.html"
  },
  "chrome_url_overrides": {},
  "permissions": [
    "storage",
    "tabs"
  ],
  "background": {
    "scripts": [
      "js/background.js"
    ]
  },
  "web_accessible_resources": [
    "script.js"
  ],
  "externally_connectable": {
    "matches": [
      "http://*/*",
      "https://*/*"
    ],
    "accept_tls_channel_id": true
  }
}

manifest.json（非延迟版本）

{
  "manifest_version": 2,
  "name": "Chrome Extension Bug Demo v2",
  "description": "Chrome Extension Bug Demo v2",
  "version": "2.00",
  "author": "",
  "browser_action": {
    "default_icon": "images/bug.png",
    "default_title": "Chrome Extension Bug Demo v2",
    "default_popup": "popup.html"
  },
  "chrome_url_overrides": {},
  "permissions": [
    "storage",
    "tabs"
  ],
  "background": {
    "scripts": [
    
    ]
  },
  "web_accessible_resources": [
    "script.js"
  ],
  "externally_connectable": {
    "matches": [
      "http://*/*",
      "https://*/*"
    ],
    "accept_tls_channel_id": true
  }
}

所做的唯一更改是从后台脚本部分中删除了“ js / background.js”。实际的background.js文件为空，因此即使包含此空脚本也将触发chrome错误。

Answer 1

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

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

/**
 * 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,
      ]
    }
  })
}

Answer 2

如果您在双显示器环境中遇到输入延迟问题，这与您的物理窗口大小有关。

不要尝试在您的大显示器上尝试，而是在您的笔记本电脑（您的 MacBook）设备上尝试您的 chrome 扩展程序。您会看到它可以在您的 Mac 上运行，但不能在您连接的大屏幕上运行。

为什么我的Google Chrome浏览器扩展程序的弹出式UI在外部显示器上却不显示，但在笔记本电脑的本机屏幕上却不显示？

-----------------------------更新--------------------- ----

2 个答案: