时间戳

首页 > 解决方案 > Chrome 扩展程序 - 在某些网站上阻止显示“web_accessible_resources”

css - Chrome 扩展程序 - 在某些网站上阻止显示“web_accessible_resources”

问题描述

我正在开发一个用 React 编写的 chrome 扩展，并使用影子 DOM 元素将其自身附加到页面。在里面我正在加载扩展的徽标和内容样式表。

但是，据报道该扩展程序未正确加载，并且已确定来自web_accessible_resources（例如 chrome-extensions://...）的任何资源正在从某些站点（例如https://www.skechers. com/）。

在一个变通方案中，我们最终从我们的 CDN 中提供内容，效果很好。仍然想知道是否有人知道为什么这在一些网站上不起作用。

我还编写了代码来查看它是否会删除样式表，然后加载 CDN 版本，只是为了测试它。

const onStylesLoad = (loaded) => {
    const sheet = loaded.target.sheet
    setTimeout(() => {
      if (!sheet.ownerNode) {
        console.log('FALLBACK', sheet);
        setFallback('https://cdn.***/themes/browserExtension/content.css');
      }
    }, 1000);
}

// And later in the render...

<link rel='stylesheet' type='text/css' onLoad={onStylesLoad} href={browser.runtime.getURL('content.css')} />
{fallback && <link rel='stylesheet' type='text/css' href={fallback} />}

扩展样式表确实会加载，但随后会立即卸载，这就是我稍后能够检测到 ownerNode 为空（onLoad 将其附加到链接）的方式。

我对解决方法很好，只是让我感到厌烦的是，打包任何内容都没有实际意义，因为无论如何我们都将它指向 CDN。

标签： cssgoogle-chromegoogle-chrome-extension

解决方案

如果您想在本地而不是从 CDN 存储 css 文件，您可以缩小 css 文件，然后将它们作为字符串存储在您的 js 文件中，并通过在文档就绪时创建样式元素将它们插入到页面中。我猜他们可能无法引用本地图像，但似乎你无论如何都无法引用

推荐阅读