Extract CSS for a given element

extractcss.js

/**
 * Based on work from krasimirtsonev
 *
 * http://krasimirtsonev.com/blog/article/csssteal-chrome-extension-that-extracts-css
 */

// helper function for transforming 
// node.children to Array
function toArray (obj, ignoreFalsy) {
    var arr = [], i;
    for (i = 0; i < obj.length; i++) {
        if (!ignoreFalsy || obj[i]) {
            arr[i] = obj[i];
        }
    }
    return arr;
}

// looping through the styles and matching
function getRules (el) {
    var StyleSheetList = document.styleSheets
      , result = [];
    el.matches = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector || el.oMatchesSelector;
    for (const i in StyleSheetList) {
        /** StyleSheetList instanceof StyleSheetList, list of CSSStyleSheet */
        try {
            const CSSRuleList = [...StyleSheetList[i].cssRules]
            for (const CSSStyleRule in CSSRuleList) {
                if (el.matches(CSSRuleList[CSSStyleRule].selectorText)) {
                    result.push(CSSRuleList[CSSStyleRule]);
                }
            }
        } catch(e) {
            continue;
        }
    }
    return result;
}

// looping through the element's children
function readStyles (els) {
    return [...els].reduce(function readStylesReducer (styles, el) {
        styles.push(getRules(el));
        styles = styles.concat(readStyles(toArray(el.children)));
        return styles;
    }, []);
};

function extractCSS(selector) {
  var elements = document.querySelectorAll(selector);
  var stylesList = readStyles(elements)
  var cssTextArray = []
  for (const CSSRuleList in stylesList) {
    for (const CSSStyleRule in stylesList[CSSRuleList]) {
        const member = stylesList[CSSRuleList][CSSStyleRule]
        // console.log(member)
        cssTextArray.push(member.cssText)
    }
  }
  return cssTextArray.join(`\n`)
}

Usage

<div data-view-service="foo">
<!-- ... -->
</div>

In developer tool console

extractCSS('[data-view-service]'); 

Hmmm... this didn't seem to work on stack overflow's profile page. Any ideas why?

so many duplicate styles, I add this to filter the output before returned:

allTextArray.push(member.cssText); cssTextArray = [...new Set(allTextArray)];