1 files changed, 129 insertions, 0 deletions
diff --git a/files/ko/mozilla/add-ons/webextensions/api/tabs/insertcss/index.html b/files/ko/mozilla/add-ons/webextensions/api/tabs/insertcss/index.html
new file mode 100644
index 0000000000..9fbf180263
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/api/tabs/insertcss/index.html
@@ -0,0 +1,129 @@
+---
+title: tabs.insertCSS()
+slug: Mozilla/Add-ons/WebExtensions/API/tabs/insertCSS
+translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/insertCSS
+---
+<div>{{AddonSidebar()}}</div>
+
+<p>페이지에 CSS 삽입하기</p>
+
+<p>이 API를 사용하기 위해 여러분은 해당 페이지 URL에 대한 허가가 필요합니다. 이 허가에 대한 요청은  <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions">호스트 허가</a>를 통하거나  <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission">활성화 된 탭 허가</a>을 사용할 수도 있습니다.</p>
+
+<p>You can only inject CSS into pages whose URL can be expressed using a <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">match pattern</a>: meaning, its scheme must be one of "http", "https", "file", "ftp". This means that you can't inject CSS into any of the browser's built-in pages, such as about:debugging, about:addons, or the page that opens when you open a new empty tab.</p>
+
+<p>The inserted CSS may be removed again by calling {{WebExtAPIRef("tabs.removeCSS()")}}.</p>
+
+<p>This is an asynchronous function that returns a <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox brush:js">var inserting = browser.tabs.insertCSS(
+  tabId,           // optional integer
+  details          // extensionTypes.InjectDetails
+)
+</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt><code>tabId</code> {{optional_inline}}</dt>
+ <dd><code>integer</code>. The ID of the tab in which to insert the CSS. Defaults to the active tab of the current window.</dd>
+ <dt><code>details</code></dt>
+ <dd>{{WebExtAPIRef('extensionTypes.InjectDetails')}}. Describes the CSS to insert. This contains the following properties:</dd>
+ <dd>
+ <dl class="reference-values">
+  <dt><code>allFrames</code>{{optional_inline}}</dt>
+  <dd><code>boolean</code>. If <code>true</code>, the CSS will be injected into all frames of the current page. If it is <code>false</code>, CSS is only injected into the top frame. Defaults to <code>false</code>.</dd>
+  <dt><code>code</code>{{optional_inline}}</dt>
+  <dd><code>string</code>. Code to inject, as a text string.</dd>
+  <dt><code>cssOrigin</code>{{optional_inline}}</dt>
+  <dd><code>string</code>. This can take one of two values: "user", to add the CSS as a user stylesheet, or "author" to add it as an author stylesheet. Specifying "user" enables you to prevent websites from overriding the CSS you insert: see <a href="/en-US/docs/Web/CSS/Cascade#Cascading_order">Cascading order</a>. If this option is omitted, the CSS is added as an author stylesheet.</dd>
+  <dt><code>file</code>{{optional_inline}}</dt>
+  <dd><code>string</code>. Path to a file containing the code to inject. In Firefox, relative URLs are resolved relative to the current page URL. In Chrome, these URLs are resolved relative to the add-on's base URL. To work cross-browser, you can specify the path as an absolute URL, starting at the add-on's root, like this: <code>"/path/to/stylesheet.css"</code>.</dd>
+  <dt><code>frameId</code>{{optional_inline}}</dt>
+  <dd><code>integer</code>. The frame where the CSS should be injected. Defaults to <code>0</code> (the top-level frame).</dd>
+  <dt><code>matchAboutBlank</code>{{optional_inline}}</dt>
+  <dd><code>boolean</code>. If <code>true</code>, 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 <code>false</code>.</dd>
+  <dt><code>runAt</code>{{optional_inline}}</dt>
+  <dd>{{WebExtAPIRef('extensionTypes.RunAt')}}. The soonest that the code will be injected into the tab. Defaults to "document_idle".</dd>
+ </dl>
+ </dd>
+</dl>
+
+<h3 id="Return_value">Return value</h3>
+
+<p>A <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code> that will be fulfilled with no arguments when all the CSS has been inserted. If any error occurs, the promise will be rejected with an error message.</p>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("webextensions.api.tabs.insertCSS")}}</p>
+
+<h2 id="Examples">Examples</h2>
+
+<p>This example inserts into the currently active tab CSS which is taken from a string.</p>
+
+<pre class="brush: js">var css = "body { border: 20px dotted pink; }";
+
+browser.browserAction.onClicked.addListener(() =&gt; {
+
+  function onError(error) {
+    console.log(`Error: ${error}`);
+  }
+
+  var insertingCSS = browser.tabs.insertCSS({code: css});
+  insertingCSS.then(null, onError);
+});</pre>
+
+<p>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:</p>
+
+<pre class="brush: js">browser.browserAction.onClicked.addListener(() =&gt; {
+
+  function onError(error) {
+    console.log(`Error: ${error}`);
+  }
+
+  var insertingCSS = browser.tabs.insertCSS(2, {file: "content-style.css"});
+  insertingCSS.then(null, onError);
+});</pre>
+
+<p>{{WebExtExamples}}</p>
+
+<div class="note"><strong>Acknowledgements</strong>
+
+<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/tabs#method-insertCSS"><code>chrome.tabs</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/tabs.json"><code>tabs.json</code></a> in the Chromium code.</p>
+
+<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p>
+</div>
+
+<div class="hidden">
+<pre>// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+</pre>
+</div>