Question

我问这个问题，尽管Q＆amp; A here基本相同，只是为了看看两年后是否可能产生任何见解。

我一直致力于Chrome扩展程序，该扩展程序将自己的GUI注入用户访问的每个网站。由于继承，GUI的外观出现了一个问题：虽然它在大多数页面上运行良好，但在其他页面上却很难（有时甚至到了破坏点）。

我已阅读much-needed CSS approach此问题，但Google Chrome 29.0似乎不支持此问题。上面列出的Q＆amp; A中的答案实现起来非常繁琐，因为我的HTML是动态的，广泛的并且意味着可扩展;我正在尝试为模块化简化代码，而不是让它变得非常复杂。我的内容脚本做了很多沟通（背景和弹出脚本），所以我不确定iframe是否实用。（而且，在这种情况下，我对iframe绝对没有成功。）

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

Answer 1

我最近创建了Boundary，一个CSS + JS库来解决这样的问题。边界创建的元素与现有网页的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

Chrome扩展程序：消除内容脚本的CSS继承

1 个答案: