爲Chrome創建一個類似StumbleUpon的工具欄

如何才能做到這一點？我已閱讀文檔，但我發現我只能使用have icon, a tooltip, a badge, and a popup。我想讓它成爲一個類似StumbleUpon的工具欄。然後我想到了使用ContentScripts，但我不知道在哪裏添加html注入，因爲根據to the documentation我只有js或css的選項。我在這裏錯過了什麼？爲Chrome創建一個類似StumbleUpon的工具欄

我有一個js文件：

$("body").before('<div name="extension-top" id="extension-top"></div>'); 
var top = document.getElementById("extension-top"); 
document.getElementsByTagName('body')[0].style.marginTop = '40px'; 
top.src = chrome.extension.getURL("popup.html");

和css：

#extension-top { width:100%; height:40px; top:0; left:0; background:#000;margin:0;padding:0;}

最後一個html：

<body id="extension-content"> 
    HELLO 
</body>

酒吧顯示出來，但「你好」是不是任何地方都可以看到=/

來源

2011-08-11 Tsundoku

那麼，y你不能只設置一個div的src，並期望它將該url加載到它的主體中。也許iframe會是更好的選擇？

如果你想使用div，那麼你將需要在背景頁面中使用XMLHttpRequest加載popup.html內容，然後將該HTML傳遞給內容腳本並將其注入頁面（彈出窗口不應該有任何body標籤）。 div的另一個缺點是造型會讓你的頸部疼痛，因爲父母網站的風格會干擾你的。

PS。你也不應該在<body>之上注射它。

來源

2011-08-11 14:58:14 serg

一個iframe肯定是要走的路。否則，你將有一個糟糕的時間來設計你的工具欄，而不會影響你正在注入的頁面的CSS並受其影響。 –

它的非常基本的是，你需要注入創建的HTML元素，並將其注入到頁面中的js腳本，

因此，與您正在使用jQuery像

一個簡單的假設

var toolbar = $('<div id="toolbar">My Toolbar</div>').prependTo('body');

來源

2011-08-12 06:18:55 Hailwood

有一個實驗性的Infobar API，可以用來製作一個類似StumbleUpon的工具欄。有關文檔和示例，請參見Infobars。

請注意，在API變穩定之前，您將無法將擴展程序發佈到Chrome網上應用店。

來源

2011-08-17 23:02:09

爲Chrome創建一個類似StumbleUpon的工具欄

回答

相關問題