Изоляция CSS для расширения Chrome

Question

Я создаю расширение для Chrome, которое выполняет инъекцию пользовательского интерфейса с использованием скриптов содержимого.Проблема заключается в том, что, поскольку каждый веб-сайт отличается от других и может пытаться изменить положение определенных элементов (элементов div, списков) и т. Д. По умолчанию, мой интерфейс выглядит по-разному в зависимости от того, на какой странице он используется.

I 'Я пытался использовать YUI reset v3, и это помогло, но не устранило все странности.Кто-нибудь знает еще более агрессивный метод сброса, который делает больше, чем просто очистка полей / отступов и сброс размеров текста?

Заранее спасибо.

Answer 1

У нас была похожая проблема, мы пробовали сброс CSS, а также использовали специальные теги id для элементов и правил CSS, но она никогда не была достаточно надежной ...

Лучшим решением быловставьте элементы в DOM как теневые элементы DOM , которые содержат встроенный стиль.Вы можете прочитать свой CSS-файл с помощью AJAX-запросов и динамически внедрить их в Shadow DOM, просто убедитесь, что они находятся в файлах web_accessible_resources (вы можете использовать подстановочный знак в своей папке CSS).не знакомы с Shadow DOM, вот хороший пример того, как это работает.Может потребоваться немного повторного факторинга с вашей стороны, но это действительно единственное решение, которое работает на 100%.

Answer 2

Я недавно создал 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

Answer 3

стили сброса meyerweb выглядят несколько более агрессивными.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Answer 4

Вот почему вы должны вводить в document_end.Это можно сделать, установив "run_at": "document_end" в манифесте Content Script