如何從每個頁面的背景頁面運行chrome.tabs.insertCSS？

我想在頁面中添加一個自定義樣式表，而不需要內容腳本。我的CSS是好的，但下面的代碼，使用onUpdated和onCreated事件偵聽器不起作用。的manifest.json如何從每個頁面的背景頁面運行chrome.tabs.insertCSS？

部分：

"permissions": [ 
     "http://www.site_domain.com/*", 
     "tabs"],

background.html :

chrome.tabs.onUpdated.addListener(function (tab) { 
    var tabUrl = tab.url; 
    if (tabUrl.indexOf("site_domain") != -1) { 
     changeBgkColor(); 
    } 
}); 

chrome.tabs.onCreated.addListener(function (tab) { 
    var tabUrl = tab.url; 
    if (tabUrl.indexOf("site_domain") != -1) { 
     changeBgkColor(); 
    } 
}); 

function changeBgkColor(){ 
    chrome.tabs.insertCSS(null, {file:"css/styles.css"}) 
};

來源

2012-03-20 arathunku

我想我找到了一個地方，我的解決方案是...控制檯與錯誤... – arathunku 2012-03-20 21:36:25

chrome.tabs.onCreate必須與chrome.tabs.onCreated替代（用d！）。

解決此問題後，您最好將tabId傳遞給chrome.tabs.insertCSS方法。另外，通過合併事件偵聽器減少代碼重複：

chrome.tabs.onCreated.addListener(do_something); 
chrome.tabs.onUpdated.addListener(function(tabId, info, tab) { 
    if (info.status == 'complete') do_something(tab); 
}); 

function do_something(tab) { 
    var tabUrl = tab.url; 
    if (tabUrl && tabUrl.indexOf("site_domain") != -1) { 
     // changeBgkColour() here: 
     chrome.tabs.insertCSS(tab.id, { 
      file: "css/styles.css" 
     }); 
    } 
}

因爲這些事件在創建標籤後立即調用。每個規則可能必須滿足!important，以防止規則被頁面上的樣式表覆蓋。

據onCreated文件，當事件被觸發的url財產不得設定，在條件這麼加tabUrl &&，以防止可能出現的錯誤。

此外，您的域名檢查不足。 .indexOf('google.com')也將匹配http://stackoverflow.com/q/x/what-is-google.com?。

來源

2012-03-20 21:49:47

我編輯了「onCreate」，而你正在寫答案，對不起。現在它工作正常，但加載完成後tab.url以某種方式未定義，我不能使用indexOf/match。 – arathunku 2012-03-20 22:41:27

@arathunku更新了答案。 ['chrome.tabs.onCreated']（http://code.google.com/chrome/extensions/tabs.html#event-onCreated）的事件監聽器只有一個參數（tab），而['chrome.tabs .onUpdated']（http://code.google.com/chrome/extensions/tabs.html#event-onUpdated）收到3：tabId，updateInfo，標籤。 – 2012-03-20 22:47:37

謝謝！我必須更仔細地閱讀參考資料; / – arathunku 2012-03-21 08:06:14

我幾乎做同樣的Chrome 23（2012年末），並以我看來，

的onCreate不需要了（onUpdated將即使是冷啓動燃煤完美和選項卡未選中）
changeInfo狀態「loading」注入腳本的速度很快，但最終可能會注入兩次，甚至更糟糕，這種方式太早了（它顯示在檢查器中，但大多數規則將被覆蓋該頁面的規則;進口商是強制性的）
with changeInfo status「complete」腳本插入得太晚（有時載入時間較長，這可能會很煩人），但它更穩定，並且由於某種原因它不會在檢查器中顯示。

chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) { 
    if (changeInfo.status === "complete") { 
     chrome.tabs.insertCSS(tabId, {code: "body{border:1px solid red}"}); 
    } 
})

（我真的不知道，如果它是一個答案本身，遺憾的是這篇文章太長是註釋 - 爲URL檢查我自己用，當然正則表達式，但是這已經上面注意到）

來源

2012-11-24 10:55:19 Szabi

如何從每個頁面的背景頁面運行chrome.tabs.insertCSS？

回答

相關問題