Как я могу содержать стили скрипта содержимого расширенного Chrome?

Я работаю над расширением Chrome, которое вводит некоторые компоненты интерфейса пользовательского интерфейса в страницу.Как я могу содержать стили скрипта содержимого расширенного Chrome?

Компоненты пользовательского интерфейса come from react-mdl. Используя их, я должен включить css file в начало моего проекта.

К сожалению, после ввода на страницу css изменяется шрифт всей страницы.

Есть ли способ ограничить область применения css, используемую react-mdl так, чтобы она не влияла на страницу, в которую я впрыскиваю?

источник

2017-02-06 Brandon

так это происходит только с другими веб-страниц, которые используют реагировать? –

Нет, я ввожу только страницы в одном домене, и ни одна из его страниц не использует React (или какую-либо фреймворк вообще - просто vanilla JS/jquery и css/html) – Brandon

ok, можете ли вы поделиться некоторыми файлами css? возможно, просто используйте пользовательские имена классов, которые, как вы знаете, не будут использоваться где-либо еще –

Я думаю, вы должны использовать API-интерфейс Shadow DOM. Это хорошая практика для тех случаев, когда вам просто нужно добавить компонент пользовательского интерфейса на веб-страницу.

https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom

источник

2017-02-06 17:27:51 Deliaz

спасибо. мне придется немного поиграть с моей конфигурацией webpack, чтобы сделать css-inlining работать правильно, но когда я вставляю весь 'material.css' в тег' style' в корне 'shadow', это отлично работает. – Brandon

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

// my injected code 
window.addEventListener('load',() => { 
    const injectDiv = document.createElement('div') 
    const shadowRoot = injectDiv.attachShadow({ mode: 'open' }) 

    // note inline use of webpack raw-loader, so that the css 
    // file gets inserted as raw text, instead of attached to <head> 
    // as with the webpack style-loader 

    shadowRoot.innerHTML = // just using template string 
     ` 
     <style>${require('raw-loader!app/styles/extension-material.css')}</style> 
     <div id='shadowReactRoot' /> 
     ` 
    document.body.appendChild(injectDiv) 
    ReactDOM.render(
      <App />, 
      // note you have to start your query in the shadow DOM 
      // in order to find your root 
      shadowRoot.querySelector('#shadowReactRoot') 
     ) 
})

Тогда , достаточно точно:

источник

2017-02-06 19:27:02 Brandon

Как я могу содержать стили скрипта содержимого расширенного Chrome?

ответ

Смежные вопросы