Board logo

标题: [经验交流] 让 TW6.x 支持 Userscript [打印本页]

作者: qiwei_201    时间: 2013-11-7 00:34     标题: 让 TW6.x 支持 Userscript

本帖最后由 qiwei_201 于 2013-11-22 15:39 编辑

写在前面的建议:
       看了论坛里的一些各种建议,有的希望继续精简,有的希望增加部分功能,我想说的是开发人员应该比用户更加清楚增加(减少)某一功能而带来的性能上降低(增高),如果某一其它浏览器的功能不影响或影响极小内核的性能,那就加上,反之就不加或去掉。

        已经好多年了没有用过TW了,平时主要是用Firefox,Chrome内存占用不是一般的多,尤其是开多个网页,在功能上和同等性能资源战胜上取得平衡最好的还是Firefox,最近无意中发现TW6版,就试了一下,资源占用和性能不是一般得满意,真希望TW6不要像其它浏览器变得越来越臃肿了。

       其实软件定位很重要,要说功能上或可扩展性最强应该非Firefox莫属,资源占用最小的应该是Opera(当然是指原有核心的版本),而性能加功能Chrome类就行(其实本人一点也没觉得Firefox在性能上输过Chrome)。关于使用Chromium核心的第三方浏览器中,在功能上最符合中国特色应属Maxthon,其它的各种壳都大同小异,没有多大特色,搜狗的在教育网环境中有一些优势。所以说希望TW6要想有特色,就不可能迎合所有人的习惯,用户完全可以用多个浏览器搭配上使用,把资源占用底速度快的TW6做为主力,有特殊需求的时候开其它浏览器。

      本人比较需要或希望有的功能:
      1、自定义下载,最好可以自己添加或修改调用软件的命令行参数,如果有了这个其它的预置可有可无,为了照顾对电脑不熟悉的用户,可以预置一些常见下载工具调用。添加这个功能不会对核心的性能产生任何影响,并且需要添加的代码也不大,只是看开发人员原不愿意。
      2、开发人员工具,有了这个至少可以看看控制台错误、即时修改一下页面、监视一下那个网络请求比较慢等,其实Chrome的开发人员工具做的很好,一点也不比Firefox+Firebug差。但是有可能因为TW的核心太精简了,很多API去掉了,已经不方便添加这个工具了,如果真是加这个工具而对核心影响很大,那这个建议就算了。
      3、提供重载代理的开关,本人用的是命令行参数加载的代理设置--proxy-pac-url,如果对代理列表做了修改,需要重启浏览器才能生效。Chrome里可以用chrome://net-internals/#proxy中的Re-apply settings的功能,可惜TW把这些精简了,这也需要开发人员衡量得失。

今天有点时间,再接着写一点,下星期陪家人去医院呀,更没时间了。

先说一下主要思路,完了再细说:
我们知道Userscript其实就是让脚本文件在符合条件的网页中运行,也就是把脚本内容注入到当前页面内容中,当然,一般的插件还提供一些脚本管理功能和一些常用的函数。
所以我们就针对把脚本注入到页面中让他运行,至于有的脚本中需要调用插件提供的特有函数,我们就自己再给他提供这些函数(不是所有函数都能实现,有的需要浏览器的API)。

怎么把脚本注入到页面中呢? 也就是再浏览器下载网页的时候动态的修改页面有源代码。记得TW之前的版本支持的广告过滤能修改页面源代码,就是不止能拦截或去掉,更主要是能改写。
这样就能把脚本地址或内容注入到页面中去了,可惜新版TW还没有这个功能,听说将来要加,这个功能比较展望!

既然浏览器不提供修改页面的功能,接下来我就从别的方面想想办法。我们知道访问网页的简单过程是,浏览器先向服务器发出请求------->服务器再把被请求的内容通过源码的形式发回到浏览器----->浏览器**到源码,再渲染、运行、呈现给用户。因为我们比浏览器能早接触到原始源码的过程只有在服务器在返回到浏览器的时候,所以我们可以再服务器到浏览器中间做一些文章,那怎么做了? 我想大家可能想到代理服务器了。设想一下,我们如果是使用代理服务,所有内容都要通过代理服务器做中转,那代理服务器可以对所经过它的所有数据做修改。

我们现在需要做的是怎么在代理服务器上根据一些条件修改不同的网页内容。

先说下使用代理的弊端,不是每个人都有自己的代理服务器,即使有也没必要让所有网络传输都走代理,这样做既浪费资源,又影响网速。所有我们最好要一个能在本机运行的、支持二级代理的、可以自己编写规则的代理软件。在这里我推荐使用Privoxy,Privoxy的介绍可以自行上网搜。Privoxy的功能不是一般的强大,占用资源也比较小。我有很多规则,资源占用也很小,内存10mb左右,CPU小于0.01。她既然可以修改内容,那也就代表可以去广告什么的。值得一提的是她还自带一个功能比较弱的本地web服务。

接下就要详细说一下通过Privoxy给网页注入脚本。

今天先列个大体步骤,等有时间再写。

1、把浏览器的代理指向 Privoxy
2、在Privoxy的配置文件user.filter中添加规则,类似于:
  1. FILTER: baidu_music
  2. s@(?=</html>)@<script src="//userscripts.org/scripts/source/175746.user.js">\n// 百度音乐助手 1.2.3\n</script>\n\
  3. <script src="//userscripts.org/scripts/source/164420.user.js1">\n// BaiduMusicDownloadLinkResolver\n</script>\n@
复制代码


3、Privoxy的配置文件user.action中添加规则,类似于:
  1. { \
  2. +filter{userscript} \
  3. +filter{baidu_music} \
  4. }
  5. music.baidu.com/song/.*
复制代码




这些只是简单的原理,以上规则还不全,不能直接使用,还需要处理跨域问题、Userscript的API等,大家可以先了解一下Privoxy的使用方法,等下一次我接着再写。
还可以配合PAC文件能根据不同浏览器写不同规则,如: 在Firefox中不用注入脚本,在IE中个别网址不启用脚本功能等!




下面是使用Userscript的图:
这个是Feedly.com用了脚本Feedly Colorful Listview的图
ScreenShot_2013-11-07_003005.png

这个是给所有网页加上翻译的功能,用了脚本Google Translator Tooltip Expanded
ScreenShot_2013-11-07_003622.png

这个是让百度像必应一样,用了脚本 百变饼(修改版)
ScreenShot_2013-11-22_112912.jpg

这个是可以下载百度音乐上的无损格式,用的脚本: 百度音乐助手
ScreenShot_2013-11-22_152400.png

图片附件: [Feedly Colorful Listview] ScreenShot_2013-11-07_003005.png (2013-11-7 00:27, 255.65 KB) / 下载次数 5724
http://bbs.theworld.cn/attachment.php?aid=115562&k=d6e7fbe394c6bf06ec599a9d986cecba&t=1732597104&sid=6QAUvd



图片附件: [Google Translator Tooltip Expanded] ScreenShot_2013-11-07_003622.png (2013-11-7 00:33, 199.57 KB) / 下载次数 5700
http://bbs.theworld.cn/attachment.php?aid=115563&k=60b98730a88ec9e03303d08d7a07558b&t=1732597104&sid=6QAUvd



图片附件: [百度音乐助手] ScreenShot_2013-11-22_152400.png (2013-11-22 15:21, 152.49 KB) / 下载次数 5645
http://bbs.theworld.cn/attachment.php?aid=115643&k=daf60ac76fc557523be536cdb29aa3a9&t=1732597104&sid=6QAUvd



图片附件: [百变饼(修改版)] ScreenShot_2013-11-22_112912.jpg (2013-11-22 15:26, 151.3 KB) / 下载次数 5661
http://bbs.theworld.cn/attachment.php?aid=115644&k=6b05a0797d31afe594ded93e7167ffbe&t=1732597104&sid=6QAUvd


作者: 旧时光    时间: 2013-11-7 06:09

渲染不错,敢不敢把配置文件上传
作者: cantonadong    时间: 2013-11-7 09:27

楼主标题党。
作者: lovewen    时间: 2013-11-7 17:17

Firefox冷启动是硬伤,当然SSD另论
作者: AK174    时间: 2013-11-7 17:19

就等LZ编辑完成了 别爽约哦
作者: 412268499    时间: 2013-11-7 17:24

先马克下。
作者: xbin    时间: 2013-11-7 20:22

我也想知道怎么搞,怎么不继续了?
作者: sun3596209    时间: 2013-11-7 22:41

本帖最后由 sun3596209 于 2013-11-25 19:28 编辑

好吧,等了这么多天就看到一个这样的结果
用楼主的方法可以让其他浏览器,比如IE也用上部分脚本
作者: war132553    时间: 2013-11-8 10:55

LZ用的是哪款翻译软件呀
作者: needed    时间: 2013-11-23 09:13

这种方法跟 原生的 扩展有点不太一样.. 虽然从性能或者便利性几乎差不多.

  也跟我现在在用第一个叫 proximitron 的软件同出一辙.

不过有些时候.. api 接口什么的. 还是不能达到原生效果.

就拿 读取cookie来说.   chrome 提供了一个chorme.cookies 来读取全部的cookie 包括httponly

但脚本来说无法做到
作者: 向日葵    时间: 2013-11-23 09:38

其实TW是支持插件的。
自己建一个plugin文件夹然后放插件进主目录就行了。
脚本看看先,
作者: qiwei_201    时间: 2013-11-25 17:29

回复 10# needed


   你说的确实不错,我本来也就是提出一个临时解决方案,其实原理最重要,很多软件都可以,包括一些其它广告过滤软件(Ad Muncher)、代理软件、自己搭建服务器等!

这种方式确实有一些局限性,不过大部分脚本都可以工作(尤其是那些夸浏览器的脚本),有一些可能需要稍微做一些改动。就连Chrome也没有把所有API实现,要说强大还数原生的Firefox,我说的这种方式只是为了TW的精简和性能,再做一些不影响性能的扩展!

吐嘈一下: 为什么每次编辑完贴子需要审核好长时间,都弄的我不敢编辑帖子了!
作者: 412268499    时间: 2013-11-25 18:11

回复  needed


   你说的确实不错,我本来也就是提出一个临时解决方案,其实原理最重要,很多软件都可 ...
qiwei_201 发表于 2013-11-25 17:29

审核应该是帖子中有关键字。。。监 视好像是,还有你被显示为星号的那两个字可能也是。
作者: byyh    时间: 2013-11-25 18:42

http://bbs.theworld.cn/thread-223376-1-1.html
作者: 未止    时间: 2013-11-25 20:26

这个我想用奶牛也是可以实现的
作者: byyh    时间: 2013-11-25 20:44

这个我想用奶牛也是可以实现的
未止 发表于 2013-11-25 20:26



    卡饭的未止?
作者: 8905438    时间: 2013-11-25 21:49


好难得碰上一个用privoxy的,而且懂的还不少。我也在用privoxy,不过英文盲,官方文档基本看不懂,也就用用redirect、forward、filter、block,其他的都不会,想楼主介绍的这个插入js的方法我就不会。楼主有什么中文文档可以分享吗?还有,配置能分享学习一下吗?可以删掉某些比较私密的规则。

  1. { \
  2. +filter{userscript} \
  3. +filter{baidu_music} \
  4. }
复制代码


为什么要用{} 把两个filter括起来?为什么还加了3个“\”号?按我以前的理解,如果要应用baidu_music的规则,只要
  1. +filter{baidu_music}
  2. music.baidu.com/song/.*
复制代码

就可以了吧?+filter{userscript}是纯演示?
作者: moccolon    时间: 2013-11-26 09:51

不明觉厉的样子~~我是比较支持开启脚本支持的~~
作者: qiwei_201    时间: 2013-11-26 15:56

回复 16# byyh

其实我昨天晚上还上来看了下有没有人看这个帖子,结果很粗心没有看到有下一页,我还以为人们对这个帖子没兴趣似的

回答问题:
用大括号把多个规则括起来,这是把多个规则看做一个整体,+filter{userscript}这个不是演示,是我的配置中写的,这里边就是针对所有要使用userscripts.org下的脚本需要的公用函数。
每一句后的反斜杠是链接一下行的意思,就是{+filter{userscript} +filter{baidu_music}}的另一种写法,其实这是一条规则,只不过里边还有子规则,一条规则本应该只能写在一行上(程序读取的时认为的一行),而当我们子规则比较多的时候,写在一行可读性很差,所以写成多行,再用转义符号把换行符转义掉,这样就两者都兼顾了。

把规则划分的细一点是为了通用性,也减少了重复定义规则。

等我弄明白了审核的问题,会接着往下讲解的,会涉及到PAC高级应用、Privoxy的详细使用、常用userscripts脚本等。

这几天陪家人做手术,可能顾不上,估计下星期可以接着写下去了,我平时不怎么发帖子,发这个帖子也要看看感兴趣的人多不多,看的人越多,我也就有必要写的多点,综合的内容也多一点,如果人们不怎么感兴趣,我也不想写下去,毕竟也耽误时间。
作者: 8905438    时间: 2013-11-26 18:44

回复 19# qiwei_201


    原来如此,多谢解答。家人比较重要,等家人那边好了再考虑其他的吧。
虽然我很想继续看你发接下去的教程,不过不得不说,似乎用tw的小白更多,我猜很大一部分人不会对privoxy感兴趣。“PAC高级应用、Privoxy的详细使用、常用userscripts脚本等。”这些都好想学习了解,真心希望你能继续写下去,金子总会发光的,需要的人一定会通过搜索引擎发现这里。privoxy国内的文章太少了,目前我收集到的就这几篇:
陈三:使用 Privoxy 屏蔽网页广告http://www.zfanw.com/blog/block-webpage-ad-with-privoxy.html
Lainme:privoxy——广告过滤和自动代理切换http://www.lainme.com/doku.php/b ... 6%E5%88%87%E6%8D%A2
muzuiget:强大的代理调度器代理 Privoxyhttp://qixinglu.com/post/powerful_filter_proxy_privoxy.html
依云:privoxy与火狐智能地址栏两者兼得http://lilydjwg.is-programmer.com/posts/22413
这几篇介绍的功能有很大一部分是重复的,重点都讲的是pac的应用。陈三的那篇还简单介绍了其他命令的使用。如果你要介绍的和上面某篇有较大部分一致,不妨直接在帖子中说明应用效果,然后贴外链让他们去看,以便节省时间写其他内容。
楼主提到的审核问题,可能和某坛友说的,有敏感词的原因有关。也许可以发在卡饭的浏览器板块试试?那边人气更高,喜欢折腾的也更多,然后再转载到这边效果也是一样的。
最后,预祝楼主家人身体健康,早日康复。
作者: 8905438    时间: 2013-11-26 18:49

回复 19# qiwei_201


    今天我也来论坛刷新了好多次,一直没看到回复提示,刚刚不甘心点进来看了下,才发现你已经回复了,只是回复到其他人的楼层上,哈哈。
作者: 未止    时间: 2013-11-26 19:38

回复 16# byyh


    嗯
作者: aiden    时间: 2013-11-26 20:33

刚好我现在用的人国人基于Privoxy开发的广告过滤软件——bloxy保护伞~~~~
保护伞基于开源代理服务器Privoxy以及公开项目Adblock-Chinalist的过滤规则,使用基于正则表达式和CSS进行过滤。保护伞支持Privoxy项目的大部分设置,用户可以编辑保护伞目录中config.txt,action.txt以及filter.txt三个文件,自由定义功能。
希望lz能够分享一下具体的配置啊,特别是百变饼的~~
作者: TheKiller    时间: 2013-12-11 20:34

本帖最后由 TheKiller 于 2013-12-26 00:53 编辑

支持 期待更新
作者: 孤独源于爱    时间: 2013-12-11 21:04

科普下呗!你说的是什么啊?
作者: rubbish1    时间: 2013-12-11 21:13

技术真心牛笔,还能玩出花样了,顶了
作者: odrip    时间: 2014-2-6 15:20

哈哈了太好了哈哈。
作者: TheKiller    时间: 2014-5-5 21:52

@centerhoo
作者: linshizhuce123    时间: 2016-10-28 22:35

没看懂啊




欢迎光临 世界之窗论坛 (http://bbs.theworld.cn/) Powered by Discuz! 7.2