Append style rules created in elements panel to last included CSS file

devtools.html

<script src="devtools.js"></script>

devtools.js

var styleSheets = [];

function addStyleSheet(resource) {
    if (resource.type === 'stylesheet' && resource.url.lastIndexOf('inspector://', 0) === -1) {
        console.log('Add', resource.url);
        styleSheets.push(resource);
    }
}

chrome.devtools.inspectedWindow.getResources(function(resources) {
    console.log('getResources');
    resources.forEach(addStyleSheet);
});

chrome.devtools.inspectedWindow.onResourceAdded.addListener(function(resource) {
    console.log('onResourceAdded', resource.url);
    addStyleSheet(resource);
});

chrome.devtools.inspectedWindow.onResourceContentCommitted.addListener(function(resource, content) {
    if (resource.url.lastIndexOf('inspector://', 0) === -1)
        return;

    if (styleSheets.length === 0)
        return;

    var lastStyleSheet = styleSheets[styleSheets.length - 1];
    lastStyleSheet.getContent(function(oldContent) {
        lastStyleSheet.setContent(oldContent + '\n\n' + content, true);
        resource.setContent('', false);
    });
});

chrome.devtools.network.onNavigated.addListener(function() {
    console.log('onNavigated');
    styleSheets = [];
});

manifest.json

{
    "name": "New styles pipe",
    "version": "1.0.0",
    "description": "Pipe newly created styles to last included CSS file",

    "devtools_page": "devtools.html",

    "manifest_version": 2
}