bookmarklet 代码的两点小技巧

bookmarklet是一种比较方便扩展网站功能的方式，可以在工具栏上添加自定义的书签执行定制的js代码。但由于书签内容的限制，不能出现很复杂的字符或者过长的字符串，因此需要对代码进行压缩，这在调试过程中非常不友好。根据经验，有两个小技巧可以提升开发和分发的效率。

1、将完成的代码转换为base64编码的字符串

由于大多数浏览器书签编辑功能只是一个简单的文本框，输入太多内容或者存在会车换行的代码无法一次性复制上去。对代码进行js压缩也会存在特殊符号以至于需要对代码进行转义等问题。为解决此问题，将代码实现转换为base64的字符串，然后再通过eval(atob(codeString))来执行，可以避免上述问题。而且，base64代码的修改如果需要还原，还可以保留原先的代码格式，不需要预先进行代码压缩。

 

2、通过动态请求执行代码实现快速开发调试

由于书签文本长度的限制或者在开发阶段需要频繁修改代码内容的时候，不断使用编辑工具转换、粘贴代码是一个繁琐的过程，因此代码在开发阶段最好保持源代码的状态，便于错误跟踪和修改。

下述代码就是动态请求本地服务器的代码内容，来完成目标网站上特定功能。需要注意的是，本地存放功能代码的服务器需要支持跨域请求。

javascript:window.fetch("http://127.0.0.1:20080/bookmarklet/code.js",{method: "GET",mode: "cors",cache: 'no-cache',headers: { 'Content-Type': 'text/plain'}}).then(a=>a.text()).then(b=>eval((b)))