一键安装/更新CSS研究

Mapaler commented 7 years ago

我研究了很久的stylish官网userstyles的调用安装方式，都没搞懂到底是怎么搞的，太复杂了。 @xioxin 你搞不搞得懂？如果能调用Stylish自身的安装接口，一键更新CSS，就可以减少去E站找Stylish样式再右键编辑再保存那么多步骤了。 https://userstyles.org/styles/137583/pixivuserbatchdownload-ui

xioxin commented 7 years ago

head 添加 <link rel="stylish-code-chrome" href="https://userstyles.org/styles/chrome/143298.json" />

然后触发 stylishInstallChrome 事件

var t = document.createEvent("Events");
t.initEvent('stylishInstallChrome', !1, !1, window, null);
document.dispatchEvent(t)

但是

貌似只有userstyles.org 网站下有效自己模拟了一下没有成功

xioxin commented 7 years ago

看了安装脚本只添加到他自己网站下

    {
      "matches": ["http://userstyles.org/*", "https://userstyles.org/*"],
      "run_at": "document_start",
      "all_frames": false,
      "js": ["install.js"]
    }

xioxin commented 7 years ago

http://blog.chinaunix.net/uid-27070210-id-3254046.html 这样完全由油猴子保存数据油猴子添加样式干脆不用stylish

xioxin commented 7 years ago

突然发现为什么插件里的 GM方法都是模拟的那？

Mapaler commented 7 years ago

火狐的开发工具能直接看到元素绑定的事件，不知道火狐这边的代码对你有没有用。连接了这个文件 https://userstyles.org/ui/app.js https://userstyles.org/ui/app.js.map 但是我没有看到具体实现，扩展源代码里好像是有调用，但是看到一句 pref("extensions.stylish.install.allowedDomains", "userstyles.org"); 也是限制了只准在userstyles.org安装？

如果用油猴写可能就不用CSS的方式了，能够还原简介里的更多细节，简介调控也更方便。但是油猴的缺点有 1、很容易因为网站结构变化导致程序代码出错而整个崩溃。 2、每次打开网页都需要重新计算一遍，消耗资源。 3、需要等DOM加载完成，速度较慢，一般会先看到一堆英文。 4、每次更新代码都需要刷新网页，Stylish可以即时生效。

GM模拟是因为油猴里面运行的时候是不会显示任何错误的（黑盒？），这些部分全都是可以用普通的功能完成的，就尽量用普通的代码写，可以在浏览器内直接运行调试看哪里出错了。

这个脚本还好，目前所有的都不需要特殊权限，但是我的其他脚本就有跨域的，必须用GM插件，但是用了这个就没法在浏览器调试，于是我就写了一个仿GM函数，基本囊括了主要功能，检测到没有GM_xmlhttpRequest时就是我浏览器直接运行或者没使用插件的情况，直接用XMLHttpRequest，检测到有GM_xmlhttpRequest时还是继续用插件，不需要为不同调试环境编写不同的代码。

而且用惯了GM_xmlhttpRequest的格式后，原生XMLHttpRequest的写法也会感觉有点麻烦，所以就应用到了其他脚本里面，有跨域需要的时候，只需要开启插件就可以立即使用了。

储存值那一堆也是受了相同的影响，减少将来可能需要插件导致的代码修改工作。但是目前只有PixivUserBatchDownload，为了让储存的密码不要直接在浏览器开发者工具就能看到，用了插件，其他的HTML5的储存完全够用。

xioxin commented 7 years ago

设置上// @run-at document-start速度一点也不慢样式和现在一样手动生成然后GM_setValue存起来如果是ehentai的网站就直接 GM_getValue 把样式取出来 GM_addStyle 把样式设置上效率上应该和 stylish 一样不过为了跨域存储数据 GM方法就必须用黑盒里的了

Mapaler commented 7 years ago

你的意思是也用CSS来替换而不是JS直接修改DOM？

xioxin commented 7 years ago

嗯只是 stylish 的工作直接让油猴子干

xioxin commented 7 years ago

untitled2

我写了一个通过GM_addValueChangeListener 甚至可以不刷新页面

xioxin commented 7 years ago

代码在这里 https://github.com/xioxin/EhTagTranslator/blob/master/EhTagBuilder.user.js

Mapaler commented 7 years ago

https://github.com/Mapaler/EhTagTranslator/invitations

我最近较忙，没时间做，直接把你邀请了，如果有需要的话你可以自己修改。

xioxin commented 7 years ago

我先完善好了的

xioxin commented 7 years ago

Mapaler commented 7 years ago

其实我觉得这边的版本应该另外做一个名字，比如叫EhTagTranslator-DirectlyCSSbyJS之类的。这边版本不需要生成JSON，也不需要显示输出CSS文本。只有获取最新数据库生成CSS保存到GM数据库的功能，平时就是直接读取CSS加载到页面。

xioxin commented 7 years ago

油猴子脚本可以多个文件模块化开发吗

xioxin commented 7 years ago

如果分成两个插件应该就不能共享数据库了把
如果把整个解析脚本copy过来的话维护也很不方便

Mapaler commented 7 years ago

好像不能吧，但是要共享数据库，就可以用油猴的savevalue插件啊，我记得我也是写了模拟版的，需要切换时开启插件即可。

Mapaler commented 7 years ago

油猴可以导入其他脚本，但是不会自动更新导入的其他脚本的。所以想要模块化开发最好用node，然而我不会。

xioxin commented 7 years ago

你看看这个合并请求干脆就写一起把

xioxin commented 7 years ago

我用了GM方法控制台依旧可以打印日志和错误信息貌似并没啥影响

Mapaler commented 7 years ago

不要用GM_log那个是不支持了的。用GM插件载入的脚本在运行正常的时候可以正常用console.log打印日志，但是一旦脚本发生错误将什么都不能看见（火狐的油猴，没试过Chrome）。只有用Try Catch内的错误才会显示，找起来特别麻烦。而代码草稿纸直接运行的脚本会直接显示第几行错误。

xioxin commented 7 years ago

哦哦 chrome 倒是都能显示错误信息

Mapaler commented 7 years ago

不显示错误信息应该是属于沙盒导致的吧

Mapaler commented 7 years ago

@xioxin 我先修改了一些你的代码。但是目前发现问题就是火狐55下，油猴GM_addStyle失效，E站上什么变化也没有，54还可以用。

因为还不够完善，所以我先在这个分支开发测试。

d6784a0b5684c4f06fddd08a9ba8c2006c4dc3f0

Mapaler commented 7 years ago

要不要改成自己添加style到head？

Mapaler commented 7 years ago

改成

// @run-at      document-idle

后，火狐55可以用

讨论我看不懂 https://github.com/greasemonkey/greasemonkey/issues/2515

只看了油猴文档 https://wiki.greasespot.net/Metadata_Block#.40run-at

xioxin commented 7 years ago

自己添加可能没有GM_addStyle快

Mapaler commented 7 years ago

你看得懂他们的高端讨论吧，看看是什么意思。看起来是Fx55某个版本开始突然不能再document-start获取到head了。GM_addStyle的实现方法就是添加到head。

Mapaler / EhTagTranslator

一键安装/更新CSS研究 #19

但是