tabs.insertCSS()

語法

let inserting = browser.tabs.insertCSS(
  tabId,           // optional integer
  details          // object
)

引數

tabId 可選

integer。插入 CSS 的標籤頁的 ID。預設為當前視窗的活動標籤頁。

details

描述要插入的 CSS 的物件。它包含以下屬性：

allFrames 可選

boolean。如果為 true，CSS 將被注入到當前頁面的所有幀中。如果為 false，CSS 只注入到頂層幀。預設為 false。

code 可選

string。要注入的程式碼，以文字字串形式表示。

cssOrigin 可選

string。它可以取以下兩個值之一：“user”，用於將 CSS 新增為使用者樣式表；或“author”，用於將其新增為作者樣式表。如果省略此選項，CSS 將作為作者樣式表新增。

• “user”可以防止網站覆蓋您插入的 CSS：參見 層疊順序。
• “author”樣式表表現得就像它們出現在網頁指定的任何作者規則之後。這種行為包括由頁面指令碼動態新增的任何作者樣式表，即使該添加發生在 insertCSS 呼叫完成之後。

file 可選

string。包含要注入程式碼的檔案的路徑。在 Firefox 中，相對 URL 相對於當前頁面 URL 進行解析。在 Chrome 中，這些 URL 相對於擴充套件程式的基 URL 進行解析。為了跨瀏覽器相容，您可以將路徑指定為絕對 URL，從擴充套件程式的根目錄開始，如下所示："/path/to/stylesheet.css"。

frameId 可選

integer。應注入 CSS 的幀。預設為 0（頂層幀）。

matchAboutBlank 可選

boolean。如果為 true，程式碼將被注入到嵌入的 "about:blank" 和 "about:srcdoc" 幀中，前提是您的擴充套件程式有權訪問它們的父文件。程式碼無法插入到頂層的 about: 幀中。預設為 false。

runAt 可選

extensionTypes.RunAt。程式碼將被注入到標籤頁的最早時間。預設為 "document_idle"。

返回值

一個 Promise，當所有 CSS 都已插入時，它將以無引數的形式完成。如果發生任何錯誤，Promise 將以錯誤訊息被拒絕。

示例

此示例將 CSS 從字串插入到當前活動標籤頁。

let css = "body { border: 20px dotted pink; }";

browser.browserAction.onClicked.addListener(() => {
  function onError(error) {
    console.log(`Error: ${error}`);
  }

  let insertingCSS = browser.tabs.insertCSS({ code: css });
  insertingCSS.then(null, onError);
});

此示例將 CSS 從擴充套件程式打包的檔案中載入並插入。CSS 將插入到 ID 為 2 的標籤頁中。

browser.browserAction.onClicked.addListener(() => {
  function onError(error) {
    console.log(`Error: ${error}`);
  }

  let insertingCSS = browser.tabs.insertCSS(2, { file: "content-style.css" });
  insertingCSS.then(null, onError);
});

擴充套件程式示例

• apply-css
• beastify
• session-state

瀏覽器相容性