书签应用

元信息

• 目标：认识 bookmarklet 这种"零后端驱动"的轻应用形态——一段存于书签的脚本，注入当前网页执行；掌握"控制台调试→打包压缩→存为书签"的制作流程，并知道其现代演进是浏览器扩展
• 关键概念：bookmarklet、脚本注入、书签、控制台调试、打包压缩、浏览器扩展
• 关联阶段：cp3
• 常见误区：以为做 web 应用必须有自家页面和后端（bookmarklet 驱动的是别人的页面）；直接把多行脚本贴进书签（需打包压缩成 URL 形式）；以为书签小应用能与任意页面随便交互（受同源策略与页面环境约束，如目标页没引 jquery 就不能直接用 $）

什么是书签（bookmarklet）应用？

• 书签应用是使用 javascript 编写的一段小脚本
• 可以存储为浏览器里的书签，并在需要时调用
• 调用时，相当于将这段小脚本注入到当前网页，并执行之
• 常见功能：解析当前网页中的链接、图片等资源；给当前网页添加动作或隐藏元素等等

定义 https://zh.wikipedia.org/wiki/%E5%B0%8F%E4%B9%A6%E7%AD%BE

示例

• https://www.squarefree.com/bookmarklets/
• https://www.appinn.com/bookmarklet/

制作流程

• 打开目标网页
• 在浏览器开发工具的控制台中，输入代码，调试脚本
• 将调试成功后的脚本通过打包工具打包和压缩
• 将生成的链接加入到浏览器的书签栏
• 制作指南 http://www.ruanyifeng.com/blog/2011/06/a_guide_for_writing_bookmarklet.html
• 打包工具
  • https://chriszarate.github.io/bookmarkleter/
    • https://github.com/chriszarate/bookmarkleter
  • https://make-bookmarklets.com/

浏览器扩展

书签小应用的开发较复杂，且功能有限，现代主流的做法是将其升级为浏览器扩展或插件，从而可更有效地与客户页面进行交互

讨论

• 编写书签小应用时，如果目标网页上没有引用jquery库，而你又希望在该小应用中使用jquery库，如何才能做到?