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

浏览器兼容性