Jestem w trakcie pisania rozszerzenia chrome, które wyświetla niestandardowy interfejs użytkownika na wielu stronach internetowych za pomocą iniekcji skryptu. Skrypt, który wstrzykuję na stronędołącza niektóre elementy Dom do ciała dokumentu z którym użytkownik może korzystać. Problem polega na tym, że na styl elementów wpływa css strony. Rozwiązałem to w przeważającej części, stosując css do każdego elementu, gdy jest wstawiany do domeny.

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

Problem polega na tym, że kończę na ogromnych blokach stylizacji, które wyglądają tak:

$('.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',
        });

Ta cała metoda stanie się problemem, ponieważ:

Po pierwsze: każda właściwość, której tutaj nie stosuję, jest stosowana do moich elementów przez css strony, zmienia to styl i użyteczność moich elementów.Po drugie: czuję, że ta metoda jest nieefektywna.Po trzecie: Mój skrypt treści zawiera jquery i kilka innych, które, jak się obawiam, będą również kolidować ze stroną i jej własną wersją

Czy jest lepszy sposób na wyświetlenie tych elementów domena, wstrzyknięcie tych skryptów i ich stylizowanie? Chciałbym jak najmniej kolidować ze stroną nadrzędną. Pomysł, który wymyśliłem, polegał na pokryciu całej strony w przezroczystej ramce iframe i wstrzyknięciu w nią wszystkiego, ale nie wierzę, że elementy będą wyświetlane, ponieważ iframe będzie przezroczysta.