通过 HTML 按钮动态添加新的 UserScript

问题描述

我正在制作一个网站来发布我制作的一些脚本，我想在我的页面上创建一个按钮来动态安装带有 Tampermonkey 或 Greasemonkey 的 UserScript，就像在 Greasyfork 中一样。

解决方法

您可以尝试使用隐藏的 <a> 元素触发下载，其中 download 属性设置为以 .user.js 结尾的文件名。您可能需要在浏览器中 enable some settings 以检测用户脚本的下载打开情况。

注意：您可能需要将文本发送到服务器（PHP、Node 等...），将文件另存为 *.user.js，然后创建一个 {{1}使用 <iframe> 指向服务器上的文件名以触发正确的文件下载/安装。当您在 Greasyfork 上安装脚本时，它会下载托管在其服务器上的 href 文件。下载的文件名符合以下模式：

*.user.js

现代 Web 开发人员不赞成从客户端或本地文件系统下载脚本。

https://greasyfork.org/scripts/<ID>-script-name/code/Script%20Name.user.js

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);

.user-script {
  width: 100%;
  height: 8em;
}

greasemonkey html javascript tampermonkey