通过超文本标记语言按钮动态添加新的UserScript

Question

我正在做一个网站来张贴我做的一些脚本，我想在我的页面上创建一个按钮，以动态安装的UserScript与坦帕猴或Greasemonkey，就像在

Greasyfork

..。

页面示例：

脚本示例

Answer 1

您可以尝试使用隐藏的

元素使用

属性设置为以

..。您可能需要

启用某些设置

在您的浏览器中检测下载打开的UserScripts。

注意：

您可能需要将文本发送到服务器(PHP、Node等)，将文件另存为

然后创建一个

</code> with an <code>href</code> poiting to the filename on the server to trigger a proper file download/install. When you install a script on Greasyfork, it downloads a <code>*.user.js</code> file that is hosted on their server(s). The filename that is downloaded fits the following the pattern:</p> <blockquote> <p><code>https://greasyfork.org/scripts/<ID>-script-name/code/Script%20Name.user.js</code></p> </blockquote> <p>Downloading scripts from the client or local file system is frowned upon in modern web dev.</p> <p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>const download = (content, mimeType, filename) => {   const     a = document.createElement('a'),     blob = new Blob([content], {type: mimeType}),     url = URL.createObjectURL(blob);   a.setAttribute('href', url);   a.setAttribute('download', filename);   a.click();   console.log(`Downloading: ${filename}`); };  const extractFilenameFromScript = (script) => {   const [, scriptName] = script.match(/^\/\/\s*@name\s+(.+)$/m);   return `${scriptName.replace(/[^a-z0-9]+/ig, '-').toLowerCase()}.user.js`; };  const downloadScript = () => {   const script = document.querySelector('.user-script').textContent.trim();   const filename = extractFilenameFromScript(script);   download(script, 'text/javascript', filename); };  document.querySelector('.download-btn').addEventListener('click', downloadScript);</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>.user-script {   width: 100%;   height: 8em; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><textarea class="user-script">// ==UserScript== // @name         My Awesome Script // @namespace    com.stackoverflow.questions // @version      1.0.0 // @description  An example UserScript to download // @author       Mr. Polywhirl // @match        https://stackoverflow.com/questions/66428142 // @grant        none // ==/UserScript== (function() {     'use strict';     alert('Hello World'); })(); </textarea> <button class="download-btn">Download</button></code></pre> </div> </div> <p></p>