Полимер в сценарии содержимого Chrome Extension

Question

Я пытаюсь использовать Polymer в расширении хром. Общая цель состоит в том, чтобы использовать инкапсуляцию стиля, поэтому мои скрипты содержимого изолируются от CSS просматриваемой страницы.

Начиная с пользовательским элементом в моем-element.html

Я использую вулканизацию как так:

vulcanize -o build.html my-element.html 

Если я пытаюсь что-то подобное в моем содержании сценарии:

// content_script.js 
$.get(chrome.extension.getURL('build.html'), function(data) { 
    var html = document.createElement('div'); 
    html.innerHTML = data; 
    document.body.appendChild(html); 

    var custom = document.createElement('my-element'); 
    document.body.appendChild(custom); 
}); 

build.html загружает нормально, но мой-элемент не работает. Он просто создает пустой тег без какого-либо моего теневого содержимого DOM.

я вижу пару потенциальных проблем с тем, что я делаю:

1. Я погрузочные полимерный материал в DIV. Нужно ли его загружать непосредственно в тело? Если да, то как это делается?
2. Я предполагаю, что загрузка build.html с ajax будет работать в первую очередь. Это неверное предположение?

Answer 1

Недавно я создал Boundary, библиотеку CSS + JS для решения таких проблем. Граница создает элементы, которые полностью отделены от CSS существующей веб-страницы.

Возьмите создание диалога, например. После установки Границы, вы можете сделать это в вашем скрипте содержимого

var dialog = Boundary.createBox({ 
    "id": "yourDialogID" 
}); 

Boundary.loadBoxCSS("#yourDialogID", "style-for-elems-in-dialog.css"); 

Boundary.appendToBox(
    "#yourDialogID", 
    "<button id='submit_button'>submit</button>" 
); 

Boundary.find("#submit_button").click(function() { 
    // find() function returns a regular jQuery DOM element 
    // so you can do whatever you want with it. 
    // some js after button is clicked. 
}); 

Элементы внутри #yourDialogID не будут затронуты существующей веб-страница.

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

https://github.com/liviavinci/Boundary

Answer 2

Edit: Хотя метод ниже работает, я не думаю, что я могу рекомендовать его для проектов очень ограничены в объеме, за исключением - цель одного домена или простого виджета.

---

Я думаю, что Chrome блокирует registerElement() расширений вызывает Вас вопросы. Ввод HTML-файла, который затем вызывает polymer.js, кажется, помещает библиотеку в контексте главной страницы, а не в сценарий содержимого.

Вот доказательство концепции я взломал вместе с их учебника:

manifest.json

{ 
    "name": "polymer-test", 
    "version": "0.0.1", 
    "manifest_version": 2, 
    // CSP might be overkill 
    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'", 
    "content_scripts": [ 
     { 
      "js": [ 
       "contentscript.js" 
      ], 
      "matches": [ 
       "<all_urls>" 
      ] 
     } 
    ], 
    "web_accessible_resources": [ 
     "counter.html", 
     "polymer.html", 
     "polymer.js" 
    ] 
} 

contentscript.js

document.body.insertAdjacentHTML('beforeend', '<div>' 
    // polymer.html throws an error w/o layout.html -- not a big deal 
    + '<link rel="import" href="'+chrome.extension.getURL('/polymer.html')+'">' 
    + '<link rel="import" href="'+chrome.extension.getURL('/custom.html')+'">' 
    + '<my-counter counter="1">Points</my-counter>' 
+ '</div>'); 

счетчик.html

<polymer-element name="my-counter" attributes="counter"> 
    <template> 
     <style></style> 
     <div id="label"><content></content></div> 
     Value: <span id="counterVal">{{counter}}</span><br> 
     <button on-tap="{{increment}}">Increment</button> 
    </template> 
    <script> 
     Polymer({ 
      counter: 0, // Default value 
      counterChanged: function() { 
       this.$.counterVal.classList.add('highlight'); 
      }, 
      increment: function() { 
       this.counter++; 
      } 
     }); 
    </script> 
</polymer-element>