Chrome擴展內容腳本自定義UI

我正在編寫一個Chrome擴展，它通過腳本注入在多個網頁中顯示一些自定義UI。我注入頁面的腳本將一些Dom項目附加到文檔的主體上，用戶可以與其交互。問題是，項目的樣式正受到頁面CSS的影響。我已經解決了這個問題，大多數情況下，通過將css應用於插入到dom中的每個項目。Chrome擴展內容腳本自定義UI

$('item').css({....});

與這，我結束了看起來像這樣造型的巨大塊的問題：

$('.item').css({ 
      '-webkit-box-sizing' : 'border-box', 
      'box-sizing' : 'border-box', 
      'resize' : 'both', 
      'overflow' : 'hidden', 
      'position' : 'absolute', 
      'padding-top' : '.2em', 
      'padding-right' : '.2em', 
      'padding-left' : '.2em', 
      'padding-bottom' : '.4em', 
      'opacity' : '.8', 
      'background' : 'rgba(0,0,0,.5)', 
      'background-image' : '-webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#111111))', 
      'background-image' : '-webkit-linear-gradient(#444444, #111111)', 
      'background-image' : 'linear-gradient(#444444, #111111)', 
      'border-radius' : '4px', 
      'box-shadow' : '3px 2px 4px 1px #111111', 
     }); 
     this.$el.children(".default").css({ 
      'font-size':'medium', 
      '-webkit-box-sizing' : 'border-box', 
      'box-sizing' : 'border-box', 
      'resize' : 'none', 
      'overflow' : 'auto', 
      'display' : 'inherit', 
      'position' : 'relative', 
      'padding' : '.25em', 
      'width' : '100%', 
      'height' : '90%', 
      'background' : '#efefef', 
      'border-radius' : '2px', 
     });

這整個方法將成爲一個問題，因爲：

首先：我不在這裏適用的任何財產通過頁面的CSS應用於我的項目，這改變了我的元素的風格和可用性。
第二：我覺得這種方法效率不高。
三：我的內容腳本包含jQuery和其他一些這恐怕也將與頁面干擾，它的這些

自己的版本是否有更好的方式來顯示這些DOM元素，注入這些腳本和樣式？ 我希望儘可能少與父頁面發生衝突。我提出的想法是用透明的iframe覆蓋整個頁面，並將所有內容都注入到這個頁面中，但我不相信這些項會顯示，因爲iframe是透明的。

來源

2013-12-22 aclave1

首先，只要你對與該網頁的JS背景干擾的考慮來講，沒有什麼可擔心的，因爲內容的腳本生活在一個isolated world：

隔絕的世界讓每一個內容腳本來更改其JavaScript環境，而不用擔心與頁面或其他內容腳本發生衝突。例如，內容腳本可能包含JQuery v1，頁面可能包含JQuery v2，並且它們不會相互衝突。

孤立世界的另一個重要好處是它們將頁面上的JavaScript和擴展中的JavaScript完全分開。這使我們能夠爲不應該從網頁訪問的內容腳本提供額外的功能，而無需擔心網頁訪問它。

現在，關於造型的「干涉」這是一個實際的問題，這是我能想到的3個解決方案：

使用內聯元素樣式（即什麼揮霍到目前爲止做的）和： a。嘗試儘可能多地定義屬性或至少您真正關心的屬性（並且對底層HTML有意義）。 b。接受這個事實，即你的元素會受到wdbpages CSS的影響。使用iframe來嵌入每個元素。這更「安全」，但是，如果樣式到最後的細節並不那麼重要，這種方法會帶來不必要的開銷。
有（可能是「正確的」），高端的方法利用Shadow DOM。（看看這個tutorial爲好。）

來源

2013-12-22 08:52:24 gkalpak

所以相對於孤立的世界，我使用chrome.tabs.executeScript（標籤，{文件：「」}）執行一個大文件，這在技術上不是一個內容腳本是否正確？這是否也得到了孤立世界的好處？此外，您的選項3幾乎是我想要的，並且可能是一個可行的解決方案。我曾經讀過一些有關陰影的東西，但直到現在從未看到它的用處。 – aclave1

使用'chrome.runtime.executeScript（）'注入的文件或代碼仍然被認爲是內容腳本，並且也生活在孤立的世界中（這很容易爲自己測試）。我首先通過RobW的** ['Display Anchors' extension]（https://github.com/Rob--W/display-anchors）**（我每天都在使用它）獲得Shadow DOM的好評，所以你可以看看一個將「Shadow DOM」概念合併到Chrome擴展中的實例。 – gkalpak

Chrome擴展內容腳本自定義UI

回答

相關問題