greatghoul
Ask and Learn

Ask and Learn

一个分享网页到 Twitter 的 Bookmarklet

一个分享网页到 Twitter 的 Bookmarklet

greatghoul's photo
greatghoul
·May 6, 2020·

1 min read

Bookmarklet 是什么东西就不多作解释了,我之前用的一个分享页面到 twitter 的 bookmarklet 非常不好用,提取选中文本和解析网页标题时灵时不灵,Google 试用了一圈,也没有找到合适的,本来不是个什么复杂的东西,干脆自己写一个算了。

(function() {
  var url = window.location.toString();
  var text = (window.getSelection().toString() || document.title || '').replace(/(^\s+|\s+$)/g, '');
  var tweetUrl = 'https://twitter.com/intent/tweet';
  var searchParams = new URLSearchParams();
  var left = screen.width / 2 - 700 / 2;

  searchParams.set('url', url);
  searchParams.set('status', text + '\n' + url);
  window.open(tweetUrl + '?' + searchParams.toString(), '_blank', 'chrome,centerscreen,width=700,height=260,top=100,left=' + left);
})();

压缩转译成 bookmarklet 就是

javascript:(function()%20{var%20url%20=%20window.location.toString();var%20text%20=%20(window.getSelection().toString()%20%7C%7C%20document.title%20%7C%7C%20%27%27).replace(/(%5E%5Cs%2B%7C%5Cs%2B%24)/g%2C%20%27%27);var%20tweetUrl%20=%20%27https%3A//twitter.com/intent/tweet%27;var%20searchParams%20=%20new%20URLSearchParams();var%20left%20=%20screen.width%20/%202%20-%20700%20/%202;searchParams.set(%27url%27%2C%20url);searchParams.set(%27status%27%2C%20text%20%2B%20%27%5Cn%27%20%2B%20url);window.open(tweetUrl%20%2B%20%27?%27%20%2B%20searchParams.toString()%2C%20%27_blank%27%2C%20%27chrome%2Ccenterscreen%2Cwidth=700%2Cheight=260%2Ctop=100%2Cleft=%27%20%2B%20left);})();

它支持下面的一些特性:

  • 如果不选中文本,点击书签会分享 网页标题+网址
  • 如果选中的文本,点击书签会分享 选中的文字+网址
  • 打开的弹出窗口会居中显示

image.png

Github 上不能发带有可执行代码的链接,你可以访问这个 Codepen 来试用。 codepen.io/greatghoul/pen/qpWMjR


如果你也想尝试尝试写个 Bookmarklet,推荐一些工具。

  • Bookmarklet IDE 一个 Chrome 扩展,界面巨丑,交互难受,但还算合用。
  • Make Bookmarklet 一个 Sublime Text 的插件,写好 js 后运行插件的命令,会生成 bookmarklet 内容到文件第一行注释里面。
  • Bookmarklet Maker 一个在线的 bookmarklet 编辑器,实时转译,还支持引入 jQuery
 
Share this