Chrome 插件卡顿问题处理

最新推荐文章于 2025-04-04 14:40:43 发布

我已经超鬼了

最新推荐文章于 2025-04-04 14:40:43 发布

阅读量1.6k

点赞数 3

分类专栏： Chrome 插件文章标签： css chrome plugin

本文链接：https://blog.csdn.net/weixin_40795574/article/details/113876864

版权

Chrome 插件专栏收录该内容

4 篇文章

订阅专栏

Chrome 插件卡顿问题处理

实际现象
问题具体描述
问题原因
解决办法
具体操作如下

实际现象

相同问题
manifest.json 有 background 会卡顿
在这里插入图片描述
manifest.json 没有 background 正常不卡

问题具体描述

manifest.json 配置中包含 background
插件在 Mac 的外接显示器上使用出现 css 渲染巨大延时导致卡顿（仅 css 渲染延时，dom 结构数据流均已正常改变）
拖拽到原生屏幕上没有问题

问题原因

chromium 内核有 bug 具体原因不明
issue 链接链接不能访问的请看下图

解决办法

issue 截止 2021年2月20日已经存在将近21和月了，还没解决
issue 的评论中有一个临时的解决办法如下（链接需要翻墙，无法访问的看下图）

在这里插入图片描述

具体操作如下

在 popup 对应的 html 中添加下方 help.js 脚本

/**
 * Temporary workaround for secondary monitors on MacOS where redraws don't happen
 * @See https://bugs.chromium.org/p/chromium/issues/detail?id=971701
 */
 // help.js
if (
    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];
        }
    });
}

<!-- popup 对应的 html -->
<!DOCTYPE html>
<html lang="en" style="height: auto;">
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="help.js" ></script>
        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
        <title>ChromePlugin</title>
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
    </body>
</html>