Question

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

$('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个解决方案：

使用内联元素样式（即您到目前为止所做的）和：一个。尝试定义尽可能多的属性，你可以或至少你真正关心的那些（并且对底层HTML有意义）。湾接受这样一个事实，即你的元素有可能受到wdbpages CSS的影响。
使用iframe来嵌入每个元素。这更“安全”，但是，如果最后一个细节的样式不那么重要，这种方法会带来不必要的开销。
使用 Shadow DOM 的（可能是“正确的”）高端方法。（请看一下 tutorial 。）

Chrome扩展程序内容脚本自定义ui

1 个答案: