scripting.insertCSS()
将 CSS 注入页面。
注意：此方法在 Chrome 的 Manifest V3 或更高版本以及 Firefox 101 中可用。在 Safari 和 Firefox 102+ 中，此方法在 Manifest V2 中也可用。
要使用此 API，您必须拥有 "scripting" 权限以及目标 URL 的权限，该权限可以显式地作为 主机权限，也可以使用 activeTab 权限。
您只能将 CSS 注入到 URL 可以使用 匹配模式表示的页面中：这意味着其 scheme 必须是 "http"、"https" 或 "file" 之一。这意味着您不能将 CSS 注入到任何浏览器的内置页面中，例如 about:debugging、about:addons，或者打开新空标签页时显示的页面。
注意： Firefox 会相对于注入的 CSS 文件解析 CSS 文件中的 URL，而不是相对于注入它的页面。
可以通过调用 scripting.removeCSS() 来移除插入的 CSS。
这是一个异步函数，返回一个 Promise。
语法
await browser.scripting.insertCSS(
details // object
)
参数
details-
一个描述要插入的 CSS 及其插入位置的对象。它包含以下属性：
css可选-
string。一个包含要注入的 CSS 的字符串。必须指定css或files其中之一。 files可选-
arrayofstring。要注入的 CSS 文件的路径，相对于扩展的根目录。必须指定files或css其中之一。 origin可选-
string。注入的样式来源，可以是USER，用于将 CSS 添加为用户样式表，或AUTHOR，用于将其添加为作者样式表。默认为AUTHOR。从 Firefox 144 开始，此属性不区分大小写。USER使您能够阻止网站覆盖您插入的 CSS：请参阅 层叠顺序。AUTHOR样式表表现得好像它们出现在网页指定的任何作者规则之后。此行为包括页面脚本动态添加的任何作者样式表，即使该添加发生在insertCSS调用完成之后。
目标-
scripting.InjectionTarget。指定要将 CSS 注入目标（的详细信息）。
返回值
一个 Promise，当所有 CSS 都已插入时，它将以无参数的方式解析。如果发生任何错误，Promise 将被拒绝。
示例
此示例将从字符串中获取的 CSS 注入到活动标签页中。
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}`);
}
});
此示例注入从文件中加载的 CSS（与扩展打包在一起），该文件名为 "content-style.css"。
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}`);
}
});
浏览器兼容性
加载中…
注意： 此 API 基于 Chromium 的 chrome.scripting API。