Chrome擴展幫助：從popup.html觸發變量CSS

好吧，我建立一個擴展，像這樣：Chrome擴展幫助：從popup.html觸發變量CSS

具有調用帶有輸入字段popup.html一個browseraction，一個提交按鈕，和調用JavaScript操作的鏈接
經由popup.html接收輸入值數據，然後使用它們來注入自定義CSS到網頁

我使用本地存儲來存儲background.html頁輸入數據供將來使用。這就是我需要幫助：

運行JavaScript的background.html（中注入的CSS），當按鈕被點擊的popup.html
沿着數據從輸入欄，在彈出的傳遞.html到background.html

我搜索了google的源代碼，但找不到任何東西。我不想將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

來源

2012-01-10 antjanus

在彈出的使用chrome.extension.getBackgroundPage然後執行在後臺頁面功能正常。如果您想以後用它來與直通功能參數或localStorage的insertCSS或executeScript
通數據注入數據。

恢復：

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

這個例子工程 - 我已經手動檢查它;）

來源

2012-01-10 17:57:37 hamczu

我仍然有它的麻煩。我在原帖中發佈了我的代碼。我感謝你的幫助，我真的很新。另外，我嘗試了executeScript和insertCSS的變體。行爲沒有變化。 – antjanus 2012-01-10 19:03:55

我的錯誤 - 我使用「executeScript」函數而不是「insertCSS」 - 我已經更新了我的答案。 – hamczu 2012-01-10 19:09:52

謝謝，我最終無法使用你的答案。我不知道爲什麼，它只是不起作用（那是在你更新完整功能的例子之前）。我根據Google找到的示例重寫了擴展，並在popup.html中運行了executeScript。幸運的是，擴展程序足夠簡單並且足夠輕巧，不需要任何非凡的工作！ :) – antjanus 2012-01-10 20:09:12

Chrome擴展幫助：從popup.html觸發變量CSS

回答

相關問題