我正在编写一个Google Chrome扩展，它在每个页面上运行一个内容脚本。在我的内容脚本中，我向页面注入了一个<div>以及一些<ul>和<li>子元素。我在样式表中为这些元素指定了一些样式。
但是我发现在一些随机的页面上，我的元素会从网页上定义的元素继承样式，因为我没有为我的div指定每个样式属性。
阻止注入元素继承这些样式的最佳方法是什么？
在我看来，我可以：

指定样式表中的每一个样式（例如，通过查看没有干扰时计算的样式），或者
我可以把我的<div>放在<iframe>里面，但是，我必须在我的内容脚本的iframe和源页面之间进行hella消息传递，因为我的iframe src的chrome:// URL和源页面的http:// URL将被视为跨源。

我会选择第一种方法--完全指定所用元素的样式。但这比我想象的要复杂一些。
首先，你必须完整地指定容器元素;然后，对于它的后代，你必须声明它们也应该使用默认值或从它们的父元素继承（直到容器）;最后，你必须指定每个其他元素的外观，以便它们不都是纯span。
相关的API是getComputedStyle和DOM Level 2 Style中的CSSStyleSheet接口，除了width和height之外，您可以使用其中的所有值，默认值应为auto。您还需要下载一个默认样式表。例如Webkit user agent stylesheet，然后可以调用以下函数来创建一个完整的样式表，并将其注入到文档中。
请注意，当您将样式表插入目标文档时，您必须使容器选择器尽可能具体，因为可以想象，网页可能会给予比您的规则更具体的规则。例如，在<html id=a><head id=b><style>#a #b * {weird overrides}</style></head>中，#a #b *比#yourId div具有更高的具体性。但我认为这并不常见。
注意：由于某种原因，Chrome在我加载CSS时会显示错误“加载资源失败”，除非它已经在当前文档的<link>中，所以你也应该在调用此函数的页面中包含html.css。

// CSS 2.1 inherited prpoerties
var inheritedProperties = [
    'azimuth', 'border-collapse', 'border-spacing', 'caption-side',
    'color', 'cursor', 'direction', 'elevation', 'empty-cells',
    'font-family', 'font-size', 'font-style', 'font-variant',
    'font-weight', 'font', 'letter-spacing', 'line-height',
    'list-style-image', 'list-style-position', 'list-style-type',
    'list-style', 'orphans', 'pitch-range', 'pitch', 'quotes',
    'richness', 'speak-header', 'speak-numeral', 'speak-punctuation',
    'speak', 'speech-rate', 'stress', 'text-align', 'text-indent',
    'text-transform', 'visibility', 'voice-family', 'volume',
    'white-space', 'widows', 'word-spacing'];
// CSS Text Level 3 properties that inherit http://www.w3.org/TR/css3-text/
inheritedProperties.push(
    'hanging-punctuation', 'line-break', 'punctuation-trim',
    'text-align-last', 'text-autospace', 'text-decoration-skip',
    'text-emphasis', 'text-emphasis-color', 'text-emphasis-position',
    'text-emphasis-style', 'text-justify', 'text-outline',
    'text-shadow', 'text-underline-position', 'text-wrap',
    'white-space-collapsing', 'word-break', 'word-wrap');
/**
 * Example usage:
       var fullStylesheet = completeStylesheet('#container', 'html.css').map(
           function(ruleInfo) {
               return ruleInfo.selectorText + ' {' + ruleInfo.cssText + '}';
           }).join('\n');
 * @param {string} containerSelector The most specific selector you can think
 *     of for the container element; e.g. #container. It had better be more
 *     specific than any other selector that might affect the elements inside.
 * @param {string=} defaultStylesheetLocation If specified, the location of the
 *     default stylesheet. Note that this script must be able to access that
 *     locatoin under same-origin policy.
 * @return {Array.<{selectorText: string, cssText: string}>} rules
 */
var completeStylesheet = function(containerSelector,
                                  defaultStylesheetLocation) {
  var rules = [];
  var iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  document.body.appendChild(iframe);  // initializes contentDocument
  try {
    var span = iframe.contentDocument.createElement('span');
    iframe.contentDocument.body.appendChild(span);
    /** @type {CSSStyleDeclaration} */
    var basicStyle = iframe.contentDocument.defaultView.getComputedStyle(span);
    var allPropertyValues = {};
    Array.prototype.forEach.call(basicStyle, function(property) {
      allPropertyValues[property] = basicStyle[property];
    });
    // Properties whose used value differs from computed value, and that
    // don't have a default value of 0, should stay at 'auto'.
    allPropertyValues['width'] = allPropertyValues['height'] = 'auto';
    var declarations = [];
    for (var property in allPropertyValues) {
      var declaration = property + ': ' + allPropertyValues[property] + ';';
      declarations.push(declaration);
    }
    // Initial values of all properties for the container element and
    // its descendants
    rules.push({selectorText: containerSelector + ', ' +
                              containerSelector + ' *',
                cssText: declarations.join(' ')});

    // For descendants, some of the properties should inherit instead
    // (mostly dealing with text).
    rules.push({selectorText: containerSelector + ' *',
                cssText: inheritedProperties.map(
                    function(property) {
                      return property + ': inherit;'
                    }).join(' ')});

    if (defaultStylesheetLocation) {
      var link = iframe.contentDocument.createElement('link');
      link.rel = 'stylesheet';
      link.href = defaultStylesheetLocation;
      iframe.contentDocument.head.appendChild(link);
      /** @type {CSSStyleSheet} */
      var sheet = link.sheet;
      Array.prototype.forEach.call(
          sheet.cssRules,
          /** @param {CSSStyleRule} cssRule */
          function(cssRule) {
        rules.push({
            selectorText: containerSelector + ' ' + cssRule.selectorText,
            cssText: cssRule.style.cssText});
      });
    }
    return rules;
  } finally {
    document.body.removeChild(iframe);
  }
};

3条答案

按热度按时间

eyh26e7m1#

赞(0）回复(0）举报 2023-02-01

flvtvl502#

.my-extension-frame {
   all: initial;
   /* style... */
}

更新：我最近不得不重新考虑这个问题，如果网页直接设置元素类型的样式，那将是一场噩梦。我的新方法如下：
1.有一个所有内容都是其子级的基本div。
1.使用通配符样式并执行以下所有操作：还原
1.排除SVG，因为“all：revert”将终止SVG
1.同时重置contenteditable。
scss示例：

@namespace svg "http://www.w3.org/2000/svg";

#mypanel {
   *:not(svg|*) {
      all: revert;
   }

   // tested on chrome and not firefox
   div[contenteditable] {
      -webkit-user-modify: read-write;
      overflow-wrap: break-word;
      -webkit-line-break: after-white-space;
      line-break: after-white-space;
   }
}

uz75evzq3#

我最近创建了Boundary，一个CSS+JS库来解决类似的问题。Boundary创建的元素完全独立于现有网页的CSS。
以创建对话框为例，安装Boundary后，可以在内容脚本中执行此操作

var dialog = Boundary.createBox("yourDialogID", "yourDialogClassName");

Boundary.loadBoxCSS("#yourDialogID", "style-for-elems-in-dialog.css");

Boundary.appendToBox(
    "#yourDialogID",
    "<button id='submit_button'>submit</button>"
);

Boundary.find("#submit_button").click(function() {
  // find() function returns a regular jQuery DOM element
  // so you can do whatever you want with it.
  // some js after button is clicked.
});

yourDialogID中的元素不受现有网页的影响。

希望这对你有帮助。如果你有任何问题请告诉我。
https://github.com/liviavinci/Boundary

css 如何不继承chrome扩展内容脚本中的样式

3条答案

yourDialogID中的元素不受现有网页的影响。

相关问题

热门标签

最新问答