2013-04-26 68 views
0

從我的Chrome擴展程序的任何動態生成內容中,從網站樣式表中刪除任何格式的簡短,快速和有效的方法是什麼?例如,如果我在我的Chrome擴展中使用下面的代碼來生成一個div,那麼網站的樣式表可能會格式化div,所以它比我想要的要長,或者填充比所需要的要多,或者有圓角。我將如何防止這種情況?刪除Chrome擴展程序生成內容的格式化

foo = $("<div/>",{ 
     "class" : "some class", 
     "css" : { 
      "background" : "#000", 
      "height" : "16px", 
      "display" : "none", 
      "opacity" : "0.7", 
      "position" : "absolute", 
      "pointer-events": "none", 
      "z-index": "99999" 
     } 
    }).appendTo("body"); 

回答

1

此問題與Chrome擴展無關;你在擴展的上下文中更容易遇到它,因爲你不知道將要插入哪些頁面。相反,假設您正在構建某種類型的JavaScript小部件,它將新社交網絡的按鈕插入到內容提供商的頁面中。這是一個等價的問題,但你會同意這個問題現在是一個純粹的HTML/CSS問題。

首先,選擇可能不同的類名和元素ID。沒有一個完美的解決方案來解決這個問題,但是你可以選擇其他人不太可能使用的名字,比如yourdomain-main,yourdomain-header等。

其次,使用「reset-CSS」樣式表。 Here是萬維網上的例子之一。通過在此樣式表中明確設置預期格式,「擔心」的「可能格式化div」部分在很大程度上得到了處理,因爲您重置了您關心的每個屬性,所以「可能」幾乎沒有空間。

第三,在你指望的樣式中要非常明確。例如,不要期望div擴展以填充任何可能的空間,請在特定數量的像素中設置特定的寬度。由於上面的唯一性步驟,您可能會成爲適用於大多數樣式的最後一個樣式表,但是如果某件事很重要,請不要忘記!important

最後,爲您的小部件收集一組惡意環境會很有幫助,可能是它們的iframe副本,以便您可以在一個頁面上看到它們,並在開發過程中經常進行測試。

說到iframe,很多社交按鈕都使用iframe來獲得更加孤立的環境。在這些情況下,您會與您的嵌入器失去一些互動性;這是一個折衷。

+0

所以我想沒有簡單的方法來清除所有的格式...好吧謝謝我猜。我會給你這個問題的答案。 – pandavenger 2013-04-30 21:02:14

+0

我發現處理它的最簡單方法是在擴展中包含我自己的CSS工作表,並使用唯一的ID來格式化元素。我可以只格式化我添加的或添加/替換現有元素上的ID以重新格式化它們。 – Darin 2013-05-01 15:08:21

相關問題