Chrome擴展程序無法佔用整個窗口寬度

我開發了一個Chrome擴展程序，其格式爲位於用戶窗口頂部的水平條。這件事情，「像」是：Chrome擴展程序無法佔用整個窗口寬度

但它是如何看起來就像當我把它添加到Chrome瀏覽器作爲一個擴展（見右上角的圖標）：

這裏有什麼問題？

這裏的清單：

{ 
    "manifest_version": 2, 

    "name": "CLAWS", 
    "description": "testing", 
    "version": "1.0", 

    "permissions": [ 
    "tabs", 
    "https://google.com.br/" 
    ], 
    "browser_action": { 
    "default_icon": "icone_app.png", 
    "default_popup": "HTML.html" 
    } 
}

編輯：HTML代碼：

<!DOCTYPE html> 
<html> 
<head> 
<link href='CSS.css' rel='stylesheet' type='text/css'> 
</head> 
<body> 

<div id="barra"></div> 

</body> 
</html>

和CSS.css：

#barra{ 
    background-color:red; 
    width:100%; 
    height:80px; 
}

來源

2015-09-11 Mr Guliarte

請發表HTML.html。它創建了自己的窗口，窗口大小與主窗口分開。特別是沒有什麼特別的寬度，所以我的猜測是默認爲最小寬度。 – Teepeemm

對不起，你有什麼意思「有一個特定的寬度」？這是關於擴展窗口？代碼現在在帖子中。 –

彈出窗口是它自己的窗口。所以當#barra指定其寬度爲100％時，它是彈出窗口正文元素的100％。但是沒有任何東西能讓身體達到特定的尺寸。例如，如果我檢查了您的擴展程序的彈出式窗口，則Chrome會告訴我body元素的寬度爲9px，每邊的邊距爲8px（由用戶代理樣式表設置）。你的價值觀可能不同，但它們不會太大。如果你希望它變寬，你需要讓CSS.css明確地告訴主體應該是多寬，而不是使用百分比。

但是，如果你想在用戶窗口的頂部有一個小節，我不確定瀏覽器的動作是否是你想要的。當瀏覽器操作失去焦點時關閉，特別是當用戶與網頁有任何交互時。相反，我認爲你會想要一個內容腳本，將欄放在屏幕的頂部（可能只是一些CSS：body{border-top:80px solid red;}）。

來源

2015-09-11 00:55:47 Teepeemm

感謝您的回答！真的瀏覽器的行動不是我想要的。但我不認爲內容腳本是合適的，因爲我沒有看到用戶正在訪問的頁面的這種複雜的交互（我可能是錯的）。只使用CSS添加欄也不起作用... –

內容腳本是與用戶正在訪問的頁面進行交互的唯一選項。但它並不一定非常複雜。這只是你要執行或用來獲得你想要的效果的腳本或CSS。在這種情況下，一行css或幾行js應該能夠完成工作。儘管這也取決於你想用頂部的紅色條做什麼。 – Teepeemm

嗯，我基本上希望酒吧每次都呆在用戶的窗口頂部，並能夠識別他/她在自己的條形碼中通過javascript選擇的單詞。我在擴展方面是全新手，但如果酒吧有一個更復雜的HTML（不能用CSS「模擬」），我應該如何處理內容腳本（據我所知，只接受JS和CSS代碼）？ –

Chrome擴展程序無法佔用整個窗口寬度

回答

相關問題