試圖使Chrome擴展程序淡入淡出網頁

我正在嘗試使我的第一個Chrome擴展。基本上，這個想法是製作一個涵蓋每個頁面的彩色過濾器。（我有一個不會變暗的顯示器，所以我想在我訪問的每個站點放置一個半透明的黑色濾鏡。）試圖使Chrome擴展程序淡入淡出網頁

從我的理解中，我可以通過使用「內容腳本」該腳本在每個頁面上執行。這是我的manifest.json：

{ 
    "name": "My First Extension", 
    "version": "1.0", 
    "description": "The first extension that I made.", 
    "browser_action": { 
    "default_icon": "icon.png", 
    "popup": "popup.html" 
    }, 
    "content_scripts": [ 
    { 
     "matches": ["<all_urls>"], 
     "css": ["mystyles.css"], 
     "js": ["contentscript.js"] 
    } 
    ] 
}

我想要做這樣的事情：http://jsfiddle.net/GM2Z6/14/

大，所以，遠遠我已經得到，通過使mystyles.css這樣的：

#cover { 
    height:100%; 
    width:100%; 
    background-color:#000; 
    display:none; 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:99999999; 
}

我已經得到我的contentscript.js看起來像這樣：

$(function(){ 
    $('#cover').fadeTo("fast",0.5); 
});

那麼現在如何讓我的#cover div覆蓋頁面？

來源

2012-02-14 ajwest

一些事情......正如rvmook所說，你沒有包括jQuery，你也從來沒有在頁面中創建div。

下面是一些代碼工作。在css中注意我改變了一些東西......位置現在是「固定的」，否則你的div會滾動頁面，並且允許你點擊div到它下面的元素。現在也依靠內容腳本「run_at」選項來決定何時運行腳本而不是jquery，因爲我不知道jQuery中的document_end是什麼。
manifest.json的

{ 
    "name": "My First Extension", 
    "version": "1.0", 
    "description": "The first extension that I made.", 
    "browser_action": { 
    "default_icon": "icon.png", 
    "popup": "popup.html" 
    }, 
    "content_scripts": [ 
    { 
     "matches": ["<all_urls>"], 
     "css": ["mystyles.css"], 
     "js": ["jquery-1.7.1.min.js","contentscript.js"] , 
     "run_at" : "document_end" 
    } 
    ] 
}

mystyles.css

#cover { 
    height:100%; 
    width:100%; 
    background-color:#000; 
    display:none; 
    position:fixed; 
    top:0; 
    left:0; 
    z-index:99999999; 
    pointer-events:none; 
}

contentscript.js

(function(){ 

    $('<div/>', { 
     id: 'cover' 
    }).appendTo(document.documentElement); 

    $('#cover').fadeTo("fast",0.5); 

})();

來源

2012-02-15 10:32:27 PAEz

看來，你有沒有在你的content_scripts inlcuded的jQuery。即使你注入代碼的網站有jQuery本身，你也無法通過你的擴展訪問它，所以這就是爲什麼它也應該包含在你的content_scripts中。

"content_scripts": [ 
{ 
    "matches": ["<all_urls>"], 
    "css": ["mystyles.css"], 
    "js": ["contentscript.js", "your/path/to/jquery-1.7.1.min.js"] 
}

來源

2012-02-15 08:34:30

試圖使Chrome擴展程序淡入淡出網頁

回答

相關問題