Question

好的，我正在构建一个类似的扩展程序：

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

我正在使用localStorage存储输入数据以备将来使用。这是我需要帮助的地方：

在popup.html中单击按钮时在background.html中运行javascript（注入CSS）
将popup.html中输入字段的数据传递给background.html

我搜索了谷歌源代码，但实际上找不到任何东西。我不打算将CSS注入每个页面（我知道该怎么做）或点击浏览器操作图标（我也知道如何做）。我需要在用户将数据输入popup.html并点击链接或按钮时才注入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

在弹出窗口中使用chrome.extension.getBackgroundPage，然后在后台页面中执行正确的功能。使用insertCSS或executeScript
如果您想稍后使用，请通过函数参数或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", "*://*/*"]

此示例有效 - 我已手动检查过;）

Chrome扩展程序帮助：从popup.html触发变量CSS

1 个答案: