javascript - Chrome 扩展帮助 : Trigger variable CSS from popup. html

Question

好的，我正在构建这样的扩展:

• 有一个调用 popup.html 的 browseraction，它有一个输入字段、一个提交按钮和一个调用 javascript 操作的链接
• 一个 background.html 页面，它通过 popup.html 接收输入值数据，然后使用它们将自定义 CSS 注入(inject)页面

我正在使用 localStorage 存储输入数据以备将来使用。以下是我需要帮助的内容:

1. 在 popup.html 中单击按钮时在 background.html 中运行 javascript(注入(inject) CSS)
2. 将 popup.html 中输入字段的数据传递到 background.html

我搜索了谷歌源代码，但找不到任何东西。我不希望将 CSS 注入(inject)每个页面(我知道该怎么做)或在单击浏览器操作图标时(我也知道该怎么做)。仅当用户将数据输入 popup.html 并单击链接或按钮时，我才需要注入(inject) CSS。

更新: 我仍然无法做我需要做的事情。这是我的代码:

    <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>

那在我的 background.html 页面上。以下是从 popup.html 页面触发的内容:

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

单击按钮时将触发“showGrid”函数。 gridSize 数据已经存储在 localStorage 中(我有 popup.html 的一部分更新以显示 localStorage 信息)。 我究竟做错了什么？我只是想不通。顺便说一句，manifest.json 包括我的 background.html

Answer 1

1. 在弹出窗口中使用 chrome.extension.getBackgroundPage然后在后台页面执行适当的功能。使用 insertCSS 注入(inject)数据或 executeScript
2. 通过函数参数或 localStorage 传递数据，如果您想稍后使用它。

恢复:

// 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", "*://*/*"]

这个例子有效——我已经手动检查过了；)