Question

Okay, I’m building an extension like so:

• has a browseraction which invokes a popup.html that has an input field, a submit button, and a link that invokes a javascript action
• a background.html page that receives the input value data via popup.html and then uses them to inject custom CSS into the page

I’m using localStorage to store the input data for future use. Here’s what I need help with:

1. run javascript in the background.html (which injects the CSS) when a button is clicked in the popup.html
2. passing along the data from the input field in the popup.html to background.html

I scoured google source code but could not really find anything. I’m not looking to inject the CSS to every page (I know how to do that) or when the browser action icon is clicked (I know how to do that as well). I need to get that CSS injected only when a user inputs data into the popup.html and clicks on a link or button.

UPDATED:
I’m still not able to do what I need to do with this. Here’s my 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 my background.html page. Here’s what fires from the popup.html page:

    function showGrid(){
 chrome.extension.getBackgroundPage().insert();
}

The “showGrid” function fires when a button is clicked. The gridSize data is already stored in localStorage (I have a section of the popup.html that updates to show the localStorage information).
What am I doing wrong? I just can’t figure it out. Btw, the manifest.json includes my background.html

Answer 1

1. In popup use chrome.extension.getBackgroundPage and then execute proper function in background page. Inject data with insertCSS or executeScript
2. Pass data thru function parameter or localStorage if you want use it 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 example works – I have checked it manually 😉