google chrome extension - Be able to load Polymer on any existing page -

i developing extension uses polymer. if polymer exists on page, things start break. trying figure out solid strategy of loading polymer in way doesn't conflict current page's polymer (if 1 exists).

i loading polymer , components such:

  function loadres(res) {     return new promise(       function(resolve, reject) {         var link = document.createelement('link');         link.setattribute('rel', 'import');         link.setattribute('href', res);         link.onload = function() {           resolve(res);         };         document.head.appendchild(link);       });   }    loadres(chrome.extension.geturl("polymer/polymer.html"))    .then( loadres(component1url)) )   .then( loadres(component2url)) )   ... 

in addition, have gulp job obfuscate names of custom elements within extension such:

gulp.task('build:polymer', function(){   gulp.src(polymer)     .pipe(replace('polymer', 'polymer' + app_key))     .pipe(replace('dom-module', 'dom-module-' + app_key))     .pipe(replace('custom-style', 'custom-style-' + app_key))     .pipe(replace('dom-template', 'dom-template-' + app_key))     .pipe(replace('dom-repeat', 'dom-repeat-' + app_key))     .pipe(replace('array-selector', 'array-selector-' + app_key))     .pipe(replace('dom-if', 'dom-if-' + app_key))     .pipe(replace('dom-bind', 'dom-bind-' + app_key))     .pipe(gulp.dest('vendor/polymer')); }); 

i realize ugly last resort type of solution. above works in sites use polymer still cause unexpected issues - suspect due other stuff being bound window.

is there cleaner way of approaching this?

you can use rob dodson code conditionally load polymer in zuperkulblog-progressive. explained @ chrome dev summit 2015 here

// 4. conditionally load webcomponents polyfill if needed browser.  // feature detect need change on time browsers implement  // different features.  var webcomponentssupported = ('registerelement' in document && 'import' in document.createelement('link') && 'content' in document.createelement('template'));    if (!webcomponentssupported) {    var script = document.createelement('script');    script.async = true;    script.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';    script.onload = finishlazyloading;    document.head.appendchild(script);  } else {    finishlazyloading();  }