Safari Extension for WAIT, What Anime Is That

前几天在网上看到了这个微博
wait-weibo

然后果断跑去 github 上围观,发现作者已经写了 Chrome, Firefox 和 Opera 的插件了,但是没有Safari的,于是就心血来潮想做个Safari Extension。

总的来说思路比较简单,和 Chrome 下想法类似,先是在右键时 hook 住 context menu,判断如果右键的对象是 IMG 或者 VIDEO 的话,就在 context menu 中增加 Search on whatanime.ga
这一步挺简单,Safari中复杂一点的地方在于global page和injected script是不同的环境,互相通信需要靠 dispatch message
最麻烦的地方是CORS, 即Cross-Origin Resource Sharing。Chrome, Firefox 的多数版本都没有严格的限制,但是在 Safari 里,想在 injected script 中修改原有网页img标签的src属性时,就会被禁止掉。

稍微有点让人头疼的问题,不过后来想到了一个 hacking 的方法,Safari 虽然不能直接改原有网页上的img标签的src,但是我们可以构造一个新的img element去替换原有的!

document.querySelector("#originalImage").outerHTML = "";	 	 
var hackingCORS = document.createElement("img");	 	 
hackingCORS.setAttribute("id", "originalImage");	 	 
hackingCORS.setAttribute("style", "display: none;");	 	 
hackingCORS.setAttribute("src", event.message);
var before = document.body.childNodes[2];
document.body.insertBefore(hackingCORS, before);	 	 

本以为到这里就可以结束了,结果发现whatanime.ga的脚本里是先capture了原来的img对象,这样的话,如果我们替换了img,那么在访问之前的变量时就会出错。如果可以让它重新获取img对象就好了,但是就算给作者提issue,好像原有的代码改起来也比较麻烦。
那么怎么办呢,要不就靠变量作用域好了!于是又把原网站的两个脚本直接'原封不动'的复制到了callback里,再一测试,就可以了~

效果如下:

wait-screenshot-1

点击"Search on whatanime.ga"之后

wait-screenshot-2
Safari扩展的本体和源代码请戳我的Github,BlueCocoa/WAIT-Safari

声明: 本文为0xBBC原创, 转载注明出处喵~

发表评论

电子邮件地址不会被公开。 必填项已用*标注