Chrome扩展内容脚本自定义UI

我正在编写一个Chrome扩展，它通过脚本注入在多个网页中显示一些自定义UI。我注入页面的脚本将一些Dom项目附加到文档的主体上，用户可以与其交互。问题是，项目的样式正受到页面CSS的影响。我已经解决了这个问题，大多数情况下，通过将css应用于插入到dom中的每个项目。Chrome扩展内容脚本自定义UI

$('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是透明的。

来源

2013-12-22 aclave1

首先，只要你对与该网页的JS背景干扰的考虑来讲，没有什么可担心的，因为内容的脚本生活在一个isolated world：

隔绝的世界让每一个内容脚本来更改其JavaScript环境，而不用担心与页面或其他内容脚本发生冲突。例如，内容脚本可能包含JQuery v1，页面可能包含JQuery v2，并且它们不会相互冲突。

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

现在，关于造型的“干涉”这是一个实际的问题，这是我能想到的3个解决方案：

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

来源

2013-12-22 08:52:24 gkalpak

所以相对于孤立的世界，我使用chrome.tabs.executeScript（标签，{文件：“”}）执行一个大文件，这在技术上不是一个内容脚本是否正确？这是否也得到了孤立世界的好处？此外，您的选项3几乎是我想要的，并且可能是一个可行的解决方案。我曾经读过一些有关阴影的东西，但直到现在从未看到它的用处。 – aclave1

使用'chrome.runtime.executeScript（）'注入的文件或代码仍然被认为是内容脚本，并且也生活在孤立的世界中（这很容易为自己测试）。我首先通过RobW的** ['Display Anchors' extension]（https://github.com/Rob--W/display-anchors）**（我每天都在使用它）获得Shadow DOM的好评，所以你可以看看一个将“Shadow DOM”概念合并到Chrome扩展中的实例。 – gkalpak

Chrome扩展内容脚本自定义UI

回答

相关问题