scripting.insertCSS()

将 CSS 注入页面。

注意： 此方法在 Chrome 和 Firefox 101 及更高版本中的清单 V3 或更高版本中可用。在 Safari 和 Firefox 102 及更高版本中，此方法在清单 V2 中也可用。

要使用此 API，您必须拥有 "scripting" 权限 以及对目标 URL 的权限，无论是显式地作为 主机权限 还是使用 activeTab 权限。

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

注意： Firefox 解析注入的 CSS 文件中的 URL 相对於 CSS 文件，而不是注入它的页面。

插入的 CSS 可以通过调用 scripting.removeCSS() 来移除。

这是一个异步函数，它返回一个 Promise。

语法

js
await browser.scripting.insertCSS(
  details     // object
)

参数

details

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

css 可选

string。包含要注入的 CSS 的字符串。必须指定 css 或 files。

files 可选

array of string。要注入的 CSS 文件的路径，相对于扩展的根目录。必须指定 files 或 css。

origin 可选

string。注入的样式来源，可以是 USER（将 CSS 添加为用户样式表）或 AUTHOR（将 CSS 添加为作者样式表）。默认为 AUTHOR。

  • USER 使您能够阻止网站覆盖您插入的 CSS：请参阅 级联顺序。
  • AUTHOR 样式表的行为类似于它们出现在网页指定的所有作者规则之后。此行为包括页面脚本动态添加的任何作者样式表，即使该添加发生在 insertCSS 调用完成之后。
target

scripting.InjectionTarget。详细说明要注入 CSS 的目标。

返回值

一个 Promise，当所有 CSS 都插入后，它将以无参数的形式完成。如果出现任何错误，该 promise 将被拒绝。

示例

此示例将从字符串获取的 CSS 注入活动标签页。

js
browser.action.onClicked.addListener(async (tab) => {
  try {
    await browser.scripting.insertCSS({
      target: {
        tabId: tab.id,
      },
      css: `body { border: 20px dotted pink; }`,
    });
  } catch (err) {
    console.error(`failed to insert CSS: ${err}`);
  }
});

此示例将从名为 "content-style.css" 的文件（与扩展一起打包）加载的 CSS 注入。

js
browser.action.onClicked.addListener(async (tab) => {
  try {
    await browser.scripting.insertCSS({
      target: {
        tabId: tab.id,
      },
      files: ["content-style.css"],
    });
  } catch (err) {
    console.error(`failed to insert CSS: ${err}`);
  }
});

浏览器兼容性

BCD 表仅在启用了 JavaScript 的浏览器中加载。

注意： 此 API 基于 Chromium 的 chrome.scripting API。