我如何使用 tampermonkey href 本地文件?
How can i href a local file using tampermonkey?
我想通过 href 替换站点的 CSS 文件 URL,我知道可以引用包含 css 的外部链接,但是本地文件呢?
document.querySelector("head > link:nth-child(7)").href = "http://example.com/style.css"
一个选项是本地文件是 脚本,也许是将所需的 CSS 文本分配给 window
[=34] =],然后可以在您的用户脚本中检索。例如:
// ==UserScript==
// @name local
// @match https://example.com
// @require file:///C:/local.js
// ==/UserScript==
document.head.appendChild(document.createElement('style'))
.textContent = window.cssTextFromLocal;
和
// local.js
window.cssTextFromLocal = `
body {
background-color: green;
}
`;
当然,如果您想无条件地(在每次页面加载时,无论如何)执行此操作,则不需要inter-script通信,您可以插入<style>
进入DOM里面local.js
.
与所有 Chrome 扩展一样,默认情况下 Tampermonkey 受到许多旨在防止开发人员恶意行为的限制。如果 Tampermonkey 可以不受限制地访问您的文件系统,用户脚本作者很容易滥用权限在您不知情的情况下窃取或修改您的数据。
您可以做的最接近的事情是在您的本地机器上托管一个服务器(例如 Node.js)。这将允许您为 Tampermonkey 提供 URL 之类的 localhost/style.css
,它将在您的计算机本地提供。不过,这只有在您拥有服务器 运行 时才有效。
或者,您可以创建自己的 developer-mode Chrome 扩展,在其 web_accessible_resources
中包含样式表并根据 DeclarativeContent
规则注入它。不过,这将完全绕过 Tampermonkey,因此它并不能完全回答问题。
我想通过 href 替换站点的 CSS 文件 URL,我知道可以引用包含 css 的外部链接,但是本地文件呢?
document.querySelector("head > link:nth-child(7)").href = "http://example.com/style.css"
一个选项是本地文件是 脚本,也许是将所需的 CSS 文本分配给 window
[=34] =],然后可以在您的用户脚本中检索。例如:
// ==UserScript==
// @name local
// @match https://example.com
// @require file:///C:/local.js
// ==/UserScript==
document.head.appendChild(document.createElement('style'))
.textContent = window.cssTextFromLocal;
和
// local.js
window.cssTextFromLocal = `
body {
background-color: green;
}
`;
当然,如果您想无条件地(在每次页面加载时,无论如何)执行此操作,则不需要inter-script通信,您可以插入<style>
进入DOM里面local.js
.
与所有 Chrome 扩展一样,默认情况下 Tampermonkey 受到许多旨在防止开发人员恶意行为的限制。如果 Tampermonkey 可以不受限制地访问您的文件系统,用户脚本作者很容易滥用权限在您不知情的情况下窃取或修改您的数据。
您可以做的最接近的事情是在您的本地机器上托管一个服务器(例如 Node.js)。这将允许您为 Tampermonkey 提供 URL 之类的 localhost/style.css
,它将在您的计算机本地提供。不过,这只有在您拥有服务器 运行 时才有效。
或者,您可以创建自己的 developer-mode Chrome 扩展,在其 web_accessible_resources
中包含样式表并根据 DeclarativeContent
规则注入它。不过,这将完全绕过 Tampermonkey,因此它并不能完全回答问题。