1

尽管这里有一个基本相同的问答，我还是问这个只是为了看看两年后是否可能产生任何见解。

我一直在开发一个 Chrome 扩展程序，它将自己的 GUI 注入用户访问的每个网站。由于继承，GUI 的外观出现了一个问题：尽管它在大多数页面上运行良好，但在其他页面上却变得不稳定（有时甚至到了崩溃的地步）。

我已经阅读了解决此问题的急需的 CSS 方法，但 Google Chrome 29.0 似乎不支持它。上面列出的问答中的答案实施起来会非常乏味，因为我的 HTML 是动态的、广泛的并且是可扩展的；为了模块化，我试图简化代码，而不是让它变得异常复杂。我的内容脚本做了很多交流（背景和弹出脚本），所以我不确定 iframe 是否实用。（此外，在这种情况下，我在 iframe 方面绝对没有成功。）

可能有人想出了一个我完全忽略的巧妙解决方案吗？是否有这种事情的API？

4

1 回答 1

1

我最近创建了 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

于 2014-10-17T18:15:58.730 回答