Скрипты стилей содержимого Скрипты на страницу

Я работаю над расширением. Пользователь дважды нажимает на определенный термин на странице и получает данные через всплывающее окно боковой панели.
Данные, которые я получаю, отформатированы и хранятся внутри div с именем innerDiv с классом inner-div, который является дочерним элементом div, который добавляется в тело.
Часть js отлично работает, но css этой страницы перезаписывает мой css, а также листы стилей расширения просачиваются на страницу. Это происходит в обоих направлениях.Скрипты стилей содержимого Скрипты на страницу

.inner-div{ 
    position: relative; 
    overflow-y: auto; 
    color: wheat; 
    height: 90%; 
    width: 100%; 
    text-align: justify; 
    font-size: 16px; 
} 

.inner-div p, h1, h2 , h3, article{ 
    margin-bottom: 10px; 
    color: wheat; 
    text-decoration: none; 
    border: none; 
}

Как вы можете видеть, я сохранил свой CSS как можно более конкретный. Таким образом, нет способа, чтобы страница с dom с разными классами наследовала мой css.

Изображение CSS просачивается страницы

Изображение йот элемента и класс

Я не могу понять, почему расширение CSS просачивается в страницу. Пожалуйста помоги!

EDIT:

Изменено название Div быть более точным разгибания внутреннего ДИВ в соответствии с предложениями. Проблема сохраняется.

manifest.json:

{ 
    "manifest_version" : 2, 

    "name" : "QWiki", 
    "description" : "", 
    "version" : "1.0", 

    "browser_action" : { 
     "default_popup" : "Wiki_Viewer.html", 
     "default_title" : "QWiki" 
    }, 

    "content_scripts" : [{ 
     "css": ["inject.css"], 
     "matches": ["http://*/*" , "https://*/*"], 
     "js" : ["jquery.min.js" , "inject.js"] 
    }], 

    "permissions" : [ 
     "activeTab", 
     "https://en.wikipedia.org/*" 
    ] 
}

источник

2017-02-09 user3762742

Попробуйте сделать селектор более конкретным, например '.my-extension-inner-div'. Это больше, но с меньшей вероятностью конфликтует со страницей. – TricksfortheWeb

Я мог бы это сделать, но почему классы конфликтуют, когда они разные. Это тоже некоторые сайты, не все. – user3762742

'.inner-div' довольно общий. Скорее всего, на этих сайтах также есть '.inner-div'. Сайты, которые не имеют этих классов, не затрагиваются. – TricksfortheWeb

Просто врезаться Beslinda N's comment, у меня была эта проблема, и она была решена путем принятия этой рекомендации и удаления моего файла CSS от content_scripts.

Это может сломать часть вашего расширения, хотя, как вы можете захотеть создать нормальные страницы с помощью специального CSS. Чтобы решить эту проблему, я создал два файла CSS, internal.css и external.css. Внутренний файл имел весь стиль для моего popup.html, а внешний имел CSS, который я действительно хотел применить к DOM внутреннего пользователя. Наконец, я упомянул только external.css в content_scripts.

источник

2017-02-19 14:11:24 hughjdavey

Скрипты стилей содержимого Скрипты на страницу

ответ

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