tabs.insertCSS()

将 CSS 注入页面。

注意： 使用清单 V3 或更高版本时，请使用 scripting.insertCSS() 和 scripting.removeCSS() 来插入和删除 CSS。

要使用此 API，您必须对页面的 URL 具有权限，可以是显式权限，如 主机权限，或使用 activeTab 权限。

您只能将 CSS 注入其 URL 可以使用 匹配模式 表示的页面：这意味着其方案必须是“http”、“https”或“file”之一。这意味着您无法将 CSS 注入任何浏览器的内置页面，例如 about:debugging、about:addons 或打开新空标签页时打开的页面。

注意： Firefox 解析注入 CSS 文件中的 URL 时，以 CSS 文件本身为准，而不是以注入它的页面为准。

您可以通过调用 tabs.removeCSS() 再次删除插入的 CSS。

这是一个异步函数，它返回一个 Promise（仅限 Firefox）。

语法

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

参数

tabId 可选

integer。要插入 CSS 的标签的 ID。默认值为当前窗口的活动标签。

详细信息

描述要插入的 CSS 的对象。它包含以下属性

allFrames 可选

boolean。如果为 true，则 CSS 将注入当前页面的所有框架中。如果为 false，则 CSS 仅注入顶层框架中。默认值为 false。

code 可选

string。要注入的代码，以文本字符串形式。

cssOrigin 可选

string。可以采用以下两种值之一：“user”，将 CSS 添加为用户样式表，或“author”，将 CSS 添加为作者样式表。如果省略此选项，则 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 都已插入时，它将用无参数来完成。如果发生任何错误，则该承诺将因错误消息而被拒绝。

示例

此示例将从字符串中获取的 CSS 插入到当前活动标签中。

js
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 的标签中

js
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);
});

扩展示例

浏览器兼容性

BCD 表格仅在浏览器中加载

注意： 此 API 基于 Chromium 的 chrome.tabs API。本文档来自 Chromium 代码中的 tabs.json。