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

然后果断跑去 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里，再一测试，就可以了～

效果如下：

点击"Search on whatanime.ga"之后

Safari扩展的本体和源代码请戳我的Github，WAIT-Safari