Конвертировать скрипт Greasemonkey в JS для инъекций (без аддонов) - PullRequest
Новая
       63

Конвертировать скрипт Greasemonkey в JS для инъекций (без аддонов)

0 голосов
/ 12 марта 2020

Заранее благодарю за помощь. В основном я использую Rambox Pro (браузер basi c с добавлением поддержки JS и CSS) в веб-страницы в качестве моей рабочей станции, и я использую Notion и хочу этот конкретный скрипт Greasemonkey в Rambox Pro. Я надеюсь сделать это, введя его (с помощью опции JS).

Оригинал ссылка для публикации и ссылка для указания c JS script.

Я зашел так далеко, что изменил GM_addstyle в document.body.appendChild с помощью справки (но получил ошибку тайм-аута консоли), поэтому не использовал GM. Я проигнорировал ошибку тайм-аута и попытался использовать сценарий, но получаю ошибку. Katex неизвестен, поэтому я попытался импортировать Katex с <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.js"></script>, но я продолжаю получать Uncaught SyntaxError: Unexpected token < error

С тех пор я отказался от пытаясь конвертировать его сам - может кто-нибудь помочь мне полностью преобразовать этот скрипт в чисто инъекционный JS. Код: (скопировано по ссылке) 

// ==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) (имеет нормальный режим веб-разработчика). Я помогу, если понадобится, если это будет возможно / выполнимо.

Кроме того, нет необходимости проверять правильность страницы (если она имеет значение), так как инъекции JS & CSS являются приложением независимый (иначе я буду только впрыскивать это в приложение понятия, которое загружает страницы понятия)

Спасибо

1 Ответ

0 голосов
/ 14 марта 2020

Сценарий GreaseMonkey просто JavaScript.

Одним из соображений является GM API, в данном случае это // @grant GM_addStyle

1- Change 

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

change на: 

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';
...