Я нахожусь в процессе написания расширения Chrome, которое отображает некоторый пользовательский интерфейс на нескольких веб-страницах посредством внедрения скрипта. Сценарий, который я вставляю на страницудобавляет некоторые элементы Dom в тело документа с которым может взаимодействовать пользователь. Проблема в том, что на стили элементов влияет css страницы. Я решил это по большей части, применяя CSS для каждого элемента, как он вставлен в DOM.

$('item').css({....});

Проблема в том, что я получаю огромные блоки стилей, которые выглядят так:

$('.item').css({
            '-webkit-box-sizing' : 'border-box',
            'box-sizing' : 'border-box',
            'resize' : 'both',
            'overflow' : 'hidden',
            'position' : 'absolute',
            'padding-top' : '.2em',
            'padding-right' : '.2em',
            'padding-left' : '.2em',
            'padding-bottom' : '.4em',
            'opacity' : '.8',
            'background' : 'rgba(0,0,0,.5)',
            'background-image' : '-webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#111111))',
            'background-image' : '-webkit-linear-gradient(#444444, #111111)',
            'background-image' : 'linear-gradient(#444444, #111111)',
            'border-radius' : '4px',
            'box-shadow' : '3px 2px 4px 1px #111111',
        });
        this.$el.children(".default").css({
            'font-size':'medium',
            '-webkit-box-sizing' : 'border-box',
            'box-sizing' : 'border-box',
            'resize' : 'none',
            'overflow' : 'auto',
            'display' : 'inherit',
            'position' : 'relative',
            'padding' : '.25em',
            'width' : '100%',
            'height' : '90%',
            'background' : '#efefef',
            'border-radius' : '2px',
        });

Весь этот метод станет проблемой, потому что:

Во-первых: любое свойство, которое я не применяю здесь, применяется к моим элементам css страницы, это меняет стиль и удобство использования моих элементов.Второе: я чувствую, что этот метод неэффективен.В-третьих: мой контент-скрипт содержит jquery и некоторые другие, которые, боюсь, также будут мешать работе страницы и ее собственной версии.

Есть ли лучший способ отобразить эти элементы DOM, внедрить эти сценарии и стилизовать их? Я хотел бы как можно меньше столкновения с родительской страницей. Идея, которую я придумал, заключалась в том, чтобы покрыть всю страницу прозрачным iframe и внедрить в нее все, но я не верю, что элементы будут отображаться, поскольку iframe будет прозрачным.