javascript - Chrome Extension Help: Trigger variable CSS from popup.html -

javascript - Chrome Extension Help: Trigger variable CSS from popup.html -

okay, i'm building extension so:

has browseraction invokes popup.html has input field, submit button, , link invokes javascript action a background.html page receives input value info via popup.html , uses them inject custom css page

i'm using localstorage store input info future use. here's need help with:

run javascript in background.html (which injects css) when button clicked in popup.html passing along info input field in popup.html background.html

i scoured google source code not find anything. i'm not looking inject css every page (i know how that) or when browser action icon clicked (i know how well). need css injected when user inputs info popup.html , clicks on link or button.

updated: i'm still not able need this. here's code:

<script type="text/javascript"> var bgrsize = localstorage.getitem('gridsize'); function insert(){ chrome.tabs.executescript(null, {code:'body{ backgroundimage: -webkit-linear-gradient(#eee 0.05em, transparent 0.05em); backgroundposition: 100% 0 %; backgroundsize: 100% '+ bgrsize +';}'}); } </script>

that's on background.html page. here's fires popup.html page:

function showgrid(){ chrome.extension.getbackgroundpage().insert(); }

the "showgrid" function fires when button clicked. gridsize info stored in localstorage (i have section of popup.html updates show localstorage information). doing wrong? can't figure out. btw, manifest.json includes background.html

in popup utilize chrome.extension.getbackgroundpage , execute proper function in background page. inject info insertcss or executescript pass info thru function parameter or localstorage if want utilize later.

resuming:

// popup.html <script> window.onload = function(){ document.getelementbyid('my-form').addeventlistener('submit', function(){ console.log('popup'); chrome.extension.getbackgroundpage().insert({ param: 'example', input: document.getelementbyid('my-input').value }); }); } </script> <form id="my-form"> <input type="text" id="my-input"/> <input type="submit" /> </form> // background.html function insert(data){ console.log('inserting', data.input); chrome.tabs.insertcss(null, { code: 'a { font-size: ' + data.input + 'px;}' }, function(){ console.log('inserted'); }); } // manifest.js ... "permissions": ["tabs", "*://*/*"]

this illustration works - have checked manually ;)

javascript css google-chrome google-chrome-extension