使用Chrome擴展程序淡出整個頁面

我試圖使用Chrome擴展程序將整個頁面淡入淡出。使用Chrome擴展程序淡出整個頁面

我以將背景變成紅色的例子開始，我嘗試將fadeOut函數添加到主體，但該部分不起作用 - 只有紅色部分變紅。

// Called when the user clicks on the browser action. 
chrome.browserAction.onClicked.addListener(function(tab) { 
    // No tabs or host permissions needed! 
    console.log('Turning ' + tab.url + ' red!'); 
    chrome.tabs.executeScript({ 
    code: 'document.body.style.backgroundColor="red"; document.body.fadeOut();' 
    }); 
});

任何想法？此外，我想弄清楚document.body和$（'body'）之間的區別。我是JavaScript新手，看起來像當我搜索解決方案時（即「如何淡入JavaScript中的整個頁面」），他們使用$（'body'），而鉻擴展代碼使用document.body。我不確定它們是否兼容。謝謝！

來源

2013-08-16 user2461391

您看到的'$'可能是[jQuery庫]（http://jquery.com/）。 – apsillers

事實上，fadeOut不能正常工作，因爲它是一個jQuery方法。嘗試從Chrome控制檯調用它。 – SolarBear

由於您只使用Chrome，因此無需使用jQuery即可完成此操作。

更改代碼行運行：

document.body.style.backgroundColor="red"; 
document.body.style.transition = "opacity 1s ease-in-out"; 
document.body.style.opacity = 0;

您可以從控制檯窗口中的開發工具試試這個。

來源

2013-08-20 14:27:41 graham

請嘗試$(document.body).fadeOut();。順便說一下，在運行fadeOut（）之前，您必須在您的Content Script中包含jQuery。

來源

2013-08-20 14:02:20 KimKha

使用Chrome擴展程序淡出整個頁面

回答

相關問題