Запуск модального сценария контента [дубликат]

Поскольку я недавно прошел перчатку этой проблемы, я хочу поделиться некоторой информацией, которая мне кажется ценной.

Во-первых, ответ Роба верен. Тень DOM - правильное решение этой проблемы. Однако в моем случае мне не только нужна изоляция CSS, но также нужны события JavaScript. Например, что произойдет, если пользователь нажмет кнопку, которая живет в изолированном HTML? Это становится действительно уродливым только с Shadow DOM, но у нас есть другая технология веб-компонентов, Custom Elements, для спасения. За исключением того, что на момент написания этой статьи есть ошибка в chrome, которая предотвращает создание пользовательского элемента в chrome-расширениях. Здесь мои здесь и здесь и здесь есть ошибка .

Итак, где же это остается? Я считаю, что лучшим решением сегодня является IFrames, с которым я и пошел. Статья shahalpk связана велика, но она описывает только часть процесса. Вот как я это сделал:

Сначала создайте html-файл и js-файл для вашего изолированного виджета. Все внутри этих файлов будет работать в изолированной среде в iframe. Не забудьте загрузить файл js из html-файла.

//iframe.js
var button = document.querySelector('.my-button');
button.addEventListener('click', function() {
    // do useful things
});

//iframe.html
<style>
/* css */
</style>
<button class='my-button'>Hi there</button>
<script src='iframe.js'></script> 

Затем внутри вашего скрипта содержимого создайте элемент iframe в javascript. Вам нужно сделать это в javascript, потому что вам нужно использовать chrome.extension.getURL, чтобы захватить ваш файл iframe html:

var iframe = document.createElement('iframe');
iframe.src = chrome.extension.getURL("iframe.html");
document.body.appendChild(iframe);

И все.

имейте в виду: если вам нужно обмениваться информацией между iframe и остальной частью сценария контента, вам нужно выполнить chrome.runtime.sendMessage () на фоновой странице, а затем chrome.tabs.sendMessage с фоновой страницы обратно на вкладку , Они не могут напрямую общаться.

EDIT: я написал сообщение в блоге, в котором подробно описывалось все, что я узнал в моем процессе, включая полное расширение chrome примера и множество ссылок на различную информацию:

https://anderspitman.net/blog/chrome-extension-content-script-stylesheet-isolation/

В случае, если мой блог не работает, вот источники исходного сообщения :

Запись в блоге

Пример источника

Использовать all

.some-selector {
    all: initial;
}

.some-selector * {
    all: unset;
}

или использовать Shadow DOM

Library

function Widget(nodeName, appendTo){
  this.outer = document.createElement(nodeName || 'DIV');
  this.outer.className = 'extension-widget-' + chrome.runtime.id;
  this.inner = this.outer.createShadowRoot();
  (appendTo || document.body).appendChild(this.outer);
}

Widget.prototype.show = function(){
  this.outer.style.display = 'block';
  return this;
};

Widget.prototype.hide = function(){
  this.outer.style.display = 'none';
  return this;
};

Использование

var myWidget = new Widget();
myWidget.inner.innerHTML = '<h1>myWidget</h1>';

Вы можете получить доступ к содержимому виджета через myWidget.inner и внешний через myWidget.outer.

Стили

/* 
 * Reset Widget Wrapper Element 
 */
.extension-widget-__MSG_@@extension_id__ {
  background: none;
  border: none;
  bottom: auto;
  box-shadow: none;
  color: black;
  cursor: auto;
  display: inline;
  float: none;
  font-family : "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  font-size: inherit;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  height: auto;
  left: auto;
  letter-spacing: 0;
  line-height: 100%;
  margin: 0;
  max-height: none;
  max-width: none;
  min-height: 0;
  min-width: 0;
  opacity: 1;
  padding: 0;
  position: static;
  right: auto;
  text-align: left;
  text-decoration: none;
  text-indent: 0;
  text-shadow: none;
  text-transform: none;
  top: auto;
  vertical-align: baseline;
  white-space: normal;
  width: auto;
  z-index: 2147483648;
}

/* 
 * Add your own styles here 
 * but always prefix them with:
 * 
 *   .extension-widget-__MSG_@@extension_id__ 
 *   
 */

.extension-widget-__MSG_@@extension_id__{
  position: fixed;
  top: 100px;
  margin: 0 auto;
  left: 0;
  right: 0;
  width: 500px;
}

.extension-widget-__MSG_@@extension_id__::shadow h1 {
  display: block;
  margin: 0 auto;
  padding: 20px;
  background-color: yellow;
  border: 10px solid green;
  font-size: 20px;
  text-align: center;
}

Недавно я создал 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() {
  // some js after button is clicked.
});

Элементы в #yourDialogID не будут затронуты существующей веб-страницей. И функция find () возвращает регулярный элемент DOM jQuery, чтобы вы могли делать с ним все, что хотите.

Надеюсь, это поможет. Пожалуйста, дайте мне знать, если у вас есть какие-либо вопросы.

https://github.com/liviavinci/Boundary

Во время запроса вопроса единственным вариантом было либо использовать iframes, либо таблицы стилей с очень высокой спецификацией и явно задать все свойства, которые могут повлиять на стили. Последний метод очень громоздкий, потому что всегда будет какое-то свойство, которое вас упускает. Следовательно, единственным используемым методом для выделения таблиц стилей было использование iframes.

Решение этой проблемы - устранение стилей без iframes - Shadow DOM ( с Chrome 25 [/ д2]). Вы можете найти учебник в HTML5 Rocks . Для реального расширения Chrome, использующего Shadow DOM для выделения стилей, см. Экран #Anchors ( здесь ).

Использовать iframes. Это обходной путь, но отлично работает.

Maxime написал на нем статью .