Chrome 扩展内容脚本自定义 ui

Question

我正在编写一个 chrome 扩展程序，它通过脚本注入在多个网页中显示一些自定义 UI。我注入页面的脚本将一些 Dom 项目附加到文档正文，用户可以与之交互。问题是，项目的样式受到页面 css 的影响。我已经通过在插入到 dom 时将 css 应用于每个项目来解决这个问题。

$('item').css({....});

问题在于，我最终会得到如下所示的大量样式：

$('.item').css({
            '-webkit-box-sizing' : 'border-box',
            'box-sizing' : 'border-box',
            'resize' : 'both',
            'overflow' : 'hidden',
            'position' : 'absolute',
            'padding-top' : '.2em',
            'padding-right' : '.2em',
            'padding-left' : '.2em',
            'padding-bottom' : '.4em',
            'opacity' : '.8',
            'background' : 'rgba(0,0,0,.5)',
            'background-image' : '-webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#111111))',
            'background-image' : '-webkit-linear-gradient(#444444, #111111)',
            'background-image' : 'linear-gradient(#444444, #111111)',
            'border-radius' : '4px',
            'box-shadow' : '3px 2px 4px 1px #111111',
        });
        this.$el.children(".default").css({
            'font-size':'medium',
            '-webkit-box-sizing' : 'border-box',
            'box-sizing' : 'border-box',
            'resize' : 'none',
            'overflow' : 'auto',
            'display' : 'inherit',
            'position' : 'relative',
            'padding' : '.25em',
            'width' : '100%',
            'height' : '90%',
            'background' : '#efefef',
            'border-radius' : '2px',
        });

整个方法都会成为问题，因为：

• 首先：我在此处未应用的任何属性都将通过页面的 CSS 应用于我的项目，这会改变我的元素的样式和可用性。
• 第二：感觉这个方法效率低。
• 第三：我的内容脚本包含 jquery 和其他一些恐怕也会干扰页面和它自己的这些版本

有没有更好的方法来显示这些 dom 元素、注入这些脚本并设置它们的样式？ 我希望尽可能少地与父页面发生冲突。我想出的一个想法是用透明的 iframe 覆盖整个页面并将所有内容注入其中，但我不相信这些项目会显示，因为 iframe 是透明的。

Answer 1

首先，就您对干扰网页 JS 上下文的考虑而言，没有什么可担心的，因为内容脚本位于 isolated world：

独立世界允许每个内容脚本对其 JavaScript 环境进行更改，而不必担心与页面或其他内容脚本发生冲突。例如，内容脚本可以包含 JQuery v1，页面可以包含 JQuery v2，它们不会相互冲突。

独立世界的另一个重要好处是它们将页面上的 JavaScript 与扩展中的 JavaScript 完全分开。这使我们能够为不应从网页访问的内容脚本提供额外的功能，而不必担心网页访问它。

现在，关于样式“干扰”，这是一个实际问题，我可以想到 3 个解决方案：

1. 使用内联元素样式（即您到目前为止所做的）并且： 一种。尝试定义尽可能多的属性或至少是您真正关心的属性（并且对底层 HTML 有意义）。 湾。接受这样一个事实，即您的元素可能会受到 wdbpages CSS 的影响。

2. 使用iframe 嵌入每个元素。这更“安全”，但是，如果最后一个细节的样式不是那么重要，那么这种方法会引入不必要的开销。

3. 有一种（可能是“适当的”）高端方法来利用 Shadow DOM。 （也可以看看这个 tutorial。）