aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/mozilla/add-ons/code_snippets
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 21:46:22 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 21:46:22 -0500
commita065e04d529da1d847b5062a12c46d916408bf32 (patch)
treefe0f8bcec1ff39a3c499a2708222dcf15224ff70 /files/zh-cn/mozilla/add-ons/code_snippets
parent218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (diff)
downloadtranslated-content-a065e04d529da1d847b5062a12c46d916408bf32.tar.gz
translated-content-a065e04d529da1d847b5062a12c46d916408bf32.tar.bz2
translated-content-a065e04d529da1d847b5062a12c46d916408bf32.zip
update based on https://github.com/mdn/yari/issues/2028
Diffstat (limited to 'files/zh-cn/mozilla/add-ons/code_snippets')
-rw-r--r--files/zh-cn/mozilla/add-ons/code_snippets/canvas/index.html237
-rw-r--r--files/zh-cn/mozilla/add-ons/code_snippets/index.html134
-rw-r--r--files/zh-cn/mozilla/add-ons/code_snippets/js_xpcom/index.html97
-rw-r--r--files/zh-cn/mozilla/add-ons/code_snippets/modules/index.html37
-rw-r--r--files/zh-cn/mozilla/add-ons/code_snippets/queryselector/index.html114
-rw-r--r--files/zh-cn/mozilla/add-ons/code_snippets/timers/index.html67
6 files changed, 0 insertions, 686 deletions
diff --git a/files/zh-cn/mozilla/add-ons/code_snippets/canvas/index.html b/files/zh-cn/mozilla/add-ons/code_snippets/canvas/index.html
deleted file mode 100644
index 002a1b8600..0000000000
--- a/files/zh-cn/mozilla/add-ons/code_snippets/canvas/index.html
+++ /dev/null
@@ -1,237 +0,0 @@
----
-title: Canvas 代码片段
-slug: Mozilla/Add-ons/Code_snippets/Canvas
-translation_of: Archive/Add-ons/Code_snippets/Canvas
----
-<p><span style="color: #000000; display: inline !important; float: none; font-family: Cantarell; font-size: 14.666666984558105px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;">{{LegacyAddonsNotice}}</span></p>
-
-<p>关于使用<code>&lt;canvas&gt;</code>的一般信息,请参阅 <a class="internal" href="/en-US/docs/Web/API/Canvas_API" title="En/HTML/Canvas">canvas topic page</a>.</p>
-
-<h2 id="网页中可以用到的代码">网页中可以用到的代码</h2>
-
-<h3 id="在画布中获取特定颜色的像素数量">在画布中获取特定颜色的像素数量</h3>
-
-<p>下面的函数将返回画布上颜色(RGB格式)为r、g、b的像素数量。如果用户希望像<a href="https://hacks.mozilla.org/2013/06/building-a-simple-paint-game-with-html5-canvas-and-vanilla-javascript/" title="https://hacks.mozilla.org/2013/06/building-a-simple-paint-game-with-html5-canvas-and-vanilla-javascript/">这篇博客文章</a>中在另一个区域绘画,那么这将非常有用。 </p>
-
-<pre class="brush: js">function getpixelamount(canvas, r, g, b) {
- var cx = canvas.getContext('2d');
- var pixels = cx.getImageData(0, 0, canvas.width, canvas.height);
- var all = pixels.data.length;
- var amount = 0;
- for (i = 0; i &lt; all; i += 4) {
- if (pixels.data[i] === r &amp;&amp;
- pixels.data[i + 1] === g &amp;&amp;
- pixels.data[i + 2] === b) {
- amount++;
- }
- }
- return amount;
-};
-</pre>
-
-<h3 id="在画布中获取某一个像素的颜色">在画布中获取某一个像素的颜色</h3>
-
-<p>下面的代码片段返回一个对象,该对象在画布的x和y的位置上具有RGBA值。这可以用来确定鼠标光标是否在一个特定的形状中。</p>
-
-<pre class="brush: js">function getpixelcolour(canvas, x, y) {
- var cx = canvas.getContext('2d');
- var pixel = cx.getImageData(x, y, 1, 1);
- return {
- r: pixel.data[0],
- g: pixel.data[1],
- b: pixel.data[2],
- a: pixel.data[3]
- };
-}
-</pre>
-
-<h3 id="链式调用方法">链式调用方法</h3>
-
-<p>这个类允许可以像jQuery那样链式地访问 2D 渲染上下文的方法和属性 。</p>
-
-<pre class="brush: js">function Canvas2DContext(canvas) {
- if (typeof canvas === 'string') {
- canvas = document.getElementById(canvas);
- }
- if (!(this instanceof Canvas2DContext)) {
- return new Canvas2DContext(canvas);
- }
- this.context = this.ctx = canvas.getContext('2d');
- if (!Canvas2DContext.prototype.arc) {
- Canvas2DContext.setup.call(this, this.ctx);
- }
-}
-Canvas2DContext.setup = function() {
- var methods = ['arc', 'arcTo', 'beginPath', 'bezierCurveTo', 'clearRect', 'clip',
- 'closePath', 'drawImage', 'fill', 'fillRect', 'fillText', 'lineTo', 'moveTo',
- 'quadraticCurveTo', 'rect', 'restore', 'rotate', 'save', 'scale', 'setTransform',
- 'stroke', 'strokeRect', 'strokeText', 'transform', 'translate'];
-
- var getterMethods = ['createPattern', 'drawFocusRing', 'isPointInPath', 'measureText', // drawFocusRing not currently supported
- // The following might instead be wrapped to be able to chain their child objects
- 'createImageData', 'createLinearGradient',
- 'createRadialGradient', 'getImageData', 'putImageData'
- ];
-
- var props = ['canvas', 'fillStyle', 'font', 'globalAlpha', 'globalCompositeOperation',
- 'lineCap', 'lineJoin', 'lineWidth', 'miterLimit', 'shadowOffsetX', 'shadowOffsetY',
- 'shadowBlur', 'shadowColor', 'strokeStyle', 'textAlign', 'textBaseline'];
-
- for (let m of methods) {
- let method = m;
- Canvas2DContext.prototype[method] = function() {
- this.ctx[method].apply(this.ctx, arguments);
- return this;
- };
- }
-
- for (let m of getterMethods) {
- let method = m;
- Canvas2DContext.prototype[method] = function() {
- return this.ctx[method].apply(this.ctx, arguments);
- };
- }
-
- for (let p of props) {
- let prop = p;
- Canvas2DContext.prototype[prop] = function(value) {
- if (value === undefined)
- return this.ctx[prop];
- this.ctx[prop] = value;
- return this;
- };
- }
-};
-
-var canvas = document.getElementById('canvas');
-
-// Use context to get access to underlying context
-var ctx = Canvas2DContext(canvas)
- .strokeStyle('rgb(30, 110, 210)')
- .transform(10, 3, 4, 5, 1, 0)
- .strokeRect(2, 10, 15, 20)
- .context;
-
-// Use property name as a function (but without arguments) to get the value
-var strokeStyle = Canvas2DContext(canvas)
- .strokeStyle('rgb(50, 110, 210)')
- .strokeStyle();
-</pre>
-
-<h2 id="Saving_a_canvas_image_to_a_file" name="Saving_a_canvas_image_to_a_file">Code usable only from privileged code</h2>
-
-<p>These snippets are only useful from privileged code, such as extensions or privileged apps.</p>
-
-<h3 id="Saving_a_canvas_image_to_a_file" name="Saving_a_canvas_image_to_a_file">将canvas图片保存到文件中</h3>
-
-<p>The following function accepts a canvas object and a destination file path string. The canvas is converted to a PNG file and saved to the specified location. The function returns a promise which resolves when the file has been completely saved.</p>
-
-<pre class="brush: js">function saveCanvas(canvas, path, type, options) {
- return Task.spawn(function *() {
- var reader = new FileReader;
- var blob = yield new Promise(accept =&gt; canvas.toBlob(accept, type, options));
- reader.readAsArrayBuffer(blob);
-
- yield new Promise(accept =&gt; { reader.onloadend = accept });
-
- return yield OS.File.writeAtomic(path, new Uint8Array(reader.result),
- { tmpPath: path + '.tmp' });
- });
-}
-</pre>
-
-<h3 id="Loading_a_remote_page_onto_a_canvas_element" name="Loading_a_remote_page_onto_a_canvas_element">将一个远程页面加载到canvas元素上</h3>
-
-<p>The following class first creates a hidden iframe element and attaches a listener to the frame's load event. Once the remote page has loaded, the remotePageLoaded method fires. This method gets a reference to the iframe's window and draws this window to a canvas object.</p>
-
-<p>Note that this only works if you are running the page from chrome. If you try running the code as a plain webpage, you will get a 'Security error" code: "1000' error.</p>
-
-<pre class="brush: js">RemoteCanvas = function() {
- this.url = 'http://developer.mozilla.org';
-};
-
-RemoteCanvas.CANVAS_WIDTH = 300;
-RemoteCanvas.CANVAS_HEIGHT = 300;
-
-RemoteCanvas.prototype.load = function() {
- var windowWidth = window.innerWidth - 25;
- var iframe;
- iframe = document.createElement('iframe');
- iframe.id = 'test-iframe';
- iframe.height = '10px';
- iframe.width = windowWidth + 'px';
- iframe.style.visibility = 'hidden';
- iframe.src = this.url;
- // Here is where the magic happens... add a listener to the
- // frame's onload event
- iframe.addEventListener('load', this.remotePageLoaded, true);
- //append to the end of the page
- window.document.body.appendChild(iframe);
- return;
-};
-
-RemoteCanvas.prototype.remotePageLoaded = function() {
- // Look back up the iframe by id
- var ldrFrame = document.getElementById('test-iframe');
- // Get a reference to the window object you need for the canvas
- // drawWindow method
- var remoteWindow = ldrFrame.contentWindow;
-
- //Draw canvas
- var canvas = document.createElement('canvas');
- canvas.style.width = RemoteCanvas.CANVAS_WIDTH + 'px';
- canvas.style.height = RemoteCanvas.CANVAS_HEIGHT + 'px';
- canvas.width = RemoteCanvas.CANVAS_WIDTH;
- canvas.height = RemoteCanvas.CANVAS_HEIGHT;
- var windowWidth = window.innerWidth - 25;
- var windowHeight = window.innerHeight;
-
- var ctx = canvas.getContext('2d');
- ctx.clearRect(0, 0,
- RemoteCanvas.CANVAS_WIDTH,
- RemoteCanvas.CANVAS_HEIGHT);
- ctx.save();
- ctx.scale(RemoteCanvas.CANVAS_WIDTH / windowWidth,
- RemoteCanvas.CANVAS_HEIGHT / windowHeight);
- ctx.drawWindow(remoteWindow,
- 0, 0,
- windowWidth, windowHeight,
- 'rgb(255, 255, 255)');
- ctx.restore();
-};
-</pre>
-
-<p>Usage:</p>
-
-<pre class="brush: js">var remoteCanvas = new RemoteCanvas();
-remoteCanvas.load();
-</pre>
-
-<h3 id="Loading_a_remote_page_onto_a_canvas_element" name="Loading_a_remote_page_onto_a_canvas_element">将图像文件转换为base64字符串</h3>
-
-<p>下面代码加载远程图片,并把它的内容转化为 <code><a href="/en/data_URIs">Data URI scheme</a></code>。</p>
-
-<pre class="brush: js">var canvas = document.createElement('canvas');
-var ctxt = canvas.getContext('2d');
-function loadImageFile(url, callback) {
- var image = new Image();
- image.src = url;
- return new Promise((accept, reject) =&gt; {
- image.onload = accept;
- image.onerror = reject;
- }).then(accept =&gt; {
- canvas.width = this.width;
- canvas.height = this.height;
- ctxt.clearRect(0, 0, this.width, this.height);
- ctxt.drawImage(this, 0, 0);
- accept(canvas.toDataURL());
- });
-}
-</pre>
-
-<p>Usage:</p>
-
-<pre class="brush: js">loadImageFile('myimage.jpg').then(string64 =&gt; { alert(string64); });
-</pre>
-
-<p>如果你想获取本地文件(使用文件选择input元素)的 base64 内容,你必须使用 <code><a href="/en/DOM/FileReader#readAsDataURL%28%29" title="en/DOM/FileReader#readAsDataURL%28%29">FileReader</a></code> 对象。</p>
diff --git a/files/zh-cn/mozilla/add-ons/code_snippets/index.html b/files/zh-cn/mozilla/add-ons/code_snippets/index.html
deleted file mode 100644
index bfe77a4e38..0000000000
--- a/files/zh-cn/mozilla/add-ons/code_snippets/index.html
+++ /dev/null
@@ -1,134 +0,0 @@
----
-title: Code snippets
-slug: Mozilla/Add-ons/Code_snippets
-tags:
- - Add-ons
- - Code snippets
- - Extensions
- - NeedsTranslation
- - TopicStub
-translation_of: Archive/Add-ons/Code_snippets
----
-<p><span style="color: #000000; display: inline !important; float: none; font-family: Cantarell; font-size: 14.666666984558105px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;">{{LegacyAddonsNotice}}</span></p>
-
-<p>This is a quick list of useful code snippets (small code samples) available for developers of extensions for the various Mozilla applications. Many of these samples can also be used in XULRunner applications, as well as in actual Mozilla code itself.</p>
-
-<p>These examples demonstrate how to accomplish basic tasks that might not be immediately obvious.</p>
-
-<h2 id="General" name="General">General</h2>
-
-<dl>
- <dt><a href="/en-US/docs/Code_snippets/From_articles" title="/en-US/docs/Code_snippets/From_articles">Examples and demos from MDN articles</a></dt>
- <dd>A collection of examples and demos from articles.</dd>
- <dt><a href="/en-US/docs/Code_snippets/Windows" title="/en-US/docs/Code_snippets/Windows">Window code</a></dt>
- <dd>Opening and manipulating windows</dd>
- <dt><a href="/en-US/docs/Code_snippets/Toolbar" title="/en-US/docs/Code_snippets/Toolbar">Toolbar</a></dt>
- <dd>Toolbar related code</dd>
- <dt><a href="/en-US/docs/Code_snippets/Sidebar" title="/en-US/docs/Code_snippets/Sidebar">Sidebar</a></dt>
- <dd>Sidebar related code</dd>
- <dt><a href="/en-US/docs/Code_snippets/Forms">Forms</a></dt>
- <dd>Forms related code</dd>
- <dt><a href="/en-US/docs/Code_snippets/XML" title="/en-US/docs/Code_snippets/XML">XML</a></dt>
- <dd>Code used to parse, write, manipulate, etc. XML</dd>
- <dt><a href="/en-US/docs/Code_snippets/File_I_O" title="/en-US/docs/Code_snippets/File_I/O">File I/O</a></dt>
- <dd>Code used to read, write and process files</dd>
- <dt><a href="/en-US/docs/Code_snippets/Drag_&amp;_Drop" title="/en-US/docs/Code_snippets/Drag_&amp;_Drop">Drag &amp; Drop</a></dt>
- <dd>Code used to setup and handle drag and drop events</dd>
- <dt><a href="/en-US/docs/Code_snippets/Dialogs_and_Prompts" title="/en-US/docs/Code_snippets/Dialogs_and_Prompts">Dialogs</a></dt>
- <dd>Code used to display and process dialog boxes</dd>
- <dt><a href="/en-US/docs/Code_snippets/Alerts_and_Notifications" title="/en-US/docs/Code snippets/Alerts and Notifications">Alerts and Notifications </a></dt>
- <dd>Modal and non-modal ways to notify users</dd>
- <dt><a href="/en-US/docs/Code_snippets/Preferences" title="/en-US/docs/Code_snippets/Preferences">Preferences</a></dt>
- <dd>Code used to read, write, and modify preferences</dd>
- <dt><a href="/en-US/docs/Code_snippets/JS_XPCOM" title="/en-US/docs/Code_snippets/JS_XPCOM">JS XPCOM</a></dt>
- <dd>Code used to define and call XPCOM components in JavaScript</dd>
- <dt><a href="/en-US/docs/Code_snippets/Running_applications" title="/en-US/docs/Code_snippets/Running_applications">Running applications</a></dt>
- <dd>Code used to run other applications</dd>
- <dt><a href="/en-US/docs/Code_snippets/Canvas" title="/en-US/docs/Code_snippets/Canvas"><code>&lt;canvas&gt;</code> related</a></dt>
- <dd><a href="/en-US/docs/HTML/Canvas" title="/en-US/docs/HTML/Canvas">WHAT WG Canvas</a>-related code</dd>
- <dt><a href="/en-US/docs/Signing_a_XPI" title="/en-US/docs/Signing_a_XPI">Signing a XPI</a></dt>
- <dd>How to sign an XPI with PKI</dd>
- <dt><a href="/en-US/docs/Code_snippets/Threads">Delayed Execution</a></dt>
- <dd>Performing background operations.</dd>
- <dt><a href="/en-US/docs/Code_snippets/Miscellaneous" title="/en-US/docs/Code_snippets/Miscellaneous">Miscellaneous</a></dt>
- <dd>Miscellaneous useful code fragments</dd>
- <dt><a href="/en-US/docs/Code_snippets/HTML_to_DOM" title="/en-US/docs/Code_snippets/HTML_to_DOM">HTML to DOM</a></dt>
- <dd>Using a hidden browser element to parse HTML to a window's DOM</dd>
-</dl>
-
-<h2 id="javascript-libraries" name="javascript-libraries">JavaScript libraries</h2>
-
-<p>Here are some JavaScript libraries that may come in handy.</p>
-
-<dl>
- <dt><a href="/en-US/docs/Code_snippets/StringView" title="/en-US/docs/Code_snippets/StringView">StringView</a></dt>
- <dd>A library that implements a <code>StringView</code> view for <a href="/en-US/docs/Web/JavaScript/Typed_arrays" title="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a>. This lets you access data in typed arrays using C-like string functions.</dd>
- <dt><a href="/en-US/Add-ons/Code_snippets/Rosetta" title="/en-US/docs/Code_snippets/Rosetta">Rosetta</a></dt>
- <dd>By default, the only possible standardized scripting language for HTML is <strong>ECMAScript</strong>. Hence, if you are going to use another scripting language you might expect that most of the browsers will not recognize it. Nevertheless, the increasing computational power of modern browsers together with the introduction of <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">typed arrays</a> in ECMAScript allow us, in theory, to build full <a class="external external-icon" href="http://en.wikipedia.org/wiki/Virtual_machine">virtual machines</a> in pure ECMAScript. Therefore, it is also possible, in theory, to use ECMAScript for a smaller task: parsing exotic programming languages (i.e., creating compilers). This snippets shows a possible way to start from.</dd>
-</dl>
-
-<h2 id="Browser-oriented_code" name="Browser-oriented_code">Browser-oriented code</h2>
-
-<dl>
- <dt><a href="/en-US/docs/Code_snippets/Tabbed_browser" title="/en-US/docs/Code_snippets/Tabbed_browser">Tabbed browser code</a> (Firefox/SeaMonkey)</dt>
- <dd>Basic operations, such as page loading, with the tabbed browser, which is the heart of Mozilla's browser applications</dd>
- <dt><a href="/en-US/docs/Code_snippets/Cookies" title="/en-US/docs/Code_snippets/Cookies">Cookies</a></dt>
- <dd>Reading, writing, modifying, and removing cookies</dd>
- <dt><a href="/en-US/docs/Code_snippets/Page_Loading" title="/en-US/docs/Code_snippets/Page_Loading">Page Loading</a></dt>
- <dd>Code used to load pages, reload pages, and listen for page loads</dd>
- <dt><a href="/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages" title="/en-US/docs/Code_snippets/Interaction_between_privileged_and_non-privileged_pages">Interaction between privileged and non-privileged code</a></dt>
- <dd>How to communicate from extensions to websites and vice-versa.</dd>
- <dt><a href="/en-US/docs/Code_snippets/Downloading_Files" title="/en-US/docs/Code_snippets/Downloading_Files">Downloading Files</a></dt>
- <dd>Code to download files, images, and to monitor download progress</dd>
- <dt><a href="/en-US/docs/Code_snippets/Password_Manager" title="/en-US/docs/Code_snippets/Password_Manager">Password Manager</a></dt>
- <dd>Code used to read and write passwords to/from the integrated password manager</dd>
- <dt><a href="/en-US/docs/Code_snippets/Bookmarks" title="/en-US/docs/Code_snippets/Bookmarks">Bookmarks</a></dt>
- <dd>Code used to read and write bookmarks</dd>
- <dt><a href="/en-US/docs/Code_snippets/JavaScript_Debugger_Service" title="/en-US/docs/Code_snippets/JavaScript_Debugger_Service">JavaScript Debugger Service</a></dt>
- <dd>Code used to interact with the JavaScript Debugger Service</dd>
-</dl>
-
-<h2 id="SVG" name="SVG">SVG</h2>
-
-<dl>
- <dt><a href="/en-US/docs/Code_snippets/SVG_General" title="/en-US/docs/Code_snippets/SVG_General">General</a></dt>
- <dd>General information and utilities</dd>
- <dt><a href="/en-US/docs/Code_snippets/SVG_Animation" title="/en-US/docs/Code_snippets/SVG_Animation">SVG Animation</a></dt>
- <dd>Animate SVG using JavaScript and SMIL</dd>
- <dt><a href="/en-US/docs/Code_snippets/SVG_Interacting_with_script" title="/en-US/docs/Code_snippets/SVG_Interacting_with_script">SVG Interacting with Script</a></dt>
- <dd>Using JavaScript and DOM events to create interactive SVG</dd>
- <dt><a href="/en-US/docs/Code_snippets/Embedding_SVG" title="/en-US/docs/Code_snippets/Embedding_SVG">Embedding SVG in HTML and XUL</a></dt>
- <dd>Using SVG to enhance HTML or XUL based markup</dd>
-</dl>
-
-<h2 id="XUL_Widgets" name="XUL_Widgets">XUL Widgets</h2>
-
-<dl>
- <dt><a href="/en-US/docs/Code_snippets/HTML_in_XUL_for_rich_tooltips" title="/en-US/docs/Code_snippets/HTML_in_XUL_for_rich_tooltips">HTML in XUL for Rich Tooltips</a></dt>
- <dd>Dynamically embed HTML into a XUL element to attain markup in a tooltip</dd>
- <dt><a href="/en-US/docs/Code_snippets/Label_and_description" title="/en-US/docs/Code_snippets/Label_and_description">Label and description</a></dt>
- <dd>Special uses and line breaking examples</dd>
- <dt><a href="/en-US/docs/Code_snippets/Tree" title="/en-US/docs/Code_snippets/Tree">Tree</a></dt>
- <dd>Setup and manipulation of trees using XUL and JS</dd>
- <dt><a href="/en-US/docs/Code_snippets/Scrollbar" title="/en-US/docs/Code_snippets/Scrollbar">Scrollbar</a></dt>
- <dd>Changing style of scrollbars. Applies to scrollbars in browser and iframe as well.</dd>
- <dt><a href="/en-US/docs/Code_snippets/Autocomplete" title="/en-US/docs/Code_snippets/Autocomplete">Autocomplete</a></dt>
- <dd>Code used to enable form autocomplete in a browser</dd>
- <dt><a href="/en-US/docs/Code_snippets/Boxes" title="/en-US/docs/Code_snippets/Boxes">Boxes</a></dt>
- <dd>Tips and tricks when using boxes as containers</dd>
- <dt><a class="internal" href="/en-US/docs/Code_snippets/Tabbox" title="/en-US/docs/Code snippets/Tabbox">Tabbox</a></dt>
- <dd>Removing and manipulating tabs in a tabbox</dd>
-</dl>
-
-<h2 id="Windows-specific" name="Windows-specific">Windows-specific</h2>
-
-<dl>
- <dt><a href="/en-US/docs/Code_snippets/Finding_Window_Handles" title="/en-US/docs/Code_snippets/Finding_Window_Handles">Finding Window Handles (HWND)</a> (Firefox)</dt>
- <dd>How to use Windows API calls to find various kinds of Mozilla window handles. Window handles can be used for IPC and Accessibility purposes.</dd>
- <dt><a href="/en-US/docs/Accessing_the_Windows_Registry_Using_XPCOM" title="/en-US/docs/Accessing_the_Windows_Registry_Using_XPCOM">Using the Windows Registry with XPCOM</a></dt>
- <dd>How to read, write, modify, delete, enumerate, and watch registry keys and values.</dd>
-</dl>
-
-<h2 id="External_links" name="External_links">External links</h2>
-
-<p>The content at <a class="external" href="http://kb.mozillazine.org/Category:Example_code">MozillaZine Example Code</a> is slowly being moved here, but you can still find useful examples there for now.</p>
diff --git a/files/zh-cn/mozilla/add-ons/code_snippets/js_xpcom/index.html b/files/zh-cn/mozilla/add-ons/code_snippets/js_xpcom/index.html
deleted file mode 100644
index e5ab2b6189..0000000000
--- a/files/zh-cn/mozilla/add-ons/code_snippets/js_xpcom/index.html
+++ /dev/null
@@ -1,97 +0,0 @@
----
-title: JS XPCOM
-slug: Mozilla/Add-ons/Code_snippets/JS_XPCOM
-translation_of: Archive/Add-ons/Code_snippets/JS_XPCOM
----
-<p><span style="color: #000000; display: inline !important; float: none; font-family: Cantarell; font-size: 14.666666984558105px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;">{{LegacyAddonsNotice}}</span></p>
-
-<p>这是一些解决XPCOM组件相关的有用的JavaScript代码。</p>
-
-<h3 id="Contract_IDs" name="Contract_IDs">Contract IDs</h3>
-
-<p>契约ID是XPCOM对象独一无二的名字。它们用于创建或者获得XPCOM中的对象。</p>
-
-<h3 id="Interfaces" name="Interfaces">Interfaces</h3>
-
-<p>Every XPCOM object implements one or more interfaces. An interface is simply a list of constants and methods that can be called on the object, an example is <code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIFile" title="nsIFile is the correct platform-agnostic way to specify a file; you should always use this instead of a string to ensure compatibility.">nsIFile</a></code>. Every XPCOM object must implement the <code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Add-ons/Code_snippets/JS_XPCOM" title="">nsISupports</a></code> interface.</p>
-
-<h3 id="Accessing_XPCOM_components_from_JavaScript" name="Accessing_XPCOM_components_from_JavaScript">Accessing XPCOM components from JavaScript</h3>
-
-<p>XPCOM objects are either created as new instances (each creation gives you a completely new COM object) or as services (each access gives you the same COM object, often called a singleton). Whether you must create a new instance or access as a service depends on the contract. In order to get an XPCOM object you need to know the contract ID of the object and the interface that you wish to use on it.</p>
-
-<h4 id="Creating_an_instance_of_a_component" name="Creating_an_instance_of_a_component">Creating an instance of a component</h4>
-
-<p>The preferred method of creating XPCOM instances is via the <code><a href="/en-US/docs/Components.Constructor">Components.Constructor</a></code> helper. For example,</p>
-
-<pre class="brush: js">var nsFile = Components.Constructor("@mozilla.org/file/local;1", "nsIFile", "initWithPath");
-
-var file = new nsFile(filePath);
-</pre>
-
-<p>They can also be created and initialized manually:</p>
-
-<pre class="brush: js">var file = Components.classes["@mozilla.org/file/local;1"]
- .createInstance(Components.interfaces.nsIFile);
-file.initWithPath(filePath);
-</pre>
-
-<p>This creates a new instance of the object with contract ID <code>@mozilla.org/file/local;1</code> and allows you to call methods from the <code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIFile" title="nsIFile is the correct platform-agnostic way to specify a file; you should always use this instead of a string to ensure compatibility.">nsIFile</a></code> interface on it.</p>
-
-<h4 id="Getting_an_XPCOM_service" name="Getting_an_XPCOM_service">Getting an XPCOM service</h4>
-
-<pre class="brush: js">var preferences = Components.classes["@mozilla.org/preferences-service;1"]
- .getService(Components.interfaces.nsIPrefService);
-</pre>
-
-<p>You can then call any methods in the <code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Add-ons/Code_snippets/JS_XPCOM" title="">nsIPrefService</a></code> interface on the preferences object.</p>
-
-<h4 id="Getting_a_different_interface_for_a_component" name="Getting_a_different_interface_for_a_component">Getting a different interface for a component</h4>
-
-<p>Some components implement more than one interface. Sometimes JavaScript is clever enough to know all the interfaces available on a component, but in most cases you will have to explicitly check for an interface. With the preferences service from the previous example we can do the following:</p>
-
-<pre class="brush: js">var preferences = preferences.QueryInterface(Components.interfaces.nsIPrefBranch2);
-</pre>
-
-<p>This allows you to use the methods in the <code><a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Add-ons/Code_snippets/JS_XPCOM" title="">nsIPrefBranch2</a></code> interface.</p>
-
-<h4 id="Determining_which_interfaces_an_XPCOM_component_supports" name="Determining_which_interfaces_an_XPCOM_component_supports">Determining which interfaces an XPCOM component supports</h4>
-
-<p>To display a list of all interfaces that an XPCOM component supports, do the following:</p>
-
-<pre class="brush: js">// |c| is the XPCOM component instance
-for each (i in Components.interfaces) { if (c instanceof i) { alert(i); } }
-</pre>
-
-<p>In this context, <code>instanceof</code> is the same as <code>QueryInterface</code> except that it returns false instead of throwing an exception when <code>|c|</code> doesn't support interface <code>|i|</code>. Another difference is that <code>QueryInterface</code> returns an object, where as <code>instanceof</code> returns a <code>boolean</code>.</p>
-
-<h3 id="XPCOMUtils_-_About_protocol_handler" name="XPCOMUtils_-_About_protocol_handler">XPCOMUtils - About protocol handler</h3>
-
-<p>{{ Fx_minversion_inline(3) }}This example implements a quick about protocol handler in JS using <a href="/en/XPCOMUtils.jsm" title="en/XPCOMUtils.jsm">XPCOMUtils.jsm</a>.</p>
-
-<pre class="brush: js">Components.utils.import("resource://gre/modules/Services.jsm");
-Components.utils.import("resource://gre/modules/XPCOMUtils.jsm");
-const Cc = Components.classes;
-const Ci = Components.interfaces;
-
-function AboutHandler() {}
-AboutHandler.prototype = {
- newChannel: function(uri) {
- var channel = Services.io.newChannel("chrome://mystuff/content/mystuff.xul", null, null);
- channel.originalURI = uri;
- return channel;
- },
- getURIFlags: function(uri) {
- // Do NOT return Ci.nsIAboutModule.URI_SAFE_FOR_UNTRUSTED_CONTENT unless
- // you make sure to set a non-system principal in newChannel.
- return 0;
- },
-
- classDescription: "About MyStuff Page",
- classID: Components.ID("xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"),
- contractID: "@mozilla.org/network/protocol/about;1?what=mystuff",
- QueryInterface: XPCOMUtils.generateQI([Ci.nsIAboutModule])
-}
-
-var NSGetModule = XPCOMUtils.generateNSGetModule([AboutHandler]);
-}
-</pre>
diff --git a/files/zh-cn/mozilla/add-ons/code_snippets/modules/index.html b/files/zh-cn/mozilla/add-ons/code_snippets/modules/index.html
deleted file mode 100644
index 413e32f59a..0000000000
--- a/files/zh-cn/mozilla/add-ons/code_snippets/modules/index.html
+++ /dev/null
@@ -1,37 +0,0 @@
----
-title: Modules
-slug: Mozilla/Add-ons/Code_snippets/Modules
-translation_of: Archive/Add-ons/Code_snippets/Modules
----
-<p><span style="color: #000000; display: inline !important; float: none; font-family: Cantarell; font-size: 14.666666984558105px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"><font><font>{{LegacyAddonsNotice}}</font></font></span></p>
-
-<p><font><font>一些简单的代码将</font></font><a href="/en/JavaScript_code_modules" title="en / JavaScript代码模块"><font><font>JavaScript模块</font></font></a><font><font>转换为非Mozilla特定的代码(例如,如果移植到浏览器)。</font><font>eval()的使用可能不会被关注,因为它仅在</font></font><code>EXPORTED_SYMBOLS</code><font><font> 数组</font><font>上使用,</font><font>而不依赖于用户输入。</font></font></p>
-
-<pre class="brush: js"><font><font>函数importModule(thatObj){</font></font><font><font>
- thatObj = thatObj || </font><font>窗口;</font></font>
-<font><font>
- var EXPORTED_SYMBOLS = [</font></font><font><font>
- //把符号放在这里</font></font><font><font>
- ]。</font></font>
-<font><font>
- //你的代码在这里...</font></font>
-<font><font>
- //在你的代码结尾处:(假设'i'和'thatObj'都没有被导出!)</font></font><font><font>
- for(var i = 0; i &lt;EXPORTED_SYMBOLS.length; i ++){thatObj [EXPORTED_SYMBOLS [i]] = eval(EXPORTED_SYMBOLS [i]);}</font></font><font><font>
-}</font></font>
-</pre>
-
-<p><font><font>或一次性使用模块:</font></font></p>
-
-<pre class="brush: js"><font><font>(function(thatObj){</font></font><font><font>
- thatObj = thatObj || </font><font>窗口;</font></font>
-<font><font>
- var EXPORTED_SYMBOLS = [</font></font><font><font>
- //把符号放在这里</font></font><font><font>
- ]。</font></font>
-<font><font>
- //你的代码在这里...</font></font>
-<font><font>
- //在你的代码结尾处:(假设'i'和'thatObj'都没有被导出!)</font></font><font><font>
- for(var i = 0; i &lt;EXPORTED_SYMBOLS.length; i ++){thatObj [EXPORTED_SYMBOLS [i]] = eval(EXPORTED_SYMBOLS [i]);}</font></font><font><font>
-})(); </font><font>//可以在这里放置一个对象参数</font></font></pre>
diff --git a/files/zh-cn/mozilla/add-ons/code_snippets/queryselector/index.html b/files/zh-cn/mozilla/add-ons/code_snippets/queryselector/index.html
deleted file mode 100644
index 364909681f..0000000000
--- a/files/zh-cn/mozilla/add-ons/code_snippets/queryselector/index.html
+++ /dev/null
@@ -1,114 +0,0 @@
----
-title: QuerySelector
-slug: Mozilla/Add-ons/Code_snippets/QuerySelector
-tags:
- - $
- - $$
- - querySelector
-translation_of: Archive/Add-ons/Code_snippets/QuerySelector
----
-<p> {{ fx_minversion_header(3.5) }}</p>
-
-<p>沿着其他框架,如jQuery或Prototype, 缩短“querySelector”的名称可以很方便:</p>
-
-<pre class="brush: js"> HTMLDocument.prototype.$ = function (selector) {
-  // Only for HTML
- return this.querySelector(selector);
- };
- $(`div`);
- HTMLDocument.prototype.$$ = function (selector) {
- // Only for HTML
- return this.querySelectorAll(selector);
- };
- $$(`div`);</pre>
-
-<pre class="brush: js">function $ (selector, el) {
- if (!el) {el = document;}
- return el.querySelector(selector);
-}
-function $$ (selector, el) {
- if (!el) {el = document;}
- return el.querySelectorAll(selector);
- // Note: the returned object is a NodeList.
- // If you'd like to convert it to a Array for convenience, use this instead:
- // return Array.prototype.slice.call(el.querySelectorAll(selector));
-}
-alert($('#myID').id);
-</pre>
-
-<p>(请注意,在使用火狐浏览器控制台时,上述功能可自动使用.)</p>
-
-<p> XUL 甚至 XML可以很简单的支持(有以下两种替代方法,添加ChromeWindow.prototype 或者 Window.prototype,访问 this.document.querySelector, 或者根据jQuery 风格的链接,即在每个原型的$()方法中返回的‘this'</p>
-
-<pre class="brush: js">HTMLDocument.prototype.$ = function (selector) { // 只用于HTML
- return this.querySelector(selector);
-};
-
-Example:
-
-&lt;h1&gt;Test!&lt;/h1&gt;
-&lt;script&gt;
-HTMLDocument.prototype.$ = function (selector) {
- return this.querySelector(selector);
-};
-alert(document.$('h1')); // [object HTMLHeadingElement]
-&lt;/script&gt;
-</pre>
-
-<pre class="brush: js">XULDocument.prototype.$ = function (selector) { // 只用于XUL
- return this.querySelector(selector);
-};
-
-Example:
-
-&lt;label value="Test!"/&gt;
-&lt;script type="text/javascript"&gt;&lt;![CDATA[
-XULDocument.prototype.$ = function (selector) { // 只用于XUL
- return this.querySelector(selector);
-};
-
-alert(document.$('label')); // [object XULElement]
-]]&gt;&lt;/script&gt;
-</pre>
-
-<pre class="brush: js">Document.prototype.$ = function (selector) { // 只用于XML
- return this.querySelector(selector);
-};
-var foo = document.implementation.createDocument('someNS', 'foo', null); // Create an XML document &lt;foo xmlns="someNS"/&gt;
-var bar = foo.createElementNS('someNS', 'bar'); // add &lt;bar xmlns="someNS"/&gt;
-foo.documentElement.appendChild(bar);
-alert(foo.$('bar').nodeName); // gives 'bar'
-</pre>
-
-<pre class="brush: js">Element.prototype.$ = function (selector) { // 可用于HTML,XUL,XML
- return this.querySelector(selector);
-};
-
-HTML 例子:
-&lt;h1&gt;&lt;a&gt;Test!&lt;a/&gt;&lt;/h1&gt;
-&lt;script&gt;
-Element.prototype.$ = function (selector) {
- return this.querySelector(selector);
-};
-alert(document.getElementsByTagName('h1')[0].$('a').nodeName); // 'A'
-
-XUL 例子:
-&lt;hbox&gt;&lt;vbox/&gt;&lt;/hbox&gt;
-&lt;script type="text/javascript"&gt;&lt;![CDATA[
-Element.prototype.$ = function (selector) {
- return this.querySelector(selector);
-};
-var XULNS = 'http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul';
-alert(document.getElementsByTagNameNS(XULNS, 'hbox')[0].$('vbox').nodeName); // vbox
-]]&gt;&lt;/script&gt;
-
-XML 例子:
-&lt;foo xmlns="someNS"&gt;&lt;bar/&gt;&lt;/foo&gt; in document earlier
-var foo = document.getElementsByTagNameNS('someNS', 'foo')[0];
-alert(foo.$('bar'));
-
-</pre>
-
-<p>注意在XML中,  # 'id'选择器将不能体现为'id'属性(因此一个这样名字的属性不一定是XML的ID,尽管他在HTML 和XUL中是这样的), 也不会对 <a href="/en/xml/xml:id" title="en/xml/id">xml:id</a> 起作用.</p>
-
-<p>然而,它将工作于指向没有无前缀属性选择器 (例如'id',但是不是 xml:id: <a class="external" href="http://www.w3.org/TR/selectors-api/#resolving" rel="freelink">http://www.w3.org/TR/selectors-api/#resolving</a>) (即使 CSS3 支持命名空间属性选择器: <a class="external" href="http://www.w3.org/TR/css3-selectors/#attrnmsp" rel="freelink">http://www.w3.org/TR/css3-selectors/#attrnmsp</a> 以及可能将xml:id 当作 #: <a class="external" href="http://www.w3.org/TR/css3-selectors/#id-selectors" rel="freelink">http://www.w3.org/TR/css3-selectors/#id-selectors</a> ).</p>
diff --git a/files/zh-cn/mozilla/add-ons/code_snippets/timers/index.html b/files/zh-cn/mozilla/add-ons/code_snippets/timers/index.html
deleted file mode 100644
index f15f127f61..0000000000
--- a/files/zh-cn/mozilla/add-ons/code_snippets/timers/index.html
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: JavaScript timers
-slug: Mozilla/Add-ons/Code_snippets/Timers
-translation_of: Archive/Add-ons/Code_snippets/Timers
----
-<p><span style="color: #000000; display: inline !important; float: none; font-family: Cantarell; font-size: 14.666666984558105px; font-style: normal; font-weight: normal; letter-spacing: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;">{{LegacyAddonsNotice}}</span></p>
-
-<p> </p>
-
-<p>JavaScript的代码块通常情况下是顺序执行的。不过有几个JavaScript内置函数(计时器),能够让我们推迟任意指令的执行:</p>
-
-<ul>
- <li>{{domxref("window.setTimeout","setTimeout()")}}</li>
- <li>{{domxref("window.setInterval","setInterval()")}}</li>
- <li>{{domxref("window.setImmediate","setImmediate()")}}</li>
- <li>{{domxref("window.requestAnimationFrame","requestAnimationFrame()")}}</li>
-</ul>
-
-<p>The <code>setTimeout()</code> function is commonly used if you wish to have your function called <em>once</em> after the specified delay. The <code>setInterval()</code> function is commonly used to set a delay for functions that are executed again and again, such as animations. The <code>setImmediate()</code> function can be used instead of the <code>setTimeout(<em>fn</em>, <strong>0</strong>)</code> method to execute heavy operations in IE. The <code>requestAnimationFrame()</code> function tells the browser that you wish to perform an animation and requests that the browser schedule a repaint of the window for the next animation frame.</p>
-
-<h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2>
-
-<dl>
- <dt>{{domxref("window.setTimeout","setTimeout()")}}</dt>
- <dd>Calls a function or executes a code snippet after specified delay.</dd>
- <dt>{{domxref("window.setInterval","setInterval()")}}</dt>
- <dd>Calls a function or executes a code snippet repeatedly, with a fixed time delay between each call to that function.</dd>
- <dt>{{domxref("window.setImmediate","setImmediate()")}}</dt>
- <dd>Calls a function immediately after the browser has completed other operations, such as events and display updates.</dd>
- <dt>{{domxref("window.clearTimeout","clearTimeout()")}}</dt>
- <dd>Clears the delay set by <code>setTimeout()</code>.</dd>
- <dt>{{domxref("window.clearInterval","clearInterval()")}}</dt>
- <dd>Cancels repeated action which was set up using <code>setInterval()</code>.</dd>
- <dt>{{domxref("window.clearImmediate","clearImmediate()")}}</dt>
- <dd>Cancels the immediate actions, just like {{domxref("window.clearTimeout","clearTimeout()")}} for {{domxref("window.setTimeout","setTimeout()")}}.</dd>
- <dt><a href="/en-US/docs/Web/JavaScript/Timers/Daemons">Using JavaScript timers within animations (Javascript Daemons Management)</a></dt>
- <dd>In Computer science a <em>daemon</em> is a task that runs as a background process, rather than being under the direct control of an interactive user. In JavaScript programming language, all <em>daemons</em> are processes created by JavaScript timers or by a {{domxref("Worker")}} instantiation. Here are some code snippets which simplify and abstract the management of daemons.</dd>
- <dt>{{domxref("window.requestAnimationFrame","requestAnimationFrame()")}}</dt>
- <dd><code>requestAnimationFrame()</code> tells the browser that you wish to perform an animation and requests that the browser schedule a repaint of the window for the next animation frame. The method takes as an argument a callback to be invoked before the repaint.</dd>
- <dt>{{domxref("performance.now","performance.now()")}}</dt>
- <dd>
- <p><code>performance.now()</code> returns a timestamp, measured in milliseconds, accurate to one thousandth of a millisecond. This timestamp is equal to the number of milliseconds since the <code>navigationStart </code>attribute of the <a href="/en-US/docs/Navigation_timing" title="/en-US/docs/Navigation_timing"><code>performance.timing</code></a> interface.</p>
- </dd>
- <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now"><code>Date.now()</code></a></dt>
- <dd><code>Date.now()</code> returns the number of milliseconds elapsed since 1 January 1970 00:00:00 UTC.</dd>
- <dt><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers#Timeouts_and_intervals">Using JavaScript timers within workers</a></dt>
- <dd>Workers can use timeouts and intervals just like the main thread can. This can be useful, for example, if you want to have your worker thread run code periodically instead of nonstop.</dd>
- <dt><a href="/en-US/docs/Web/Guide/Needs_categorization/Functions_available_to_workers">Functions available to workers</a></dt>
- <dd>In addition to the standard JavaScript set of functions (such as String, Array, Object, JSON etc), there are a variety of functions available from the DOM to workers. This article provides a list of those.</dd>
- <dt><a href="/en-US/docs/Web/HTML/Canvas/Tutorial/Basic_animations">Basic animations</a></dt>
- <dd>Since we're using script to control canvas elements it's also very easy to make (interactive) animations. Unfortunately the canvas element was never designed to be used in this way (unlike Flash) so there are limitations.</dd>
- <dt><a href="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm" title="/en-US/docs/Mozilla/JavaScript_code_modules/Timer.jsm">Timer.jsm</a></dt>
- <dd>The <code>Timer.jsm</code> JavaScript code module contains pure-JavaScript implementations of <a href="/en-US/docs/DOM/window.setTimeout" title="/en-US/docs/DOM/window.setTimeout"><code>setTimeout </code></a>and <a href="/en-US/docs/DOM/window.clearTimeout" title="/en-US/docs/DOM/window.clearTimeout"><code>clearTimeout</code></a> that are compatible with the DOM window functions, but that can be used by code that does not have access to a DOM window (for example, <a href="/en-US/docs/Mozilla/JavaScript_code_modules" title="/en-US/docs/Mozilla/JavaScript_code_modules">JavaScript code modules </a>or <a href="/en-US/docs/The_message_manager" title="/en-US/docs/The_message_manager">content frame scripts</a>).</dd>
-</dl>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/window.setTimeout#Callback_arguments">Callback arguments polyfill</a></li>
- <li><a href="/en-US/docs/Web/API/window.setInterval#A_little_framework">A little <code>setInterval</code> framework</a></li>
- <li><a href="/en-US/docs/Web/JavaScript">JavaScript</a>, <a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Workers</a></li>
- <li><a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Using web workers</a></li>
- <li>{{domxref("window.performance")}}</li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date"><code>Date</code></a></li>
-</ul>
-
-<p>&lt;embed height="0" id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd" type="application/thunder_download_plugin" width="0"&gt;</p>