tabs.insertCSS()

这篇翻译不完整。请帮忙从英语翻译这篇文章

像一个页面注入CSS。

使用该API前你必须拥有目标页面的权限, 可以是 主机权限, 或者使用 activeTab permission.

你只能像符合 match pattern 的网页注入CSS: 其肯定会是 "http", "https", "file", "ftp" 之一. 这意味着你不能想任何浏览器内置页面注入CSS, 比如 about:debugging, about:addons, 或者你打开的一个新的空白页。

插入的CSS通过调用tabs.removeCSS() 被移除。

这是一个会返回一个 Promise 的异步函数。

Syntax

var inserting = browser.tabs.insertCSS(
  tabId,           // optional integer
  details          // extensionTypes.InjectDetails
)

Parameters

tabId 可选
integer, 将要注入css的标签ID。默认为当前窗口的活动标签。
details
extensionTypes.InjectDetails. 对注入的描述,包含以下属性:
allFrames可选
boolean. 如果为真,该CSS会被注入到该页面的所有框架,如果为假,Css只会注入到最上层框架,默认为假。
code可选
string. 将要注入的代码。
file可选
string. 包含将要注入代码的文件路径,在Firefox中,相对URLs 决定于当前页面的URL,在Chrome中,决定于扩展的基础URL。为了跨浏览器工作,你应该使用一个从扩展根目录开始的绝对路径,比如 : "/path/to/stylesheet.css".
frameId可选
integer. CSS应该被注入的框架. 默认为 0 (顶层框架).
matchAboutBlank可选
boolean. If true, the code will be injected into embedded "about:blank" and "about:srcdoc" frames if your add-on has access to their parent document. The code cannot be inserted in top-level about: frames. Defaults to false.
runAt可选
extensionTypes.RunAt. The soonest that the code will be injected into the tab. Defaults to "document_idle".

Return value

 Promise 将会在CSS成功注入时 被填充,如果有任何错误发生,promise将会被注入一个错误消息。

Browser compatibility

Chrome Edge Firefox Firefox for Android Opera
Basic support Yes Yes 47.0 No 33

Compatibility notes

Firefox

  • 'matchAboutBlank' is not supported.

Examples

This example inserts into the currently active tab CSS which is taken from a string.

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

browser.browserAction.onClicked.addListener(() => {

  function onError(error) {
    console.log(`Error: ${error}`);
  }

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

This example inserts CSS which is loaded from a file packaged with the extension. The CSS is inserted into the tab whose ID is 2:

browser.browserAction.onClicked.addListener(() => {

  function onError(error) {
    console.log(`Error: ${error}`);
  }

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

Example add-ons

Acknowledgements

This API is based on Chromium's chrome.tabs API. This documentation is derived from tabs.json in the Chromium code.

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

文档标签和贡献者

 此页面的贡献者: Hypophrenia
 最后编辑者: Hypophrenia,