我编写了一个Google Chrome扩展程序，弹出一个带有自动完成字段和其自己的样式的对话框，但是有些网站我的CSS完全被破坏了，看起来不太好。
我知道使用iFrames隔离样式的方法，但是在Google Chrome扩展程序中，没有办法以这种方式隔离我的HTML和CSS。另一种方法是将所有东西都包装到一个具有自己id和相对样式的分离div中，我也这样做了，但是似乎在一些具有“硬”标签样式重载或CSS代码中的“！important”指令的网站上无效。
所以，我想知道是否有一种真正便捷的方法来隔离我的样式，还是我的运气不好，在每个网站上超载每一个小的CSS属性以修复一个或另一个样式问题？
顺便说一句：我设置了我的清单以在“document_end”加载所有内容，但我发现它并未应用于每当DOM准备就绪时每次加载的样式表。
#myid {
.all-my-extension-styles ...
}可能会解决这个问题？ - bboydflo最近我经历了这个问题的磨难，我想分享一些我认为有价值的信息。
首先，Rob W的答案是正确的。影子DOM是解决这个问题的正确方法。然而，在我的情况下，我不仅需要CSS隔离，还需要JavaScript事件。例如，如果用户单击存在于隔离HTML内部的按钮会发生什么？只使用Shadow DOM会变得非常丑陋，但是我们还有另一种Web组件技术——自定义元素来拯救。然而，截至本文撰写时，Chrome中存在一个错误，防止自定义元素在Chrome扩展程序中使用。请参见我在此处和此处以及这里的问题。
那么我们该怎么办呢？我认为今天最好的解决方案是IFrames，这也是我采用的方法。shahalpk链接的文章很棒，但它只描述了过程的一部分。以下是我的做法：
首先，为您的隔离小部件创建一个HTML文件和JS文件。这些文件内部的所有内容都将在IFrame中运行。请确保从HTML文件引用JS文件。
//iframe.js
var button = document.querySelector('.my-button');
button.addEventListener('click', function() {
// do useful things
});
//iframe.html
<style>
/* css */
</style>
<button class='my-button'>Hi there</button>
<script src='iframe.js'></script>
接下来，在你的内容脚本中使用JavaScript创建一个iframe元素。你需要在JavaScript中这样做，因为你必须使用chrome.extension.getURL来获取你的iframe HTML文件：
接下來，在你的內容腳本中用JavaScript創建一個iframe元素。你需要在JavaScript中這樣做，因為你必須使用chrome.extension.getURL來獲取你的iframe HTML文件：
var iframe = document.createElement('iframe');
iframe.src = chrome.extension.getURL("iframe.html");
document.body.appendChild(iframe);
就这样了。
需要记住的一件事：如果你需要在iframe和其他内容脚本之间通信，你需要使用chrome.runtime.sendMessage()发送消息到后台页面，然后从后台页面使用chrome.tabs.sendMessage向选项卡发送消息。它们不能直接通信。
编辑：我写了一篇博客文章，详细介绍了我通过这个过程学到的所有内容，包括一个完整的示例chrome扩展程序和许多链接到不同信息的网页:
https://apitman.com/3/#chrome-extension-content-script-stylesheet-isolation
如果我的博客消失了，这里是原始帖子的来源:
all参数.some-selector {
all: initial;
}
.some-selector * {
all: unset;
}
function Widget(nodeName, appendTo){
this.outer = document.createElement(nodeName || 'DIV');
this.outer.className = 'extension-widget-' + chrome.runtime.id;
this.inner = this.outer.createShadowRoot();
(appendTo || document.body).appendChild(this.outer);
}
Widget.prototype.show = function(){
this.outer.style.display = 'block';
return this;
};
Widget.prototype.hide = function(){
this.outer.style.display = 'none';
return this;
};
var myWidget = new Widget();
myWidget.inner.innerHTML = '<h1>myWidget</h1>';
您可以通过 myWidget.inner 访问小部件内容，通过 myWidget.outer 访问外部内容。
/*
* Reset Widget Wrapper Element
*/
.extension-widget-__MSG_@@extension_id__ {
background: none;
border: none;
bottom: auto;
box-shadow: none;
color: black;
cursor: auto;
display: inline;
float: none;
font-family : "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-size: inherit;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: auto;
left: auto;
letter-spacing: 0;
line-height: 100%;
margin: 0;
max-height: none;
max-width: none;
min-height: 0;
min-width: 0;
opacity: 1;
padding: 0;
position: static;
right: auto;
text-align: left;
text-decoration: none;
text-indent: 0;
text-shadow: none;
text-transform: none;
top: auto;
vertical-align: baseline;
white-space: normal;
width: auto;
z-index: 2147483648;
}
/*
* Add your own styles here
* but always prefix them with:
*
* .extension-widget-__MSG_@@extension_id__
*
*/
.extension-widget-__MSG_@@extension_id__{
position: fixed;
top: 100px;
margin: 0 auto;
left: 0;
right: 0;
width: 500px;
}
.extension-widget-__MSG_@@extension_id__::shadow h1 {
display: block;
margin: 0 auto;
padding: 20px;
background-color: yellow;
border: 10px solid green;
font-size: 20px;
text-align: center;
}
我最近创建了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() {
// some js after button is clicked.
});
#yourDialogID中的元素不会受到现有网页的影响。find()函数返回一个常规的jQuery DOM元素，因此您可以对其进行任何操作。
希望这能帮到您。如果您有任何问题，请告诉我。
style="prop:val!important"将具有最高优先级 - 例如，请参见http://jsfiddle.net/rytkL/。 - Rob W