0
我正在嘗試創建一個基本的Chrome擴展,它將工具欄添加到任何網頁的左側。將DOM對象插入任何網頁
我想創建左側的空間,然後我可以填充DOM元素。
我創建使用style.setProperty()空間:
document.body.style.removeProperty("transform");
document.body.style.removeProperty("-webkit-transform");
document.body.style.setProperty("width", "90%", "important");
document.body.style.setProperty("margin-left", "10%", "important");
這造成對最網頁左側的空間,但不是全部。然後我嘗試的元素添加到網頁:
var toolbar = document.createElement("div");
toolbar.style.setProperty("color", "red");
toolbar.style.setProperty("left", "-10%");
toolbar.style.setProperty("top", "0px", "important");
var testText = document.createTextNode("Buttons will go here");
toolbar.appendChild(testText);
document.body.appendChild(toolbar);
這似乎是一個元素添加到網頁的底部,但有一些奇怪的錯誤,以及。在某些網頁中,它不會顯示在底部,有些網頁會多次創建。我幾乎沒有想到如何將它移到我爲它創建的左邊空白處。
我目前調用腳本從eventPage.js文件改變頁面:
chrome.webNavigation.onCompleted.addListener(function (details) {
chrome.tabs.executeScript(details.tabId, {
file: "createSpace.js"
});
});
並最終拿到了我的問題:
- 你可以創建一個保證金中的對象?
- 如何將CSS(移動頁面以創建左手空間)應用於整個網頁?
- 如果您不知道頁面將具有哪些元素(因爲它應該適用於所有元素),您如何選擇將DOM對象放在哪裏?
謝謝你的回答。不幸的是,我需要這個工具欄必須始終可見。我也不確定如何將該HTML代碼添加到網頁中或頁面中我需要添加的頁面位置。我是否會將孩子追加到身體元素? –
我添加了一個函數,應該給你你正在尋找的結果。 – DanielR
感謝您的新代碼。看起來這可能是一個解決方案,但嘗試它時,似乎並沒有實際移動任何頁面。在將它們添加到新的div後,是否需要刪除已存在的子項? –