顯示/隱藏DIV Chrome擴展

現在有一個名爲Note Anywhere已經取得的延伸。注意，當您單擊應用程序的圖標粘滯便箋在網頁上顯示時，您可以拖動並將該div放到任何需要的位置。

我試圖做到的，是非常相似的。在

點擊＃2變淡

點擊＃1衰格的div出

我會擔心拖放一旦我能得到真正顯示DIV。我花了超過16個小時試圖達到這個效果，在變得非常激動之後，我不得不編輯我的問題，並再次詢問更新的信息。所以這將不再是一個問題。

這是我的代碼。

清單：

{ 
    "name": "CamDesk", 
    "version": "0.0.1", 
    "description": "The Desktop Webcam Widget", 
    "permissions": ["tabs", "http://*/*", "https://*/*"], 
    "background_page": "background.html", 

    "browser_action": { 
     "default_icon": "images/logo.png", 
     "default_title": "CamDesk" 
    }, 

    "content_scripts": [ { 
     "matches": ["http://*/*", "https://*/*"], 
     "css": ["css/style.css"], 
     "js": ["js/jquery.js", "js/jquery-swfobject.js", "js/background.js"] 
    } ], 

    "icons": { 
     "48": "images/48x48.png", 
     "256": "images/logo.png" 
    } 
}

CSS：

.camdesk { 
    display:none; 
    width:320px; 
    height:240px; 
    background-color:#FFF; 
    box-shadow:0px 4px 16px rgba(0, 0, 0, 0.8); 
    overflow:hidden;}

背景頁：

<html> 
<head> 
<script src="js/background.js"></script> 
</head> 
    <div id="camdesk"> 
     Please install the most recent version of flash to use CamDesk. 
    </div> 
</html>

內容腳本：「以示&隱藏DIV」

$(document).ready(function() { 
    $('.camdesk').flash({ 
     swf: './camdesk.swf', 
     width: 320, 
     height: 240 
    }); 
}); 

chrome.browserAction.onClicked.addListener(getMessage); 
getMessage(); 

function getMessage() { 
    chrome.tabs.getSelected(null, function(tab) { 
     chrome.tabs.sendRequest(null, function(tab) { 
      $('.camdesk').fadeOut(350); 
     }); //getting response from content script 
    }); 
} 

chrome.extension.onRequest.addListener(
    function(sendResponse) { 
    if $('.camdesk').fadeIn(350); 
     $('.camdesk').fadeOut(350); 
    else 
     sendResponse({}); 
    });

來源

2011-07-07 Michael Schwartz

要創建效果，你需要使用Content Scripts。這是您可以操縱訪問網站的DOM的唯一方法。因爲從擴展上下文（瀏覽器操作按鈕）你的到來，你需要使用Message Passing轉移命令來顯示/隱藏到DOM。

所以步驟來實現你需要的東西：

在Background Page
使用chrome.tabs.sendRequest實例化一個chrome.browserAction.onClicked.addListener告訴DOM做什麼。你需要發送一條消息，要求它顯示或隱藏你想要的覆蓋。
使用chrome.extension.onRequest.addListener當您收到一個顯示或擴展隱藏命令，你可以添加/刪除DOM聽從內容腳本延期請求。

希望，讓你輕輕一推！

來源

2011-07-07 23:20:42

我似乎仍然有div不會顯示的問題。我上面發佈了我的代碼。我究竟做錯了什麼？ –

你是誤解背景頁面。後臺頁面只是一個長時間運行的腳本，用於管理任務或狀態。它沒有實現任何視圖。您需要注入另一個自定義內容腳本，用該div來修改您的DOM。然後你可以使用「chrome.tabs.sendRequest」或「chrome.tabs.executeScript」。如果你使用後者，那麼你可以執行代碼'chrome.tabs。executeScript（tab.id，{code：'toggleDiv（）'}）'然後你的上下文腳本將包含允許你切換的方法。 –

這是其中一個答案太糟糕了我只有一個upvote - 謝謝你。 'chrome.tabs.sendRequest'也被棄用;推薦使用'sendMessage'（https://developer.chrome.com/extensions/runtime#method-sendMessage）。 – Ben

顯示/隱藏DIV Chrome擴展

回答

相關問題