将 Greasemonkey 脚本转换为可注入的 JS（无插件）

Question

提前感谢您的帮助。基本上我在网页中使用 Rambox Pro（注入 JS 和 CSS 支持的基本浏览器）作为我的工作站，我在使用 Notion 并且想要在 Rambox Pro 中使用这个特定的 Greasemonkey 脚本。我希望通过将其注入（通过 JS 选项）来做到这一点。

原始link to post & the link到具体的JS脚本。

我已经通过这里的帮助将 GM_addstyle 更改为 document.body.appendChild（但出现控制台超时错误），因此没有使用 GM。我忽略了超时错误并尝试使用脚本，但我收到错误 Katex is unknown 所以我尝试使用 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.js"></script> 导入 Katex 但我不断收到 Uncaught SyntaxError: Unexpected token < 错误

我已经放弃尝试自己转换它了——谁能帮我把这个脚本完全转换成纯可注入的 JS。代码是：（从link复制）

// ==UserScript==
// @name Inline Math for Notion.so
// @homepageURL https://www.notion.so/evertheylen/Notion-Inline-Math-9c5047a4e7c84643848b3630db8d5a5e
// @version 0.2.1
// @match https://www.notion.so/*
// @grant GM_addStyle
// @require https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.js
// ==/UserScript==

// Instructions for use:
//   - Make sure you have at least one normal math block on your page
//   - Use inline code starting with "math:". For example: `math: f(x) = x^2`
//   - Press F2 to rerender all inline math. You can of course change the shortcut in the code below.
//   - The inline math will revert to inline code when the block becomes active.

GM_addStyle(`
.notion-frame span .katex {
    padding-right: 0 !important;
}
`)

function rerender_all() {
    var code = document.querySelectorAll("span[style*=\"monospace\"]")
    code.forEach(function(el) {
        var s = el.textContent
        if (s.startsWith("math:")) {
            el.style.color = null
            el.style.background = null
            s = s.slice(5).trim()
            console.log("rendering ", s)
            katex.render(s, el, {throwOnError: false, font: 'mathit'})
        }
    })
}

window.addEventListener('keydown', function(e) {
    if (e.key == "F7" && !e.ctrlKey && !e.shiftKey && !e.altKey) {
        console.log("rerender!");
        rerender_all()
    }
}, true)

// I don't know a good way to trigger rerender automatically yet
//document.addEventListener('DOMContentLoaded', rerender_all, false);

旁注，如果相关 - 我也将 CSS 注入其中（如果重要的话）并且 RamboxPro 不支持任何扩展（仅注入 JS 和 CSS）（它具有普通的 Web 开发人员模式）。如果需要，我可以提供任何帮助 possible/feasible。

此外 - 无需检查页面是否正确（如果重要的话），因为 JS 和 CSS 注入是独立于应用程序的（也就是我只会在概念应用程序上注入它）加载概念页面）

谢谢

Answer 1

GreaseMonkey 脚本只是 JavaScript。

一个考虑因素是 GM API，在这种情况下是 // @grant GM_addStyle

1- 变化

GM_addStyle(`
.notion-frame span .katex {
    padding-right: 0 !important;
}
`)

更改为：

const style = document.createElement('style');
style.textContent = `.notion-frame span .katex { padding-right: 0 !important; }`;
(document.head || document.body).appendChild(style);

2- 得到 @require

const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.js';
(document.head || document.body).appendChild(script);

3- 您需要一种方法将脚本注入目标位置，即 https://www.notion.so/*

这是修改后的用户脚本的示例。你还需要一个方法来注入它。

// inject CSS
const style = document.createElement('style');
style.textContent = `.notion-frame span .katex { padding-right: 0 !important; }`;
(document.head || document.body).appendChild(style);

const script1 = document.createElement('script');
script1.textContent = `
// inject the script to run after remtoe scritp is loaded
function runCode() {
    function rerender_all() {
        var code = document.querySelectorAll('span[style*="monospace"]')
        code.forEach(function(el) {
            var s = el.textContent
            if (s.startsWith("math:")) {
                el.style.color = null
                el.style.background = null
                s = s.slice(5).trim()
                console.log("rendering ", s)
                katex.render(s, el, {throwOnError: false, font: 'mathit'})
            }
        })
    }

    window.addEventListener('keydown', function(e) {
        if (e.key == "F7" && !e.ctrlKey && !e.shiftKey && !e.altKey) {
            console.log("rerender!");
            rerender_all()
        }
    }, true)
  }
`;
document.body.appendChild(script1);


// wait for the external script to laod
const script2 = document.createElement('script');
script2.onload = runCode;
(document.head || document.body).appendChild(script2);
script2.src = 'https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.js';

将 Greasemonkey 脚本转换为可注入的 JS（无插件）

Convert Greasemonkey script into an injectable JS (no addons)

javascript

greasemonkey

javascript-injection